Web Design I

Class 07: Responsive Web Design

Topics

Responsive Web Design
Bootstrap
Color Theory
Week 07 Responsive Site (homepage layout) Lab

Cone… Jon Cone.

Slide01

Slide02

Slide03

Slide04

Slide05

Slide06

Slide07

Slide08

Resolution:

Your webpages will be viewed on a variety of platforms:

Iphone: 960 x 640
Ipad: 1024 x 768
Macbook: 1280 x 800
Imac: 2560 x1440
Typical Standard:
- Width: 960-1000
- Height: 570-600

Besides resolution, a webpage is viewed at different orientations/aspect ratios.

Layout Types:

Fixed: is exactly certain dimensions
Liquid: is proportionally “stretched” to fit
Responsive: shifts elements based on current users device
Adaptive: responds to device and sends specific layout

difficulty

Fixed Width Layout:

Your page does not expand or contract based on the browser window.

Advantages:
- Accurate since you use specific pixel values.
- Greater control over exactly how the page appears.
- More control of the actual text, no orphans.
- Images will not be distorted.
Disadvantages:
- You may end up with gaps or hidden edges.
- Text may be hard to read if screen is high resolution.
- Usually takes up more vertical space.

body {

width:960px;}

browser view

Fixed Width Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sodales volutpat. Vestibulum condimentum ex lectus, a posuere dui lobortis nec. Morbi nec scelerisque orci, ac vehicula nunc. Morbi non tempus turpis. Sed eros dui, rutrum eget dui vitae, tincidunt interdum ante. Duis eros tellus, aliquet ut neque quis, venenatis congue dui. Suspendisse potenti. Ut porta tempus imperdiet. In sit amet felis est.

Praesent iaculis scelerisque fermentum. Nulla ligula lectus, ultricies nec dignissim vitae, consectetur ac magna. Sed imperdiet dui eros, et gravida sapien congue sed. Pellentesque odio risus, posuere non orci eu, dapibus tincidunt purus. Pellentesque viverra libero vitae lobortis aliquam. Pellentesque vulputate commodo congue. Mauris sagittis lorem sed elit blandit, in commodo nibh blandit. Integer id tellus ex. Quisque vitae massa nec odio efficitur venenatis. Vestibulum urna est, luctus nec diam sit amet, efficitur tempus sapien. Duis a laoreet leo.

Aenean non quam mollis, consequat erat in, convallis risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam et metus ut turpis consequat pellentesque quis et massa. Curabitur id blandit risus. Aliquam at tortor arcu. Cras lectus sem, euismod nec elementum nec, rhoncus vitae nibh. Nam non ipsum et sem venenatis condimentum a ut nisl. Nulla ut nibh ullamcorper, accumsan orci in, lobortis sapien. Sed dignissim viverra blandit. Nunc nec egestas erat. Praesent rutrum blandit arcu, a efficitur arcu pharetra in. Sed condimentum orci id tortor lobortis scelerisque. Donec convallis ligula felis, et fringilla augue dignissim at. Nam et mattis odio, at posuere purus. Suspendisse elementum iaculis elit, a varius sem sodales ornare. Aliquam in faucibus nibh, sed pretium arcu.

Liquid Layout:

Your page scales to the browser window.

Advantages:
- Pages fill the screen.
- Works with both large and small screens.
- Tolerates user adjustments.
Disadvantages:
- If you are not careful the page can vary considerably from what you intended.
- Lines of text can be overly long or short based on window dimensions.
- Other weird things may happen.

body {

width:100%;}

browser view

Liquid Layout Example

Responsive Layout:

Your page scales and stacks to the browser window.

Advantages:
- Pages fill any aspect ratio (resolution & orientation).
- Very mobile friendly (often called mobile first design).
- More control of design at different scales.
- Industry standard (support & advantage).
Disadvantages:
- More complicated to code.
- Generally requires more outside code (bootstrap, wordpress, etc.).

p {

display:inline-block;}

browser view

Responsive Layout Example

