Learn how to create a responsive website that will work on all devices, PC, laptop, tablet, and phone. Show Create a Website from ScratchA "Layout Draft"It can be wise to draw a layout draft of the page design before creating a website: Navigation barSide ContentSome text some text.. Main ContentSome text some text.. Some text some text.. Some text some text.. FooterFirst Step - Basic HTML PageHTML is the standard markup language for creating websites and CSS is the language that describes the style of an HTML document. We will combine HTML and CSS to create a basic web page. Example<!DOCTYPE html> <h2>My Website</h2> </body> Try it Yourself » Example Explained
Creating Page ContentInside the
HeaderA header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name: <div class="header"> Then we use CSS to style the header: .header { /* Increase the font size of the <h2> element */ Try it Yourself » Navigation BarA navigation bar contains a list of links to help visitors navigating through your website: <div
class="navbar"> Use CSS to style the navigation bar: /* Style the top navigation bar */ /* Style the navigation bar links
*/ /* Right-aligned link */ /* Change color on hover/mouse-over */ Try it Yourself » ContentCreate a 2-column layout, divided into a "side content" and a "main content". <div class="row"> We use CSS Flexbox to handle the layout: /* Ensure proper sizing */ /* Column container */ /* Create two unequal columns that sits next to each other */ /* Main column */ Try it Yourself » Then add media queries to make the layout responsive. This will make sure that your website looks good on all devices (desktops, laptops, tablets and phones). Resize the browser window to see the result. /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ /* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */ Try it Yourself » Tip: To create a different kind of layout, just change the flex width (but make sure that it adds up to 100%). Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter. Tip: To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter. What is box-sizing? You can easily create three floating boxes side by side. However, when you add something that enlarges the
width of each box (e.g. padding or borders), the box will break. The You can read more about the box-sizing property in our CSS Box Sizing Tutorial. FooterAt last, we will add a footer. <div
class="footer"> And style it: .footer { Try it Yourself » Congratulations! You have built a responsive website from scratch. W3Schools SpacesIf you want to create your own website and host your .html files, try our free website builder, called W3schools Spaces: |