Welcome to Your Web Development Journey!
Learn HTML and CSS from scratch and build your own website using GitHub
This comprehensive tutorial is designed for complete beginners. You'll learn:
- HTML basics and semantic structure
- CSS styling and layout techniques
- Responsive design principles
- GitHub workflow (repos, commits, branches, PRs)
- Deploying your site with GitHub Pages
<!DOCTYPE html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>Interactive Lessons
Follow along step-by-step. Each lesson builds on the previous one.
HTML Basics
Learn the foundation of web pages: tags, elements, and structure
Start LessonSemantic HTML
Use meaningful tags to create well-structured, accessible pages
Start Lesson →CSS Basics
Add style and visual appeal to your HTML pages
Start Lesson →CSS Layout
Master layout techniques: flexbox, grid, and positioning
Start Lesson →Responsive Design
Make your websites look great on all devices
Start Lesson →GitHub Setup
Create your GitHub account and first repository
Start Lesson →GitHub Workflow
Learn commits, branches, and pull requests
Start Lesson →GitHub Pages
Deploy your website for the world to see
Start Lesson →Working with Images
Add and optimize images for the web
Start Lesson →Working with Links
Create navigation and hyperlinks between pages
Start Lesson →Advanced Flexbox & Grid
Master advanced layout techniques including named grid areas, auto-fit, and combining Grid with Flexbox
Start Lesson →Component Design
Learn BEM methodology, design systems, CSS variables, and how to build maintainable component libraries
Start Lesson →CSS Animations
Create stunning animations with transitions, keyframes, 3D transforms, and pure CSS interactivity
Start Lesson →Code Examples
Study real examples from simple to complex
Design Resources
Learn about typography, readability, and accessibility
Understanding good design principles helps you create websites that are not only functional but also professional, readable, and accessible to everyone.
Explore Design ResourcesHaving Trouble?
Common problems and step-by-step solutions
Encountering issues while learning is completely normal. Our troubleshooting guide helps you solve common problems like CSS not working, images not loading, or files not displaying correctly. Each solution includes explanations of why problems occur, so you learn to diagnose issues yourself.
View Troubleshooting GuideQuick Reference
Quick lookup for HTML tags and CSS properties
Need to remember the syntax for an HTML tag or CSS property? Our quick reference guide provides easy-to-scan cards with examples for all the common tags and properties you'll use while building websites. Perfect for bookmarking and referencing while you code.
Open Quick ReferenceProject Ideas
Practice your skills with real projects
Ready to build something? Our project ideas guide provides beginner-friendly projects that progress from simple to complex. Each project includes a checklist, required skills, and links to relevant lessons to help you succeed.
View Project IdeasStarter Templates
Ready-to-use templates with detailed comments
Basic HTML
Minimal template to get started
Get TemplateWebsite Starter
Full-featured page template
Get Template →Portfolio
Professional portfolio template
Get Template →Blog
Blog layout template
Get Template →Landing Page
Modern marketing page with hero, features, and responsive images
Get Template →Photo Gallery
Responsive image grid with lightbox and lazy loading
Get Template →3D Rotating Cube
Mesmerizing 3D cube using perspective and 3D transforms
Get Template →Spiral Animation
Mathematical spiral pattern using polar coordinates
Get Template →Accordion FAQ
Pure CSS accordion using the checkbox hack
Get Template →Tabbed Interface
Tab system using :target pseudo-class
Get Template →Modal System
Modal dialogs with animations using :target
Get Template →How to Use This Tutorial
This tutorial is designed to guide you from complete beginner to publishing your own website. Here's how to get the most out of your learning journey.
Start with the lessons in order, beginning with HTML Basics. Each lesson builds on previous concepts, so working through them sequentially helps you understand how everything connects. Don't rush - take time to complete the practice exercises and experiment with the examples provided.
As you progress through lessons, refer to the code examples when you need to see concepts in action. Study how the examples are structured and try modifying them to see how changes affect the result. Use the starter templates when you're ready to build your own projects - they provide foundations you can customize.
When you reach the GitHub lessons, you'll learn to store your code and publish your websites. Follow the GitHub guides step-by-step, and don't hesitate to revisit them as needed. The design resources section provides guidance on making your websites look professional and accessible.
Remember: web development is a skill built through practice. Every lesson includes opportunities to apply what you've learned. Take time to experiment, make mistakes, and learn from them. This tutorial provides the foundation, but your curiosity and practice will take you further.
GitHub Guides
Step-by-step guides for using GitHub with your projects
Getting Started with GitHub
Create your account and understand the basics
Creating Your First Repository
Learn how to create and initialize a repo
Making Your First Commit
Save your code with version control
Branches and Pull Requests
Organize your work and collaborate effectively
Deploying with GitHub Pages
Publish your website for free
Collaboration Workflows
Work with others on shared projects
Using Browser Developer Tools
Inspect elements, debug code, and test changes