# Mandatory Course (Udemy)

[The Complete 2024 Web Development Bootcamp](https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12638830#notes) (accessible on Udemy via LEARN app)

1. You are encouraged to go through this online course before the programme so that you can get a good sense of what is needed to build a web app during the programme. 
2. We have selected a few of the more important modules below that we recommend participants to focus on for essential foundation knowledge. 
3. As coding is a skill that takes consistent revision and practice to build, we strongly recommend officers to come in to TechUp having perused the topics (even if briefly) and bring any questions you have, so that TechUp can serve to reinforce key concepts and skills in web development.

{% hint style="info" %}
Those indicated in❗️**bold are mandatory for TechUp**. 
{% endhint %}

{% tabs %}
{% tab title="❗️Front-End + HTML" %}

<table><thead><tr><th width="231">Title</th><th width="190">Udemy Link</th><th width="150"># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>❗️<strong>Front End Web Development</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12638830#overview">Udemy Section 1</a></td><td>9</td><td>37 min</td></tr><tr><td>❗️<strong>Introduction to HTML</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37390282#overview">Udemy Section 2</a></td><td>8</td><td>51 min</td></tr><tr><td>❗️<strong>Intermediate HTML</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37349778#overview">Udemy Section 3</a></td><td>7</td><td>51 min</td></tr><tr><td>❗️<strong>Multi-Page Websites</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37349942#overview">Udemy Section 4</a></td><td>7</td><td>1 hr 10 min</td></tr></tbody></table>
{% endtab %}

{% tab title="❗️CSS" %}

<table><thead><tr><th width="296">Title</th><th width="159">Udemy Link</th><th width="124"># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>❗️<strong>Introduction to CSS</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37350296#overview">Udemy Section 5</a></td><td>6</td><td>59 min</td></tr><tr><td>❗️<strong>Intermediate to CSS</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37350528#overview">Udemy Section 7</a></td><td>5</td><td>1 hr 33 min</td></tr><tr><td><p><a data-footnote-ref href="#user-content-fn-1">Bootstrap</a></p><p>Helps you with nice default HTML elements like buttons and nav bar</p></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37368626#notes">Udemy Section 11</a></td><td>4</td><td>1 hr 40 min</td></tr><tr><td><p><a data-footnote-ref href="#user-content-fn-2">Capstone Project 2 - Personal site</a></p><p>By the end of the course, if you have done the capstone projects, you will have a personal repository of projects to showcase on GitHub.</p></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/37331054#overview">Udemy Section 13</a></td><td>1</td><td>Around 1 hour for assignment</td></tr></tbody></table>
{% endtab %}

{% tab title="❗️Javascript, DOM" %}

<table><thead><tr><th width="259">Title</th><th width="168">Udemy Link</th><th width="139"># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>❗️<strong>Introduction to Javascript ES6</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12371320#overview">Udemy Section 14</a></td><td>28</td><td>2 hr 28 min</td></tr><tr><td>❗️<strong>Intermediate Javascript</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12373892#overview">Udemy Section 15</a></td><td>19</td><td>1 hr 30 min</td></tr><tr><td>❗️<strong>The Document Object Model (DOM)</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12374106#overview">Udemy Section 16</a></td><td>9</td><td>56 min</td></tr><tr><td><a data-footnote-ref href="#user-content-fn-3">Boss Level Challenge 1 - The Dicee Game</a></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12383900#overview">Udemy Section 17</a></td><td>11</td><td>20 min (1-2 hours for assignment)</td></tr><tr><td>❗️<strong>The Unix Command Line</strong> </td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12371166#overview">Udemy Section 21</a></td><td>5</td><td>30 min</td></tr></tbody></table>
{% endtab %}

{% tab title="❗️Git, GA" %}

<table><thead><tr><th width="231">Title</th><th width="188">Udemy Link</th><th># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>❗️<strong>Git, GitHub and Version Control</strong></td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12386072#overview">Udemy Section 27</a></td><td>9</td><td>1 hr 17 min</td></tr><tr><td>❗️<a data-footnote-ref href="#user-content-fn-4"><strong>How to set up Google Analytics</strong></a> <strong>(GA)</strong></td><td><a href="https://www.youtube.com/watch?v=f3X-hYRxBL8">YouTube tutorial</a></td><td>-</td><td>6 min</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

We highly recommend completing the additional courses below to have an understanding on full stack web development.

{% tabs %}
{% tab title="Backend" %}

<table><thead><tr><th width="252">Title</th><th width="174">Udemy Link</th><th width="138"># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>Backend Web Development</td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12407820#overview">Udemy Section 22</a></td><td>2</td><td>21 min</td></tr><tr><td>Node.js</td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12384268#overview">Udemy Section 23</a></td><td>8</td><td>1 hr 6 min</td></tr><tr><td>Express.js with Node.js</td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12384462#overview">Udemy Section 24</a></td><td>8</td><td>2 hr 1 min</td></tr><tr><td>EJS (Embedded JavaScript)</td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/38911782#overview">Udemy Section 25</a></td><td>6</td><td>1 hr 30 min</td></tr></tbody></table>
{% endtab %}

{% tab title="APIs" %}

<table><thead><tr><th width="225">Title</th><th width="189">Udemy Link</th><th># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>APIs (Application Programming Interface)</td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/38912006#overview">Udemy Section 28</a></td><td>8</td><td>2 hr 28 min</td></tr></tbody></table>

{% endtab %}

{% tab title="Databases (SQL + PostgreSQL)" %}

<table><thead><tr><th width="230">Title</th><th width="196">Udemy Link</th><th># of Lectures</th><th>Duration</th></tr></thead><tbody><tr><td>Databases </td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/40494138#overview">Udemy Section 31</a></td><td>2</td><td>22 min</td></tr><tr><td>SQL  </td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/12385674#overview">Udemy Section 32</a></td><td>6</td><td>36 min</td></tr><tr><td>PostgreSQL </td><td><a href="https://learncsc.udemy.com/course/the-complete-web-development-bootcamp/learn/lecture/40494144#overview">Udemy Section 33</a></td><td>16</td><td>4 hr 11 min</td></tr></tbody></table>
{% endtab %}
{% endtabs %}

[^1]: optional but useful

[^2]: optional but it will help you experiment with your first website

    (E.g. Steph’s first ever [website](https://stephsiow.github.io/cv/))

[^3]: optional but fun and useful for practice

[^4]: this will be used to analyse your webapp’s metrics e.g. user traffic