Bootstrap

Bootstrap:

Bootstrap is the most popular solution for developing responsive, mobile-first web sites.

Responsive Web Design is aimed at producing a grid based layout that adapts to the proportions of the user’s screen.
Elements:
- Fluid Grid (column/rows with percentages)
- Flexible Images (%)
- Adjustable Text (em)
- Media Queries (detect device)
Mobile First is the idea of developing a website with consideration towards mobile devices first.

The official website may be found here.

Attaching Bootstrap:

You have three options for incorporating Bootstrap into your site:

You can download the Bootstrap files and host them yourself.
You can use a CDN (Content Delivery Network) and link Bootstrap that way.
- User has more than likely already cached the files.
- Stays updated.
You can use Dreamweaver to create a template for you

Cone in Boots

<!–boostrap CDN example–>

<head>

<!–place before other attached stylesheets–>

</head>

<body>

<!–place at the end of the page–>

</body>

Container Class:

Groups all elements into the grid
Two flavors:
- container: fixed-width
- container-fluid: liquid
Examples:
- container example
- container-fluid example

Columns

Groups elements into blocks in a grid system
Rows describe each horizontal line
One or more columns are created in each row
Based on size of window:
- col-sm-6 (768 px)
- col-md-6 (992 px)
- col-lg-6 (1200 px)
Example:
- bootstrap columns

browser view

My First Bootstrap Page

This is some text.

<h1>My First Bootstrap Page</h1>

</div>

</div>

</div>

</div>

Components

Bootstrap comes with tons of predefined elements that you can insert into your site.
Here are some:
- Jumbotron
- Carousel
- Navbar
- Dropdown
- Button
- Badge
- etc.
Example:
- bootstrap components

Defaults

Bootstrap has predefined defaults for elements like text, images, etc.
Example:
- bootstrap defaults

Dreamweaver

Dreamweaver allows you to insert Bootstrap components directly through its panels.

Color Theory

Color Theory:

Color theory is the knowledge, effects, and practical guidelines of the use of color in art. Color has huge psychological implications in a composition.

Primary Colors: These are the colors that cannot be made by mixing other colors. In painting we use Red, Yellow, Blue. In print we use Cyan, Magenta, Yellow, Keyplate (black). In digital displays (computers, tv’s, etc.) we use Red, Green, Blue.
Secondary Colors: These are the colors mixed when you combine the primary colors with each other. Traditionally we think of Green, Orange, and Purple.
Tertiary Colors: These are the colors produced when a secondary and primary color are mixed. You described them by combining the primary color then the secondary, for example Blue-green, not Green-blue.

Color Schemes:

No matter what you are working on you should incorporate a color scheme.

Monochromatic Color
A single color with tints and shades (light to dark).

Complimentary Color
The use of opposite colors on the color wheel. These will “pop.”

Analogous Color
A collection of alike colors, those near each other in the color wheel.

Achromatic Color
Simply black to white.

Split-Complimentary Color
The utilization of one color with two colors of the opposite. Similar to complimentary but more harmonious.

Triadic Color
The contains three colors from opposite ends. This tends to be the least unified and is not generally suggested.

Color Palette:

Once you have decided on the prominent color, and color scheme, you want to produce a color pallete. This is basically a selected three to four colors you will use throughout your site.

Picking Colors:

I am very poor at color design. You may be as well. Luckily for us there are tools to help us choose. The links to the right can help you pick your color pallet.

Resources:

Here are some resources that help you produce a color palette.

Adobe Color CC: Adobe Color CC
Color Blender: Color Blender
Color Calculator: Color Calculator

This video has some good information about color design

Here is a “fun” color game you may try if you like

Week 07 Responsive Site (homepage layout) Lab

Responsive Site (homepage layout) Lab

In this lab we will produce a rough layout of the homepage. Using the wireframe mockup as a guide a Bootstrap framework will be produced. Basic Bootstrap components, such as a slider and/or navbar, will be included as well.

You will be graded on the following:

