Full Curriculum

Making Websites

Far beyond just learning HTML & CSS, this module covers everything you need to know to build and launch real sites. Starting from how websites even work, you’ll learn how to code and design real sites that look good and are easy to use. You’ll learn how the internet works and how to host a site that loads quickly. You’ll build and launch a portfolio website to showcase your work to future employers.

Making websites is the first step towards learning frontend web development, the more visibe half of web development in general. Web deveopment is a popular branch of software development as a whole.

To get more context, read the atlas:

  1. Web Development
  2. Frontend Web Development
  3. Making Websites

Don't worry about memorizing everything.

These lessons will light up as I complete writing them.

Part 1: How websites work

Learn the fundamentals of how websites are put together with HTML & CSS, and use the browser’s developer tools to start taking websites apart to see how they work.

  1. How do Websites Work?
  2. HTML
  3. CSS Basics
  4. CSS Colors and Hexadecimal
  5. CSS Box Model
  6. CSS Selectors
  7. CSS Floats
  8. CSS Positioning
  9. Developer Tools

Project: Reverse engineer the Google homepage

Part 2: Write your first website

Set up your computer to develop and run a website locally, and learn enough CSS layout to create your first site.

  1. Setting Up Your Development Environment
  2. The Command Line
  3. Running a Server
  4. Git Basics
  5. CSS Layout
  6. CSS Flexbox

Project: Copy a Design From the CSS Zen Garden

Part 3: Design a new site from scratch

Learn how to apply the skills you’ve gained to design a real site from scratch. Build a portfolio site to showcase your future projects.

  1. Fundamentals of User Experience Design
  2. Fundamentals of Visual Design
  3. Responsive design and grid systems
  4. CSS frameworks and bootstrap
  5. Common web design patterns
  6. The process of making a real website

Project: Build a portfolio site

Part 4: Put it onto the internet

Learn how the internet works so you can take the website you’ve created and put it out onto the web.

  1. How the internet works
  2. Getting a domain
  3. Hosting
  4. Website performance basics
  5. Caching
  6. Content Delivery Networks
  7. Performance tools

Project: Launch your portfolio

Part 5: Make it professional

Make your sites feel more professional by improving the design, code quality, and little big details.

  1. CSS3
  2. Browser Compatibility
  3. Animations
  4. Web design basics
  5. UX basics
  6. Accessibility and Internationalization
  7. CSS Quality
  8. Performance Optimization

Project: Revamp your portfolio

Part 6: Tools of the trade

Learn how you can make money making real websites that people will use.

  1. Content Management Systems
  2. Static Site Generators
  3. Search Engine Optimization
  4. Writing good copy
  5. Photoshop and Illustrator
  6. Buying designs, templates, and themes
  7. Website monetization
  8. Email tools

Project: Build a tech blog designed to make money

Part 7: Advanced topics

Round out your knowledge with all the other bits that didn’t fit elsewhere.

  1. CSS Preprocessors and SASS
  2. More CSS Frameworks
  3. The Semantic Web
  4. SVG and graphics
  5. Pursuing mastery
  6. The big list of useful resources

Project: Build lots and lots of websites