5t3ph / howtowebdev

The source files repository for the video series for beginners to web development - "Learn How to Make a Website with Steph" - available on YouTube: https://www.youtube.com/channel/UC8qc2AyBbNmvgIky6236nHA

Learn How to Make a Website with Steph

Are you interested in website development but have no idea where to start? Do you currently have little to no prior experience with web development? Then this video course is for you!

Things You'll Learn:

• Foundations: What HTML and CSS are and how to use them
• Terminology critical for understanding, using - and Googling ;) - web development
• About accessibility: best practices to ensure your website is viewable and usable by users of all abilities (low vision, blind, motor impaired, etc.)
• How to work with images and typography
• How to format your website for mobile devices (responsive design)
• How to test your website and prepare it for different browsers
• How to add basic animation
• Tips on thinking like a developer
• About using version control (Github) for storing your source files and managing changes
• How to publish your final website

At the course conclusion, you'll be able to build frontend experiences using modern techniques, and have a solid foundation for continuing to learn intermediate and advanced topics.

Learn more about the course >

Subscribe for access to all video courses >

Support this project on Patreon > and get early access to new videos!

This repository will be kept updated as new videos are released for the corresponding YouTube video series.

Course Video Links

As the video course is updated, links to videos and corresponding source code will be updated with each title.

Subject to change slightly as videos are recorded

View series schedule >

START HERE: Foundations

Course Introduction / Meet Steph

1. Getting Started #1: Setup Working Environment

2. HTML Basics #1: Parts of an HTML File

3. HTML Basics #2: Essential Elements

4. HTML Basics #3: Semantic Structure

5. HTML Basics #4: Blog Layout

6. HTML Basics #5: Card Layout

7. Accessibility Basics #1: Creating Interfaces for All Web Users

8. CSS Basics #1: Intro to CSS / How to Write CSS

9. CSS Basics #2: Layout and the Box Model

10. CSS Basics #3: Essential Properties and the Class Selector

11. CSS Basics #4: Understanding the Cascade

12. Accessibility Basics #2: Structure and Styling Considerations

13. CSS Basics #5: Style a Blog Layout

14. CSS Basics #6: Style a Card Layout

15. CSS Basics #7: Browser Compatibility

16. CSS Basics #8: Responsive Design

Capstone Website Project: Unicorn Space Tours

Get early access > by becoming an Official Patron for $3/month!

Preview the final project >

1. Setup For a Website Project

2. Dissecting a Web Design Layout

3. Translating a Design into Semantic HTML

4. Header Typography

5. Footer and Alignment Utilities

6. Main Content and About Section

7. Tour Package Cards

8. Header Graphics

9. About Section Graphics

10. Tour Package Graphics

11. Navigation

12. Booking Page and Form

13. Responsive Mobile View

14. Animation

15. Basics of Browser Testing / Automated Prefixing

16. Version Control

17. Publish the Website