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:
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.
- How do Websites Work?
- HTML
- CSS Basics
- CSS Colors and Hexadecimal
- CSS Box Model
- CSS Selectors
- CSS Floats
- CSS Positioning
- 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.
- Setting Up Your Development Environment
- The Command Line
- Running a Server
- Git Basics
- CSS Layout
- 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.
- Fundamentals of User Experience Design
- Fundamentals of Visual Design
- Responsive design and grid systems
- CSS frameworks and bootstrap
- Common web design patterns
- 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.
- How the internet works
- Getting a domain
- Hosting
- Website performance basics
- Caching
- Content Delivery Networks
- 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.
- CSS3
- Browser Compatibility
- Animations
- Web design basics
- UX basics
- Accessibility and Internationalization
- CSS Quality
- 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.
- Content Management Systems
- Static Site Generators
- Search Engine Optimization
- Writing good copy
- Photoshop and Illustrator
- Buying designs, templates, and themes
- Website monetization
- 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.
- CSS Preprocessors and SASS
- More CSS Frameworks
- The Semantic Web
- SVG and graphics
- Pursuing mastery
- The big list of useful resources
Project: Build lots and lots of websites