Build a Responsive Website | HTML, CSS Grid, Flexbox & More

What You Will Learn

• How to build a responsive website using modern techniques like CSS Grid and Flexbox
• How to create a fake cloud hosting platform website with a navbar, showcase area, and form to request a demo
• How to deploy the website to Netlify and make the form work with form submission services

Key Concepts

• CSS Grid: a powerful layout system that allows you to align elements across rows and columns
• Pseudo-selectors: used to target specific elements based on their state, such as hover or focus
• Responsive design: designing a website to look good on different screen sizes and devices
• Utility classes: pre-defined classes that can be used to style elements with common styles, such as background colors or button styles

Code Examples

• box-sizing: border-box; - sets the box sizing to border box to avoid adding to the width of an element when adding padding and borders
• font-family: Lato, sans-serif; - sets the font family to Lato, a modern sans-serif font
• <link rel="stylesheet" href="css/style.css"> - links to an external stylesheet

Lesson Summary

In this lesson, we built a responsive website from scratch using modern techniques like CSS Grid and Flexbox. We created a fake cloud hosting platform website with a navbar, showcase area, and form to request a demo. We also learned how to deploy the website to Netlify and make the form work with form submission services. Throughout the lesson, we used key concepts like CSS Grid, pseudo-selectors, and responsive design to create a website that looks good on different screen sizes and devices. We also created utility classes to style elements with common styles.

Practice Exercise

Create a simple website with a navbar, hero section, and footer using HTML and CSS. Use CSS Grid to layout the elements and make sure the website is responsive on different screen sizes.

What Is Next

In the next lesson, we will dive deeper into CSS Grid and learn how to create complex layouts using grid templates and grid areas. We will also explore more advanced topics in responsive design, such as using media queries to target specific screen sizes.