Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone.
Tip: Did you check out the tutorial? Go to tutorial about how to make a website
Create a website from scratch
Try it yourself here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_make_a_website
Quick tips for your website
- Vary the layout, by changing the flex width (but make sure that it adds up to 100%).
- Do you know how the @media rule works? Read more about it in our CSS Media Queries chapter.
- Learn more about the Flexible Box Layout Module: read our CSS Flexbox chapter.
What is box-sizing?
You can create three floating boxes side by side. When you add something that enlarges the width of each box (e.g. padding or borders), the box will break. The box-sizing property allows us to include the padding and border in the box's total width (and height), making sure that the padding stays inside of the box and that it does not break.
You can read more about the box-sizing property in our CSS Box Sizing Tutorial.