This is Web Development X 180°. An introductory course to the web and related technologies such as HTML, CSS and JavaScript, split into 180 days.

The WDX 180° curriculum, along with all related material (exercises, code, etc.), is and will always be free and open-source under the GPLv3 license.

You can find the Syllabus here.

If you are ready and feel committed enough to start the course, you must start by carefully going through the following sections and completing all the necessary tasks:

• Accounts
• Setup
• Communication
• Hardware Requirements
• Software
• Getting familiar with data formats
• How to Study / Productivity Tips

Don't forget to open the FAQ page{:target="_blank"} that accompanies the setup process in a new Tab and check for relevant questions and their respective responses as you go through the next steps.

In order to attend the course (and become a professional web developer) you will need to open an account in the following services:

• Google Gmail{:target="_blank"}
• GitHub{:target="_blank"}
• StackOverflow{:target="_blank"}
• Codesandbox{:target="_blank"}
• Sli.do (used during our Q&As){:target="_blank"}

The first thing you want to do, is to fork{:target="_blank"} this repository under your GitHub account.

After you've successfully forked the repo, you will need to enable GitHub Pages{:target="_blank"} in order to turn the repo into a website also.

Here are the steps:

1. Go to Settings
2. Click on the Pages button
3. Under Branch, select main and click Save
4. Wait a few minutes, check that your repo is online and paste the URL on your personal progress sheet.

The URL should look something like this: https://your_username.github.io/WDX-180

Here is a YouTube video walkthrough{:target="_blank"} to help you with this step.

While you are at the Settings page, select General on the side menu and go to Features > Check "Issues" > Save in order to enable the Issues feature on your forked repo.

{:target="_blank"}

(Click the image to see a full-size version)

Our main channel of communication is Slack{:target="_blank"}. If you haven't received an invitation to the Intechgration Slack team, please inform us via email.

We encourage you to use the Web version{:target="_blank"} of Slack on your PC/laptop and also have it installed on your smartphone. It's available for both Android{:target="_blank"} and iOS{:target="_blank"} devices.

In order to learn more about Slack and the various versions (mobile, desktop, web), scroll down to the Software section.

Enrolled students also have the opportunity to schedule one 30~45min call each week with an instructor.

In order to attend the course you will need the following:

• Attending in-person:

  • Notebook for note taking

• Attending remotely:

  • A computer with camera, microphone and speakers or headphones.
  • Notebook for note taking

This is a list of Software you must have installed on your system in order to get started with the course:

• Communication: Slack{:target="_blank"} is our main communication tool.

  • Web version (recommended){:target="_blank"}
  • Mobile version (recommended): Android{:target="_blank"} / iOS{:target="_blank"}
  • Desktop version:
    • Windows{:target="_blank"} (109MB)
    • Mac{:target="_blank"} (160MB)
    • Linux (*beta){:target="_blank"} (81MB)

• Communication: Zoom client{:target="_blank"} and Google Meet are used to attend the live lectures and student sessions.

  • You can do a quick video/audio check for Google Meet, following the directions found here{:target="_blank"}. Video is optional, but audio (good quality microphone) is mandatory.

• Browser(s):

  • Chrome{:target="_blank"}
    • Windows: _
    • Mac: 212MB
    • Linux: 90MB
  • Firefox{:target="_blank"}
    • Windows: 55MB
    • Mac: 115MB
    • Linux: 76MB

  Note: During the course, we recommend using Chrome for developing and debugging Frontend web applications. For daily, normal usage we recommend using browsers that respect the privacy of their users, such as Firefox and Brave{:target="_blank"}. Likewise, we tend to Google a lot for technical issues and searching for resources, but we recommend using an alternative search engine, such as DuckDuckGo{:target="_blank"} for personal use.

• Code Editor: Download and install Visual Studio Code{:target="_blank"}

  • Windows: 88MB
  • Mac: 203MB
  • Linux: 82MB
  • Extensions for VSCode: Throughout the course we will be recommending a variety of VSCode extensions that can be installed and extend the functionality of the code editor and boost our productivity.
    • One of the first extensions that must be installed is the Live Server{:target="_blank"}.
    • Another one is the Live Share{:target="_blank"} which allows for real-time collaboration. More to follow. 🙂
    • Last, but not least, you want to install our very own WDX Extension Pack{:target="_blank"} which comes packed with recommended extensions and snippets that will you study and code better.

• Git: Mandatory Version Control{:target="_blank"} software for the professional developer. Download here{:target="_blank"}

  • Windows users will also need to run the following command after installing git: git config --global core.autocrlf true as mentioned here{:target="_blank"}
  • In order to check that git has been installed on your system, you will need to run one of the following commands in the terminal:
  • git --version
  • git -v (for short)

