Internet Publishing About eBook Gallery P1 2 3 4 5 6 7 8 9
Responsive Layout Headers Columns Assignment Example

Responsive Layout

Responsive Web Design (Continued) will automatically adjust for different screen sizes and viewports.  Refer to EBook Appendix C. Responsive Web Design Technical Considerations.

Headers & Columns

Because our course objectives require learning about responsive web design, we will develop structure using responsive headers and columns.



3
Planning a Successful Website 1
Table of Contents

  Blackboard Login > Course > Activate eBook >
71: C3: Planning a Successful Website: 1 Intro
72: The Website Development Planning Process
73: Step 1: Define the Website’s Purpose & Audience
78: Step 2: Determine the Website’s General Content
90: Step 3: Select the Website’s Structure

4
Planning a Successful Website 2
Table of Contents

  Blackboard Login > Course > Activate eBook >
99: C4: Planning a Successful Website 2 Intro
100: Page Length, Content Placement, & Usability
102: Step 4: Specify the Website’s Navigation System
110: Step 5: Design the Look and Feel of the Website
118: Step 6: Test, Publish, and Maintain the Website
120: Site Plan Checklist

W12 Assignment

See below and Blackboard for details.

A website is often divided into headers, navbar menus, content and a footer and often depends on the target users. We have the responsive navigation menu bar now. Today we develop the header below it and add a responsive two-column structure below our bullet lists. Follow the instructions below:

Responsive Headers

Although content is the reason for visiting, the 'Header' is the first critical structure that attracts attention and should be memorable enough to retain it.  It is a critical point that makes or breaks websites!

  1. In the head section of the CSS Website Layout (Try it Yourself Lesson), select and copy the opening and closing Internal header style tags (with the content inside) and paste it inside of your index file head section, below your closing 'navigation' style tag, but above your closing head tag as shown below:

    Internal CSS Header Language
  2. In the body section of the same lesson, select and copy the opening and closing Header tags (with the content inside) and paste it inside of your index file body section, below your 'navigation' closing javascript tag, but above your Secondary Headings over paragraphs:

    Internal CSS Header Language
  3. In the body section of your index file, cut your main headings and paste them over the lesson content in between the opening and closing header tags as shown above.

Responsive Columns

How the content of a website should be shown, often depends on the device of the users. The most common layouts are:

Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide).

1

1-Column Layout
...often used for mobile browsers.
Background Color: #f2f2f2
Text Color: #000

1

2-Column Layout
...often used for tablets and laptops.
Background Color: #66ccff
Text Color: #000

2

2-Column Layout
...often used for tablets and laptops.
Background Color: #3399cc
Text Color: #fff


1

3-Column Layout
...most often only used for desktops.
Background Color: #66ccff
Text Color: #000

2

3-Column Layout
...most often only used for desktops.
Background Color: #3399cc
Text Color: #fff

3

3-Column Layout
...most often only used for desktops.
Background Color: #006699
Text Color: #fff


1

4-Column Layout
BG: #66ccff
T: #000

2

4-Column Layout
BG: #3399cc
T: #fff

3

4-Column Layout
BG: #006699
T: #fff

4

4-Column Layout
BG: #003a56
T: #fff


1

5-Columns
BG: #f2f2f2
T: #000

2

5-Columns
BG: #66ccff
T: #000

3

5-Columns
BG: #3399cc
T: #000

4

5-Columns
BG: #006699
T: #fff

5

5-Columns
BG: #003a56
T: #fff


  1. In the head section of the Two Responsive Columns (Try it Yourself Lesson), select and copy the opening and closing Internal column 'style' tags (with the content inside) and paste it inside of your index file head section, below your closing 'header' style tag, but above your closing 'head' tag as shown below:

    Internal CSS Header Language
  2. In the body section of the same lesson, select and copy the opening and closing 'div class=row tags' (with the content inside) :

    Responsive Div Class Row Tags
  3. Paste it into the body section of your index file, below your closing 'unordered' < /ul> list tag, but above your Copyright Link as shown below. Update content in each column. You can add appropriate text. If you look at Practice 9, you can see appropriate videos added in a two columsn layout. They are shared using the share > embed feature at the bottom right of Youtube's videos. You can embed social media content by looking for the embed feature in the upper right corners of posts. Next week we learn about responsive imagery. You can add responsive pictures in columns too.

    Responsive Div Class Row Tags Pasted in index.html File
  4. Resize the browser window to see the responsive effect (the columns will stack on top of each other instead of floating next to each other, when the screen is less than 600px wide). See the page example and responsive effect below.

Assignment Examples

Internet Publishing Intro About Purpose

Internet Publishing

Columns & Headers

"Walking on a Dream"

Intro

Replace 'Intro' placeholder text:   A website is often divided into menus, headers, content and a footer for page structure and hierarchy of information which makes content aesthetically pleasing and easier to understand. How you organize content makes all the difference in web design.

About

Replace 'About' placeholder text:   Although content is the reason for visiting, the 'Header' is the first critical structure that attracts attention and should be memorable enough to retain it. It is a critical point that makes or breaks websites!

Purpose

Replace 'Purpose' placeholder text:   Columns are fundamental in web design because they organize the bulk of your content. 1-column is the most common layout and often used for mobile browsers, 2-column is often used for tablets and laptops, and the 3-column layouts are used sparingly and mostly for desktops.

(Chunked Text for Small Devices)

Responsive Columns

Replace placeholer title and text:   Resize the browser window to see the effect! Lorem ipsum dolor sit amet consectetur adipiscing 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.

1

Replace this content with your own. Lorem ipsum dolor sit amet consectetur adipiscing 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.

2

Replace this content with your own. Lorem ipsum dolor sit amet consectetur adipiscing 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.

© 2025 Copyright


Animated Giphy Gif
Animated Giphy Gif
Animated Giphy Gif
Animated Giphy Gif
Animated Giphy Gif
Animated Giphy Gif
Animated Giphy Gif
Animated Giphy Gif