Skill PathTo start this Skill Path, upgrade your plan.
Build a Website with HTML, CSS, and GitHub Pages
Learn the basics of web development to build your own website.
Includes HTML, CSS, Responsive Design, Flexbox, CSS Transitions, GitHub Pages, and more.
This skill path includes
This skill path includes
Skill level
BeginnerTime to complete
Average based on combined completion rates — individual pacing in lessons, projects, and quizzes may vary14 hoursProjects
15Prerequisites
None
About this skill path
One of the best ways to start coding is by building websites. Whether you want to tweak your business’s site, hone your web development skills, or learn to collaborate with developers, this Skill Path will help you get there. Learn important HTML and CSS fundamentals and practice your new skills with real-world projects.
Skills you'll gain
- Read and write basic HTML
- Implement basic web design principles
- Build a static website
- Launch a website with GitHub Pages
Syllabus
9 units • 18 lessons • 15 projects • 14 quizzes- 1
Beginner HTML
In this unit, you will learn the basics of HTML. HTML is a language that provides structure to website content.
- 2
Beginner CSS
This unit provides an overview of CSS, the language used to give websites style.
- 3
How to Build Websites on Your Own Computer
Get setup to build websites on your own computer!
- 4
Intermediate CSS: Colors and Typography
Learn the CSS syntax required to adjust the colors and typography of a website.
- 5
Intermediate CSS: Layout and Positioning
Learn how to use CSS to adjust the arrangement of content on your website.
- 6
Responsive Design and Accessibility
This unit will teach you how to make websites that are usable via different device sizes and screen readers.
- 7
Advanced CSS: Flexbox and CSS Transitions
Push your web design skills with more advanced CSS syntax, including the industry standard layout tool Flexbox, and CSS transitions.
Certificate of completion available with Plus or Pro
Earn a certificate of completion and showcase your accomplishment on your resume or LinkedIn.
Projects in this skill path
- practice Project
Fashion Blog
It's time to build fluency in HTML Fundamentals. In this next project, we're going to practice Structure in HTML so you can hone your skills and feel confident taking them to the real world. Why? This project will help you to understand and master the building blocks of a webpage. It'll all build up from these foundations. What's next? A blogger, a developer, a stylish website. You got this! - practice Project
Wine Festival Schedule
In this project, we're going to practice tabular organization in HTML so you can hone your skills and feel confident taking them to the real world. Why? If you're going to have data on a webpage, you've got to master the skill of effectively and aesthetically organizing it – an HTML table is the perfect solution. - practice Project
Olivia Woodruff Portfolio
In this project, we're going to practice Visual Rules in CSS so you can hone your skills and feel confident taking them to the real world. Why? It's important to have a good grasp on the basic styling principles of a webpage.
Earn a certificate of completion
Show your network you've done the work by earning a certificate of completion for each course or path you finish.- Show proofReceive a certificate that demonstrates you've completed a course or path.
- Build a collectionThe more courses and paths you complete, the more certificates you collect.
- Share with your networkEasily add certificates of completion to your LinkedIn profile to share your accomplishments.
Reviews from learners
- The progress I have made since starting to use codecademy is immense! I can study for short periods or long periods at my own convenience - mostly late in the evenings.ChrisCodecademy Learner @ USA
- I felt like I learned months in a week. I love how Codecademy uses learning by practice and gives great challenges to help the learner to understand a new concept and subject.RodrigoCodecademy Learner @ UK
- Brilliant learning experience. Very interactive. Literally a game changer if you're learning on your own.John-AndrewCodecademy Learner @ USA
Our learners work at
How it works
Skill paths help you level-up
Get a specialized skill
Want to level up at work? Gain a practical, real-world skill that you can use right away to stand out at your job.Get step-by-step guidance
We guide you through exactly where to start and what to learn next to build a new skill.Get there quickly
We’ve hand-picked the content in each Skill Path to fast-track your journey and help you gain a new skill in just a few months.
Ready to learn a new skill?
Get started on Build a Website with HTML, CSS, and GitHub Pages with a free Codecademy account.Looking for something else?
Related resources
- Article
Create Your First Local HTML/CSS Project
Use the tools on your own computer to start your own HTML/CSS project! - Article
CSS Glossary
Programming reference for CSS covering Comments, Properties, and Selectors - Article
CSS Visual Rules in Chrome Inspector
In this article, you'll learn how to use browser developer tools to analyze a web page's HTML and CSS, as well as learn techniques to help speed up your development workflow.
Related courses and paths
- Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours - Free course
Learn CSS: Box Model and Layout
Use the box model to fine tune display and positioning of HTML elements.Beginner Friendly2 hours - Free course
Learn Intermediate CSS
Learn how to implement elegant transitions, create new layouts and serve users with dynamic needs.Intermediate10 hours
Browse more topics
- Web Development4,846,659 learners enrolled
- HTML & CSS2,302,619 learners enrolled
- Web Design2,284,256 learners enrolled
- Code Foundations7,243,081 learners enrolled
- Computer Science5,696,707 learners enrolled
- Data Science4,362,183 learners enrolled
- Python3,524,329 learners enrolled
- For Business3,237,034 learners enrolled
- JavaScript2,810,014 learners enrolled
What's included in skill paths
Practice Projects
Guided projects that help you solidify the skills and concepts you're learning.Assessments
Auto-graded quizzes and immediate feedback help you reinforce your skills as you learn.Certificate of Completion
Earn a document to prove you've completed a course or path that you can share with your network.