Basic Document & File Structure:
- Master folder created with correct sub folders.
- All files named and placed correctly.
- Basic HTML and CSS structure produced.
Bootstrap Layout:
- Bootstrap files placed correctly in the folder structure.
- Bootstrap linked correctly to the HTML document.
- The grid is produced similar to the mockup wireframe.
Bootstrap Components:
- Navbar, Slider, Jumbotron, etc. implemented successfully.
Content:
- Placeholder text is applied.
- Placeholder images are implemented.

Resources:

Assignment Video Tutorials: You may watch any of the videos from the previous labs
Assignment Lab Materials: You may download the lab materials here: N/A

Assignment Tutorials

This tutorial will guide you through lab. You may download the lab materials used: N/A.

Lab Introduction

Responsive Site (homepage layout) Lab

Introduction

Using the mockup wireframe image we created in the last lab we will create an actual web document utilizing Bootstrap. Bootstrap is a responsive framework that we will use in order to create a flexible grid that will work on both desktop and mobile devices. This can get a little tricky so do your best to follow the code exactly.
Click on the > to start

There are no lab materials necessary to complete this week's lab.

Bootstrap CDN

Bootstrap CDN (content delivery network)

Responsive Site (homepage layout) Lab

HTML Code


<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout Lab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Instructions

Before Bootstrap can be used it must be connected. It may be downloaded and inserted into your file/folder structure but you may also just connect it to an online host. This makes sure it is up to date and makes the page quicker to load.
Visit GetBootstrap.com to locate the code you need to insert.
Copy and paste the CSS code link from the site and paste in the <head>.
Copy and paste the JavaScript code link from the site and paste at the bottom of the HTML document before the closing </body>.
You must enter:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
In the <head> of the document for the responsive elements to work correctly.
Bootstrap is now connected and ready to use.

Cone Delivery Network

Rows and Columns

Responsive Site (homepage layout) Lab

HTML Code


<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout Lab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  
<style>
  .wireBlock {
      background-color: gray;
      border-color: darkgray;
      border-style: solid;
      border-width:2px;}
</style>

</head>
<body>
<div class="container">
  
  <div class="row">
    <div class="col-12 wireBlock">
      <h3>navbar</h3>
    </div>
  </div>
  
  <div class="row">
    <div class="offset-2 col-8 wireBlock">
      <h3>carousel</h3>
    </div>    
  </div>
  
  <div class="row">
    <div class="col-3 wireBlock">
      <h3>item 01</h3>
    </div>
    <div class="col-3 wireBlock">
      <h3>item 02</h3>
    </div> 
    <div class="col-3 wireBlock">
      <h3>item 03</h3>
    </div> 
    <div class="col-3 wireBlock">
      <h3>item 04</h3>
    </div> 
  </div>
  
  <div class="row">
    <div class="col-6 wireBlock">
      <h3>paragraph 01</h3>
    </div>
    <div class="col-6 wireBlock">
      <h3>paragraph 02</h3>
    </div>  
  </div>
  
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Instructions

The next step is to create our grid using Bootstrap's row and column classes.
First you must create a div with the container class like:
<div class="container">
</div">
All of the Bootstrap component must be placed inside these.
Each row must be written as:
<div class="row">
</div>
Inside each row you create divs to contain your content. These div's are given column width classes with the total in a row equaling 12. For example:
   <div class="row">
      <div class="col-6">
         
      </div>
      <div class="col-6">
         
      </div>
   </div>
It is hard to see what your wireframe looks like since the final content is not applied. You can apply some CSS while you work just so you can see what you are doing. Inside the <head> add:
   <style>
      .wireBlock {
         background-color: gray;
         border-color: darkgray;
         border-style: solid;
         border-width:2px;}
   </style>

Column Breakpoints

Responsive Site (homepage layout) Lab

HTML Code


<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout Lab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  
<style>
  .wireBlock {
      background-color: gray;
      border-color: darkgray;
      border-style: solid;
      border-width:2px;}
</style>

