Build a Responsive Page
Home Learning Path LAMP HTML/CSS PHP MySQL JavaScript YouTube Blog PHP Fiddle

Intro to CSS: Responsive a Responsive Page

Quick Copy Boxes














In this lesson, we will build a respnsive web page.
At the bottom of this page there is a code editor pre-loaded with the lesson's code.

Below is all the code used to make the example responsive page.
Below certain code block, you will find an orange information button. Click the EXAMPLE button.

When you click the button, it will display information about the above code block. This may include descriptions or links to the appropriate lessons.
Now, click it again to make the information disappear. Happy Coding, my trusted Coding Cadet!


CSS Code


* {
    box-sizing: border-box;
}
  

* {...;} - The * means we are applying this code to ALL elements.
box-sizing: border-box; - The the height and width of the content will include padding and borders.
For more information on box-sizing visit Responsive CSS


[class*="col-"] {
    float: left;
    padding: 15px;
}

[class*="col-"]/span> - This code applies to all code containing "col-" in the class name - Responsive CSS
float - left - Align & Position
padding - 15px - (CSS Padding)


.row::after {
    content: "";
    clear: both;
    display: table;
}

row::after - Stuff we are putting after a "row" class element's content - Responsive CSS
<ul class = 'myMenu'>
content: ""; - content to insert after - Responsive CSS
clear: both; - Floating elements are not allowed on either side of the element - Align & Position
display: table; - table elements have rows & columns - Responsive CSS, CSS Menus
Basically, we are clearing our rows to make sure no floating elements get in the way. Each row will take the full width of the device's screen. Floating columns ("col-") will be places inside the bounds of the rows.


/***** RESPONSIVE DESIGN CSS*****/

/* For Small Devices*/
[class*="col-"] {
    width: 100%;
}

