Laurand Osmeni - How Do I create Responsive Web Design HTML5 and CSS.

How Do I create a responsive web design with html and css.

Responsive web design gives us web creators some tools for making layouts that respond to any screen size. I will use fluid grids, flexible images and media queries to get the layout looking great regardless of the size of the device is screen dimensions.

Download sample project, feel free to use it.

Responsive Web Design Desktop Sample.

Responsive Web Design Mobile/Tablet Sample.

Responsive Web Design Part 1.

Here showing the html code.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Responsive Web Design.</title> <link href="style.css" rel="stylesheet"/> </meta></head> <body> <div class="laurand-box"> <header> <h1>HTML5 CSS Responsive Design.</h1> </header> <nav class="nav"> <ul> <li><a href="#">Welcome</a></li> <li><a href="#">About</a></li> <li><a href="#">Pictures</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section class="section"> <h2>Section</h2> <p>Section here.</p> </section> <article class="article"> <h2>Article</h2> <p>Article here.</p> </article> <aside class="aside"> <h2>Aside</h2> <p>Aside here.</p> </aside> <footer>Copyright ©2017 www.laurand.info</footer> </div> </body> </html>

Responsive Web Design Part 2.

Responsive Web Design Part 3.

Here showing the css code.

body { background-color: yellow; padding: 0px; margin: 0px; } .section { font-size: 20px; text-align: left; margin: 20px; background: red; border: 1px solid black; } .article { font-size: 20px; text-align: left; margin: 20px; background: purple; border: 1px solid black; } .aside { font-size: 20px; text-align: left; margin: 20px; background: aqua; border: 1px solid black; } header { background: green; color: white; } footer { background: yellow; color: black; border-top: 1px solid black; } .nav { font-size: 30px; background: pink; } .nav ul { list-style-type: none; padding: 0; } .nav ul a { text-decoration: none; } .laurand-box { display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; text-align: center; } .laurand-box > * { padding: 15px; -webkit-flex: 1 100%; flex: 1 100%; } @media all and (min-width: 768px) { .nav { text-align:left; -webkit-flex: 1 auto; flex:1 auto; -webkit-order:1; order:1; } .aside { -webkit-flex:6 0px; flex:6 0px; -webkit-order:3; order:3; } .section { -webkit-flex:6 0px; flex:6 0px; -webkit-order:3; order:3; } .article { -webkit-flex:6 0px; flex:6 0px; -webkit-order:3; order:3; } footer { -webkit-order:3; order:3; } }

Responsive Web Design Part 4.

Responsive Web Design Part 5.

Download sample project, feel free to use it.

Last update May 5 2017.

How Do I create a responsive web design with html and css.

Navigate between pages.