</head>
<body>
<div class="container">
  
  <div class="row">
    <div class="col-sm-12 wireBlock">
      <h3>navbar</h3>
    </div>
  </div>
  
  <div class="row">
    <div class="offset-lg-2 col-lg-8 wireBlock">
      <h3>carousel</h3>
    </div>    
  </div>
  
  <div class="row">
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>item 01</h3>
    </div>
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>item 02</h3>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>item 03</h3>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>item 04</h3>
    </div> 
  </div>
  
  <div class="row">
    <div class="col-md-6 wireBlock">
      <h3>paragraph 01</h3>
    </div>
    <div class="col-md-6 wireBlock">
      <h3>paragraph 02</h3>
    </div>  
  </div>
  
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Instructions

Currently the layout is complete by not very dynamic. One of the strengths of Bootstrap is that is allows us to decide how each section is viewed based on the size of the browser window.
The column breakpoints are: xs:0, sm:576px, md:768px, lg:992px, xl:1200px, xxl:1400px. You can decide how many columns a div section is by adding multiple classes for sizes. For example:
   <div class="col-sm-6 col-lg-3">
      
   </div>
This will span 6 columns (half the screen) when browser width is small and 3 columns (quarter of the screen) when the width is large.
You should create column-width classes like the example below-left.

Column Breakpoint across devices example

Preview Your Progress

Responsive Site (homepage layout) Lab

Instructions

You may have probably noticed that you can preview your site as you are working on it in Liveweave. This is one of the advantages of a browser based web text editor.
The interface in Liveweave can be manipulated by dragging the borders of the panelss or expanding a section by click on the maximize bottom at the bottom right of each panel. Try expanding the preview panel to see what you have thus far.
It should look something like below.

Browser

Homepage Layout Lab

navbar

carousel

item 01

item 02

item 03

item 04

paragraph 01

paragraph 02

Placeholder Text

Responsive Site (homepage layout) Lab

HTML Code


<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout Lab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  
<style>
  .wireBlock {
      background-color: gray;
      border-color: darkgray;
      border-style: solid;
      border-width:2px;
  border-collapse: collapse;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.}
</style>

</head>
<body>
<div class="container">
  
  <div class="row">
    <div class="col-sm-12 wireBlock">
      <h3>navbar</h3>
    </div>
  </div>
  
  <div class="row">
    <div class="offset-lg-2 col-lg-8 wireBlock">
      <h3>carousel</h3>
    </div>    
  </div>
  
  <div class="row">
    <div class="col-sm-6 col-lg-3 wireBlock">
       <h3>Cone Heads</h3>
    </div>
    <div class="col-sm-6 col-lg-3 wireBlock">
       <h3>Ice Cream Cones</h3>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
       <h3>Pine Cones</h3>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
       <h3>Maintenance Cones</h3>
    </div> 
  </div>
  
  <div class="row">
    <div class="col-md-6 wireBlock">
       <h3>Hello There!</h3>
      <p>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.</p>
    </div>
    <div class="col-md-6 wireBlock">
       <h3>News</h3>
      <p>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.</p>
    </div>  
  </div>
  
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Instructions

The general layout is complete now it just needs dummy content. For the text we will use lorem ipsum again. You may visit lipsum.com to generate lorem ipsum and copy the paragraphs or you can do it in Liveweave like below.
Enter the opening and closing <p> & </p> tags. Place your cursor inside the tags and, in Liveweave, press Tools>Placeholder>Insert "Lorem ipsum..." at cursor location. This should be completed in the two paragraph sections at the bottom of the page.
Create the appropriate headings for the sections as well.

Placeholder Images

Responsive Site (homepage layout) Lab

HTML Code


<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout Lab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  
<style>
  .wireBlock {
      background-color: gray;
      border-color: darkgray;
      border-style: solid;
    border-width:2px;}
  .rowImagesFix img {
    height: 250px;}
  
</style>

