Early Access

This course isn't public yet! Think of it as an "early access" or "beta test". Content items with the following marks are incomplete:
◕ Mostly complete ◑ Partial content ◔ Some content or links

How to continue to learn

Congratulations on starting your coding journey with us!

Once you've started using the above 3 steps, you have to "rinse and repeat": Keep on working through every activity until you complete each lesson, and work through all the lessons until you complete the course. We try to keep our courses with very clear, straight-forward structure, so you know just how much you have done, and how much you have left to do!

Types of content

1. Lessons - These are pages with coding activities, slides, and occasional videos that can be accomplished in 2 hour intervals. They are intended to simulate being in a real workshop-style classroom. The activities you do in them help prepare you for the Project Labs.
2. Project Labs - The goal of a Project Lab is to apply your knowledge to bigger designs. These are lessons that don't introduce much new material, as much as give repeated practice with concepts learned in the previous lessons, along with practical new ways to apply the concepts.

Once you've completed the course, you'll have created as many as dozens of useful, fun, and potentially commercially viable websites. You'll have also built up your skills in Foundational web design knoweldge, and would be ready to jump into learning many different other programming languages and frameworks.

Working locally

You don't need to start with this. Start with the above instructions instead. However, by Lesson 2.1, you will be instructed to complete activities locally. At that point (or earlier, if you prefer), follow these steps:

1. Install an editor or IDE, such as Geany (free software) and Notepad++ (free software), Sublime (freeware), or VS Code (by Microsoft).
2. Download and extract the Foundations of Web Design Zip file
3. Because dealing with so many files can be tricky, get practice navigating around the directory using your file browser on your computer, e.g. Finder on macOS, Files or Dolphin on Linux / GNOME / KDE, or Windows File Explorer on Windows
4. When you are ready, open the instructions.md file of an activity in your text editor, along with challenge1.html (or equivalent, e.g. ch1/ directory) of an activity to begin the lesson.

Tips for learning Locally

• Tip 1: Use code editor on a laptop or desktop computer and code editor to practice concepts, in addition to the online one, as it's designed just for demonstrating concepts and could feel limiting with too much use. However, if necessary, you can still finish it all only using the online editors.

• Tip 2: The Activity Challenge instructions tell you to apply the concepts you learn. Most will have sample code to edit and see. It's encouraged to try apply the lesson you learned on a component you develop locally on your computer. What does it mean to develop locally? This means editing a HTML file separately in a text editor (open source options include Geany for Linux / macOS / Windows and Notepad++ for Windows), saved to your computer, also opened in a modern web browser (such as Firefox or Chrome).

• Tip 3: When working locally, developers often like to tile the web browser and editor side-by-side, in separate monitors, or on big screens so they can see it all at once. You don't need a big screen, however, if you can use good key combos! For example: Alt+Tab (switch windows, e.g. between editor and browser) and Ctrl+Shift+R (force refresh browser).

• Tip 4: This is more of a general tip, but you should set a timer to complete each lesson in a reasonable time for you, e.g. 1 hour, or 2 hours. If you find yourself stuck on a particular lesson for longer than 2 hours, then move-on. Go for a walk: Sometimes you need some exercise and offline time for an "aha" moment!