Responsive Web Design (HTML5 and CSS3)

Показать описание

A quick tutorial on creating clean and efficient responsive design for websites. This tutorial covers HTML5 and CSS3 standard techniques for easily building responsiveness into your website structure using meta properties and the @media query. The code is in the comments.

Рекомендации по теме

Комментарии

Excellent tutorialS!
Fantastic voice, amazing narration, superior teaching...
and only some hundreds views in two years, when garbage have millions..?!?
Unbelievable!
Any way. Thank you very much and don't stop teaching!

farmako-net

The code for this tutorial is below. Feel free to use and adapt this code for your own projects. Just make sure to change the names of the company to your own entity's name or brand:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" "content=width=device-width, initial-scale=1" charset="utf-8">
<title>Responsive Design Web Tutorial</title>
<style>
body{
font-family: 'Open Sans', Arial, sans-serif;
font-size: 15px;
line-height: 1.6;
color: #676767;
padding: 0px;
margin: 30px;
background: #efefef;
}

.logo{
position: absolute;
top: 10px;
right: 20px;
color: #A07FB2;
font-size: 36px;
font-weight: 100;
}

.maincontainer{
position: relative;
max-width: 600px;
height: auto;
background:
margin: 50px 50px 50px 50px;
padding: 20px;
border-bottom: 2px solid #A07FB2;
box-sizing: border-box;
}

.mainflexcontainer{
position: relative;
max-width: 600px;
height: auto;
background:
margin: 50px;
display: flex;
flex-direction: row;
}

.mfcl{
background:
flex: 2;
padding: 20px;
font-size: 12px;
}

.mfcr{
position: relative;
background: #A07FB2;
color:
font-size: 2vmax;
text-align: center;
flex: 1 5%;
padding: 20px;
line-height: 1.1;
font-weight: 100;
}

#isosubline{
padding: 0;
margin-top: -5px;
letter-spacing: 3px;
text-transform: uppercase;
font-weight: 100;
font-size: 17px;
}

/*RESPONSIVE BEGINS*/
@media screen and (max-width:900px){

.maincontainer{
margin: 40px 5px 40px 5px;
}

.mainflexcontainer{
margin: 50px 0px;
flex-direction: column;
}

.mfcr:after{
position: absolute;
content: '';
width: 0px;
height: 0px;
top: 100%;
left: 50%;
border-top: 10px solid #A07FB2;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
margin-left: -10px;
}

.logo{
position: relative;
top: 0px;
right: 0px;
color: #ff0000;
font-size: 24px;
font-weight: 100;
width: 100%;
text-align: center;
}

#isosubline{
letter-spacing: 2px;
font-size: 11px;
}
}
/*RESPONSIVE ENDS*/
</style>
</head>

<body>
<div class="logo">Quantico.<br/><p id="isosubline">ISO Certified

<section class="maincontainer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

<section class="mainflexcontainer">
<section class="mfcr">Quality Policy.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</section>
</section>

<section class="mainflexcontainer">
<section class="mfcr">Operations Procedure.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</section>
</section>

<section class="mainflexcontainer">
<section class="mfcr">Work Instructions.</section>
<section class="mfcl">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..</section>
</section>
</body>
</html>

ArjunKhara

Responsive Web Design (HTML5 and CSS3)

A practical guide to responsive web design

Responsive Web Design (HTML5 and CSS3)

Introduction to Responsive Web Design With HTML5 and CSS3

Build An HTML5 Website With A Responsive Layout

Master Media Queries And Responsive CSS Web Design Like a Chameleon!

17: How to Make a Website Responsive | Learn HTML and CSS | Full Course For Beginners

Introduction To Responsive Web Design - HTML & CSS Tutorial

24 | MAKE A WEBSITE RESPONSIVE FOR ALL DEVICES | 2023 | Learn HTML and CSS Full Course for Beginners

Creative Banner Hover Effects Using CSS & JavaScript | Easy Tutorial for Eye-Catching Designs

5 simple tips to making responsive layouts the easy way

Build a Responsive, Mobile First Website - HTML5 & CSS3

Responsive images using only HTML!

5 Responsive Layouts in 60 seconds

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

Don’t learn web dev this way

MindTap for Minnick’s Responsive Web Design with HTML5 & CSS, 9e

How To Make Website Responsive Using CSS Media Queries | Responsive Web Design Tutorial

How To Make Responsive Website Design Using HTML And CSS Step By Step

Responsive Box Model Web Design - Part 2 - Html5 CSS3 Responsive Design Tutorial Using Media Query

Free Course: Beginner Web Design using HTML5, CSS3 & Visual Studio Code

3 Reasons Why you should use Bootstrap

Complete Responsive Website Using HTML CSS | Responsive web design tutorial

Complete Responsive Website Using HTML CSS | Responsive web design tutorial

Responsive Website Using HTML And CSS Step By Step