</head>
<body>
<div class="container">
  
  <div class="row">
    <div class="col-sm-12 wireBlock">
      <h3>navbar</h3>
    </div>
  </div>
  
  <div class="row">
    <div class="offset-lg-2 col-lg-8 wireBlock">
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneLandscape.jpg" class="img-fluid"/>
    </div>    
  </div>
  
  <div class="row rowImagesFix">
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Cone Heads</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneHat.png" class="img-fluid"/>
    </div>
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Ice Cream Cones</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneIceCream.png" class="img-fluid"/>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Pine Cones</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/conePine.jpg" class="img-fluid"/>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Maintenance Cones</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneFloorSign.jpg" class="img-fluid"/>
    </div> 
  </div>
  
  <div class="row">
    <div class="col-md-6 wireBlock">
      <h3>Hello There!</h3>
      <p>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.</p>
    </div>
    <div class="col-md-6 wireBlock">
      <h3>News</h3>
      <p>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.</p>
    </div>  
  </div>
  
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Instructions

In Liveweave we must connect images that are on the internet and can be connected with an absolute URL.
I uploaded the images needed on my site. Right-click on the images (bottom left) and select Copy Image Location or whatever your browser says to copy the image path.
Enter the appropriate code using the path copied from this slide.
The img-fluid class should also be applied to stretch the image to scale according to the scale of the encapsulating div. For example:
<img src="https://teachmecone.com/wp-content/uploads/2021/02/coneLandscape.jpg" class="img-fluid"/>
The placeholder images are all different sizes and will result in odd formatting. You should scale each to the same proportions in the source photos but in this case we will just cheat it for now but scaling the row with CSS. You should add a class to target the row such as rowImagesFix. The following should be added to the CSS in the heading:
.rowImagesFix img {
height: 250px;}

Images Used

Bootstrap Components

Responsive Site (homepage layout) Lab

HTML Code


<!DOCTYPE html>
<html>
<head>
<title>Homepage Layout Lab</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
  
<style>
  .wireBlock {
      background-color: gray;
      border-color: darkgray;
      border-style: solid;
    border-width:2px;}
  .rowImagesFix img {
    height: 250px;}
  
</style>

</head>
<body>
<div class="container">
  
  <div class="row">
    <div class="col-sm-12 wireBlock">
      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
          <a class="navbar-brand" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
              </li>
              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown link
                </a>
                <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                  <li><a class="dropdown-item" href="#">Action</a></li>
                  <li><a class="dropdown-item" href="#">Another action</a></li>
                  <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </div>
  
  <div class="row">
    <div class="offset-lg-2 col-lg-8 wireBlock">      
      <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneLandscape.jpg" class="img-fluid"/>
            <div class="carousel-caption d-none d-md-block">
              <h5>First slide label</h5>
              <p>Some representative placeholder content for the first slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneLandscape.jpg" class="img-fluid"/>
            <div class="carousel-caption d-none d-md-block">
              <h5>Second slide label</h5>
              <p>Some representative placeholder content for the second slide.</p>
            </div>
          </div>
          <div class="carousel-item">
            <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneLandscape.jpg" class="img-fluid"/>
            <div class="carousel-caption d-none d-md-block">
              <h5>Third slide label</h5>
              <p>Some representative placeholder content for the third slide.</p>
            </div>
          </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"  data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"  data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>      
    </div>    
  </div>
  
  <div class="row rowImagesFix">
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Cone Heads</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneHat.png" class="img-fluid"/>
    </div>
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Ice Cream Cones</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneIceCream.png" class="img-fluid"/>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Pine Cones</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/conePine.jpg" class="img-fluid"/>
    </div> 
    <div class="col-sm-6 col-lg-3 wireBlock">
      <h3>Maintenance Cones</h3>
      <img src="https://teachmecone.com/wp-content/uploads/2021/02/coneFloorSign.jpg" class="img-fluid"/>
    </div> 
  </div>
  
  <div class="row">
    <div class="col-md-6 wireBlock">
      <h3>Hello There!</h3>
      <p>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.</p>
    </div>
    <div class="col-md-6 wireBlock">
      <h3>News</h3>
      <p>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.</p>
    </div>  
  </div>
  
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>
</html>