Here we are defining the width of columns for small devices, like cell phones. (CSS Classes)
[class*="col-"] - all classes containing "col-" (our column classes) - Responsive CSS
width - 100% (of the device's display screen) - Responsive CSS


/* For Large Devices*/
@media only screen and (min-width: 768px) {
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

This code defines our column classes ("col-") for large screen devices - Responsive CSS
@media only screen and (min-width: 768px) Media Query for devices that are at lease 768px wide.
.col-1 {width: 8.33%;} - "col-1" width is 8.33% (1/12) the total screen width
.col-2 {width: 16.66%;} - "col-2" width is 16.66% (2/12) the total screen width
.col-3 {width: 25%;} - "col-3" width is 25% (3/12) the total screen width
.col-4 {width: 33.33%;} - "col-4" width is 33.33% (4/12) the total screen width
.col-5 {width: 41.66%;} - "col-5" width is 41.66% (5/12) the total screen width
.col-6 {width: 50%;} - "col-6" width is 50% (6/12) the total screen width
.col-7 {width: 58.33%;} - "col-7" width is 58.33% (7/12) the total screen width
.col-8 {width: 66.66%;} - "col-8" width is 66.66% (8/12) the total screen width
.col-9 {width: 75%;} - "col-9" width is 75% (9/12) the total screen width
.col-10 {width: 83.33%;} - "col-10" width is 83.33% (10/12) the total screen width
.col-11 {width: 91.66%;} - "col-11" width is 91.66% (11/12) the total screen width
.col-12 {width: 100%;} - "col-12" width is 100% (12/12) the total screen width


/***** HEADER CSS: top menu, logo, page heading*****/

/* Container for Page Header*/
.topContainer{
  width: 97%;
  margin-left: 1.5%;
  background-color: #050937;
  box-shadow: 4px 4px 2.5px black;
  border-radius: 9px;
}

.topContainer - Container for our page Header (will contain top menu, logo and page heading)
width: 97%; - Will take up 97% of the screen width
margin-left: 1.5%; - CSS margins
background-color: #050937; - CSS Colors
box-shadow: 4px 4px 2.5px black; - CSS Box-shaddowing
border-radius: 9px; - CSS Border Radius


/* Page Heading*/
.headline{
  display: inline-block;
  color: #FFECD8;
  float: right;
}

Container for our page heading:
Related lessons: Align & Position, CSS Colors, Menus


/*Top Menu*/
.topMenu {
  overflow: hidden;
  background-color: #820808;
  border-radius: 9px;
}

Related lessons: Related lessons: CSS Menus, CSS Colors, Border Radius


/* Links in the Top Menu*/
.topMenu a {
  float: left;
  display: block;
  color: #E7F0D8;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* On mouse hover: unvisited links*/
.topMenu a:hover {
  background-color: blue;
  color: lightyellow;
}

/* On mouse hover: visited links*/
.topMenu a:visited:hover {
  background-color: blue;
  color: lightyellow;
}

Related Lessons: CSS Links, CSS Colors


/* Header image*/
img.topImage {
  max-width: 150px;
  float: left;
}

/******* PAGE BODY********/
body {
  background-color: #F0D2CB;
  color: #02052A;
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
}

Related Leddons: CSS Colors, CSS Fonts, HTML Body


/* Link inside paragraphs*/
p a {
color: red;
}

Related Lesson: CSS Links, HTML paragraphs


/* Labels*/
.myLable {
  color: #050937;
  font-size: 26px;
  font-weight:800;
}

.redLable {
  color: darkred;
  font-size: 26px;
  font-weight: 800;
}

Related lessons: CSS Colors, CSS Fonts


   /* side logos*/
   img.side {
     display: inline-block;
     width: 80%;
     float: center;
   }
   

/* Bordered Container*/
div.bordered {
  font-size: 18px;
  font-weight: bold;
  color: #09326B;
  background-color: white;
  border-style: solid;
  border-color: #09326B;
  border-width: 4px;
  padding: 10px;

}
      

 /******* SIDE NAVIGATION******/

 /* unordered list: "sideMenu"*/
 ul.sideMenu {
   list-style-type: none;
   padding-top:20px;
   padding-bottom: 20px;
 }

 /* links in "sideMenu" unordered lists*/
 ul.sideMenu a {
   display:block;
   width = 70%;
   border-style: solid;
   border-width: 1px;
   border-color: red;
   padding: 5px;
   font-size: 20px;
   background-color: #050937;
   color: white;
   border-radius: 18px;
   text-decoration: none;
   padding: 5px;
   margin: 5px;
   text-align: center;
 }

 /* on hover: links in ul class = "sideMenu"*/
 ul.sideMenu a:hover {
   background-color: red;
 }
         

List and Menu Lessons: CSS links, CSS Menus, CSS Lists


/****** FORM CONTAINER*****/
form.signUp {
  border-style: double;
  border-color: #050937;
  border-width: 1px;
  color: #050937;
  padding-left: 15px;
  padding-bottom: 15px;
}

Related lessons: HTML Forms

HTML Code

<!DOCTYPE html>
<html lang="en-us">
  <head>
     <!-- Meta Viewport-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- CSS Stylesheet -->
     <link rel="stylesheet" type="text/css" href="responsive.css">
     <!-- Font Awesome Stylesheet: Social Media (and other) icons: http://fontawesome.io/ -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
     <!-- Page Title-->
     <title>Coding Commanders</title>
  </head>

"viewport" meta tag - Important for responsive design - Meta tags: Viewport
CSS Stylesheet - Link to the file containing the CSS code for our page - Links & Filepath
fontawesome stylesheet - Link to include fontawesome icons - CSS Menus
Page Title - Title Tag
You may also find these lessons helpful:
Head Tags
Meta Tags


  <body>
     <!--- HEADER------------------------>
     <div class = 'topContainer'>
       <!-- Top Menu-->
       <div class = 'topMenu'>
         <a  href = 'https://www.youtube.com/channel/UC-gCUMK_EGUqJ7P9VA7BJmQ' class='fa fa-youtube'> YouTube</a>
         <a href='https://www.facebook.com/codingcommanders/' class='fa fa-facebook'> Facebook</a>
         <a href='https://www.instagram.com/codingcommanders' class='fa fa-instagram'> Instagram</a>
         <a href='https://twitter.com/codingCommander' class = 'fa fa-twitter'> Twitter</a>
         <a href='https://plus.google.com/102944579677628755090' class='fa fa-google'> Google+</a>
         <a href='https://github.com/codingCommanders/' class='fa fa-github'> Github</a>
         <a href = "photoGallery.php" class="fa fa-camera" aria-hidden="true"> Photos</a>
       </div>
       <div class = 'row'>
         <div class = 'col-4'>
            <!-- Logo-->
            <img class = "topImage" src = 'usaLogo.png'>
         </div>
         <div class = 'col-6'>
             <!-- Heading-->
             <div class = 'headline'>
                <h1>Coding Commanders:  Annihilating Bugs</h1>
                <strong><i>One line of code at a time...</i></strong>
            </div>
        </div>
      </div>
     <br><br>
    </div>

Header - Includes: top menu, logo and page heading
Top Menu - Menus, CSS Links, HTML Links, Links & Filepath
Logo Image - HTML Media
Page Heading - HTML Headings, HTML Font Styles


     <!--- MAIN CONTENT------------------------>
     <!-- Row 1-->
     <div class = "row">
       <p align = "center">Coding Commanders uses web development to fight the alien-bug invasions.  We believe Earth should, once again,
       belong to the humans.  Join the fight!  The Human Resistance is currently recruiting Coding Cadets.</p>
   </div>
 

class = "row" - This is the first row of our main content. It will take up 100% of the screen's width. There are no columns in this row. - Responsive CSS,
paragraph This is the content inside row 1 - HTML paragraphs


    <!-- Row 2-->
    <div class = "row">
      <!-- Column 1, takes up 3/12 horizontal space-->
      <div class = "col-3">
        <img class = "side" src = "Logo2.png">
      </div>
      <!-- Column 2, takes up 6/12 horizontal space-->
      <div class = "col-6">
        <div class = "bordered">
          <label class = "myLable">Coding Cadet Benefits</label><br>
          <ol>
             <li>You will learn full stack web development.</li>
             <li>It's fun!  Writing code is like playing a strategy game or solving a puzzles.</li>
             <li>You will be a hero.  Humanity wants Earth back and the Bugs gone.  By joining Coding Commanders you will be a hero.</li>
             <li>You get to help people.</li>
             <li>You get to annihilate bugs!</li>
          </ol>
          <p align = "center">Together we can debug Earth!</p>
        </div>
      </div>
     <div class = "col-3">
      <img class = "side" src = "fullLogo.png">
    </div>
  </div>

class = "row" - 2nd Row of our Main content area.
class = "col-3" - 1st Column in this row - 33.33% screen width
class = "col-6" - 2nd Column in this row - 50% screen width
class = "col-3" - 3st Column in this row - 33.33% screen width
Related Lessons: HTML Lists, CSS Lists, HTML Media, Responsive CSS


     <!-- Row 3-->
        <div class = "row">
         <!-- Side Menu: Column 1, takes up 3/12 horizontal space-->
         <div class = "col-3">
           <ul class = "sideMenu">
             <label class = "redLable"> Try HTML</label>
             <li><a href="htmlL/element.php">What is an element? </a> </li>
             <li><a href="htmlL/heading.php">Headings</a> </li>
             <li><a href="htmlL/links.php">Links</a> </li>
             <li><a href="htmlL/media.php">Media</a> </li>
             <li><a href="htmlL/paragraphs.php">Paragraph</a> </li>
             <li><a href="htmlL/span.php">Span</a> </li>
             <li><a href="htmlL/list.php">List</a> </li>
           </ul>

           <ul class = "sideMenu">
             <label class = "redLable"> Try CSS</label>
             <li><a href="cssL/css.php">What is CSS?</a> </li>
             <li><a href="cssL/colors.php">Colors</a> </li>
             <li><a href="cssL/font.php">Font</a> </li>
             <li><a href="cssL/list.php">Lists</a> </li>
             <li><a href="cssL/border.php">Border</a> </li>
           </ul>

           <ul class = "sideMenu">
             <label class = "redLable"> Try PHP</label>
             <li><a href="phpL/datatypesM.php">Data Types</a> </li>
             <li><a href="phpL/echoM.php">Echo</a> </li>
             <li><a href="phpL/mathOperators.php">Math Operator</a> </li>
             <li><a href="phpL/stringOperators.php">String Operator</a> </li>i>
           </ul>
       </div>

class = "col-3" - 33.33% screen width - contains side menu
"class = "sideMenu" (1st) - 1st Side Menu group - HTML Links
"class = "sideMenu" (2nd) - 2st Side Menu group - CSS Links
"class = "sideMenu" (3rd) - 3st Side Menu group - PHP Links
*Note: sideMenu is a class we made in the CSS. The side Menu is made up of HTML lists that contain navigation links
Related Lessons: Menus, HTML Links, CSS Links, HTML Lists, CSS Lists, Links & Filepath, Responsive CSS


        <!-- Column 2, takes up 6/12 horizontal space-->
        <div class = "col-6">
           <!-- Sign up Form-->
           <form class = "signUp" method = 'post' action = 'signUp.php'>
             <!-- Heading-->
             <h1>The Human Resistance Sign Up<</h1>
             <!-- Text imput fields-->
             <h4>First Name</h4>
             <input type= "text" name= "firstName" placeholder= "First Name" required><br>
             <h4>Last Name</h4>
             <input type="text" name= "lastName" placeholder= "Last Name" ><br>
             <h4>Email</h4>
             <input type= "email" name= "userEmail" placeholder= "youremail@email.com" required><br>
             <!-- Select-->
             <h4>Which volunteer squad will you be joining?</h4>
             <select name = "squad" >
               <option></option>
               <option for = "squad" value = "4">Infintry</option>
               <option for = "squad" value = "3">Child Protection</option>
               <option for = "squad" value = "2">Domestic</option>
               <option for = "squad" value = "1">Research</option>
             </select>
             <br>
             <!-- Radio buttons-->
               <h4>How many Bugs have you annihilated?</h4>
                 <input type = "radio" name = "exp" value = "1">None<br>
                 <input type = "radio" name = "exp" value = "2">Less than 10<br>
                 <input type = "radio" name = "exp" value = "3">Less than 100<br>
                 <input type = "radio" name = "exp" value = "4">Over 100<br>
               <br>
               <!-- Submit Button-->
               <input type="submit" value="Submit">
           </form>
         </div>

class = "col-6" - 2nd Column in Row 3 contains our Signup Form - 50% screen width
<form> - Our form contains text input, selects, radio buttons and a submit button
text input - first name, last name and email
selects - Which volunteer squad will you be joining?
radios - How many Bugs have you annihilated?
Submit Button - Submits the form, runs PHP script included in form tag
*Note: We will learn to write the PHP for the form (to make it work) in the PHP tutorials
Related Lessons: HTML Forms, Text Input, Selects, Radios, Buttons


       <!-- Column 3, 3/12 horizontal space-->
       <div class = "col-3">
           <br><br><br>
           <div class = "bordered">
             Save our children!<br>
             Save humanity!<br>
             Save Earth!<br>
           </div>
           <br><br><br>
           <div class = "bordered">
             <h3>Let's debug!</h3>
           </div>
           <br><br><br>
           <div class = "bordered">
             <h3>Let's debug!</h3>
           </div>
      </div>
      
       
       

class = "col-3" - 3nd Column in Row 3 - 33.33% screen width

</div> </body> </html>

Now take a look at the page we just build: Example Responsive Page. Playwith changing the size of the window and observe how the page is viewed.

Color Selector



Hex:


RBG:

Applied Project

Finish the Ad Project. Make all the pages responsive.
Part I: Explained on the bottom of CSS Color Lesson.
AND
Part II: Explained on the bottom of CSS Links Lesson.

Play with the code in the code editor below.