• Command Line Tools (Terminal):

  • Windows: you will use GitBash{:target="_blank"} (which is bundled along with git so you don't need to install anything if you already have `git`` installed) as your UNIX-style command line environment.
  • Linux: (Already includes built-in Unix command line terminals. No need to install.)
  • MacOS: (Already includes built-in Unix command line terminals. No need to install.)
    • You will need to install Homebrew{:target="_blank"}

So, you've downloaded Visual Studio Code (aka VSCode) along with Git and GitBash if you are running Windows. Even though Windows comes packed with quite a few types of terminals through which you can type and execute commands, we highly recommend that you stick with Git Bash on Windows.

VSCode has this neat feature called Integrated Terminal which basically means that you can access any terminal without leaving the VSCode interface. Pretty cool!

• Spend a few minutes to watch the following video and learn some of the most basic terminal commands. You will need to carefully practice (especially with the rm command) and repeat these commands on your own terminal in order to become comfortable with it.

• Watch: Terminal Commands for Web Developers

  • Duration: 12min
  • Level: Beginner
  • List of commands that you will learn: pwd, cd, mkdir, ls, touch, rm, rmdir, mv, cp.

❌ Caution: be extremely careful with the rm -rf command. You can probably try to avoid running this command on your system until you get quite comfortable with the terminal, as this command can literally wipe out your entire disk drive if ran improperly.

You can also use our online virtual terminal{:target="_blank"} to safely practice these commands. Remember that the file structure on your system and our virtual terminal environment is quite different from the file structure depicted in the video above. And, yes, you can safely run rm -rf in this virtual environment!

{:target="_blank"}

It's extremely helpful and will greatly improve your chances of retaining any new concept, to keep notes of everything that you learn (e.g. terminal commands in this case) and organize them in a manner that will help you quickly go back and find what you need.

At this point, it's also probably a good idea to spend a few minutes watching this YouTube video walkthrough{:target="_blank"} and follow along in order to create your SSH keys and connect them with GitHub, then follow the rest of the instructions to clone (download) the repository to your computer and install all the necessary dependencies.

• Node.js: Download the LTS version of the powerful and popular JavaScript running environment here{:target="_blank"}. You are going to be using Node.js a lot during this course 🙂. In order to check that Node.js has been installed on your system, you will need to run one of the following commands in the terminal:

  • node --version
  • node -v (for short)

• Productivity:

  • Wikiwand: the Wikipedia Reader{:target="_blank"} (Install as a Browser extension)
    • As you will be reading a lot (and we mean it) of Wikipedia articles throughout the course, we highly recommend that you use this awesome Browser extension to enhance the Wikipedia experience. In a sentence, this is Wikipedia on steroids!
  • Photopea{:target="_blank"}: a free, online image editing software that's pretty similar to Adobe Photoshop. You can use this tool to resize, crop or compress images among other things.

In this course we will be working a lot with Markdown files and CSV files.

Markdown is a lightweight markup language used for formatting plain text documents, allowing users to easily add structure and style using simple, human-readable syntax.

CSV (Comma-Separated Values) is a simple file format used for storing and exchanging structured data, where each line represents a record or entry, and fields or columns within each record are separated by commas.

If you are unfamiliar with either the markdown or CSV file formats, we highly recommend that you watch the following 2 YouTube videos to get a better understanding:

• What is markdown?{:target="_blank"}

  • Duration: 8 min
  • Level: Beginner

• Understanding CSV Files{:target="_blank"}

  • Duration: 6 min
  • Level: Beginner
  • You can find the sample.csv file mentioned in the video in the following filepath: curriculum/week01/resources/sample.csv

In short, CSV is a lightweight data format, where:

• Each line of text is a single row
• Fields (columns) are separated by comma , delimiter character
• The file contains just the data itself (along with the delimiter)
• Does not need any special software (it's just a plain text file)
• All spreadsheet apps (MS Excel, Google Sheets, Numbers, etc.) can read and write CSV

You can find the Syllabus here.

• AVOID DISTRACTIONS at all costs! This means, closing all tabs, browser windows and applications that are not related to your daily study plan and practice. Be very vigilant against applications that include notifications (WhatsApp, Messenger, etc.). From time to time, you might even consider pausing notifications from Slack itself. Check the instructions found here{:target="_blank"} on how to do this.

• Go the extra mile and go through the Extra Resources section that accompanies most of the chapters in this curriculum.

• I'm stuck! Don't worry. Here are some tips to help you overcome what's blocking you:

  • I don't really understand this concept. What should I do?
    • Search for extra information and resources online. (Found something useful that helped you? Make sure to share it!). We highly recommend that you always include MDN{:target="_blank"} in your searches for concepts related to Web technologies. You can google by including the +MDN keyword in your searches to find relevant pages in the MDN documentation, e.g. css position sticky +MDN or you can narrow and limit your searches only within the MDN documentation pages by googling using the site: operator, e.g. css position sticky site:developer.mozilla.org. Other channels for searching extra information include YouTube{:target="_blank"}, StackOverflow{:target="_blank"} and other{:target="_blank"}.
    • Give yourself a break and try it again in a few minutes, hours, days.
    • Reach out to other students on Slack{:target="_blank"}
    • Keep notes in order to discuss this during an upcoming support/Q&A session
  • My code is not working (as expected). What should I do?
    • Use the rubber duck technique{:target="_blank"}

  Hungry for more tips? We have a whole section full of productivity and learning tips right here{:target="_blank"}.