Instructions

Bootstrap has built-in components. These range from carousels to jumbotrons and add functionality that would be difficult to code manually. We will add a navbar and carousel.
First let's add a navbar. Visit Bootstrap Navbar. Scroll to find a navbar to copy. Remove the <h3>navbar</h3> and paste the copied navbar from Bootstrap.
Now let's insert a carousel. Again visit Bootstrap Carousel and copy a carousel. Remove the large center image and paste the copied carousel from Bootstrap.
The images of the carousel are currently empty. Replace them with the image that was in that section before. There are captions and other options but that is good enough for now.

Carousel Images Used

Final Review and Submission

Responsive Site (homepage layout) Lab

Instructions

Before you submit you should review your code and visual preview.
Look for any errors. If there are any, fix them. When you are happy, proceed .
In Liveweave click on Download (top center of window). This is the entire site zipped that you can just submit to Blackboard.
Lastly, log into Blackboard (Here) and click on this course. Inside the course, select Week 07, then the Week 07: Responsive Site (homepage layout) Lab folder, then the assignment with the same name. Finally, Attach the zipped file.

Browser

Homepage Layout Lab

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

Cone Heads

Ice Cream Cones

Pine Cones

Maintenance Cones

Hello There!

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.

News

Lab Synopsis

Reflection

Bootstrap can be a little confusing but the basic principles are actually straightforward once you get a grasp of it. If you are struggling with it you will find documentation and examples on the GetBootstrap site. There are more options on there that you can explore as well. Feel free to explore.

If you run into any issues please do not hesitate to contact me:

jcone@cecil.edu
(240) 466-1996

Wait! Before you go!

Did you remember to?

Read through this webpage
Watch the videos
Submit the Week 07 Responsive Site (homepage layout) Lab on Blackboard

Web Design I

Topics

Responsive Web Design

Resolution:

Layout Types:

difficulty

Fixed Width Layout:

browser view

Fixed Width Example

Liquid Layout:

browser view

Liquid Layout Example

Responsive Layout:

browser view

Responsive Layout Example

Bootstrap

Bootstrap:

Attaching Bootstrap:

Container Class:

Columns

browser view

My First Bootstrap Page

Components

Defaults

Dreamweaver

Color Theory

Color Theory:

Color Schemes:

Monochromatic ColorA single color with tints and shades (light to dark).

Complimentary ColorThe use of opposite colors on the color wheel. These will “pop.”

Analogous ColorA collection of alike colors, those near each other in the color wheel.

Achromatic Color Simply black to white.

Split-Complimentary ColorThe utilization of one color with two colors of the opposite. Similar to complimentary but more harmonious.

Triadic ColorThe contains three colors from opposite ends. This tends to be the least unified and is not generally suggested.

Color Palette:

Picking Colors:

Resources:

This video has some good information about color design

Here is a “fun” color game you may try if you like

Week 07 Responsive Site (homepage layout) Lab

Responsive Site (homepage layout) Lab

You will be graded on the following:

Resources:

Assignment Tutorials

Homepage Layout Lab

navbar

carousel

item 01

item 02

item 03

item 04

paragraph 01

paragraph 02

Homepage Layout Lab

First slide label

Second slide label

Third slide label

Cone Heads

Ice Cream Cones

Pine Cones

Maintenance Cones

Hello There!

News

Wait! Before you go!

Did you remember to?

Monochromatic Color
A single color with tints and shades (light to dark).

Complimentary Color
The use of opposite colors on the color wheel. These will “pop.”

Analogous Color
A collection of alike colors, those near each other in the color wheel.

Achromatic Color
Simply black to white.

Split-Complimentary Color
The utilization of one color with two colors of the opposite. Similar to complimentary but more harmonious.

Triadic Color
The contains three colors from opposite ends. This tends to be the least unified and is not generally suggested.