If you are going to build a multi-page website, it is good to create a design system to help tie everything together.
We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create and implement a design system with CSS.
Kevin Powell created this course. Kevin is a CSS guru who has created many popular web development courses on a variety of platforms.
This course will teach you how to bring high-quality Figma designs to life in the browser. You will learn how to create a space travel website from scratch.
In this course, you’ll test your HTML, CSS and JavaScript skills by building out a responsive, multi-page site featuring a homepage, buttons, a navigation bar, tabs, keyboard navigation and underline, dot and number indicators.
You’ll also learn how to create an effective design system to ensure that your site is sharp and professional, and your coding is as efficient as possible.
After completing this course, you’ll have a deep understanding of CSS and responsive design and the knowledge to build an interactive site which users will love.
Here all the topics covered in this course:
- Creating design systems
- CSS resets
- Utility classes
- Using color
- Responsive typography
- Adding spacing
- Effective buttons
- Underline indicators
- Dot indicators
- Number indicators
- Grid containers
- Responsiveness
- Adding background images
- Navigation
- Open/close buttons
- Accessibility tweaks
- Skip to content
- Alignment
- The picture element
- Keyboard navigation
- Tabs
- Refactoring
Watch the full course below or on the freeCodeCamp.org YouTube channel (7-hour watch).