How to Create a Responsive Website Header - Part 5

Web Development Post by Christopher Spicer
Responsive Website Header

This article, which is part 5 of a 5-part series of web development tutorials, will guide you through the process of creating a website header with primary and secondary navigation menus that expand and collapse as needed. We'll use HTML, CSS, and JavaScript to construct an icon bar. In this example, we’ll examine a complete web page demonstration before taking a detailed look at the concepts and code that bring it to life.

This article builds upon topics discussed in How to Create a Responsive Website Layout.

In this article we'll use our standard HTML document structure and CSS naming convention.

Skip Ahead

Looking for something specific? Select a topic in this article to read more:

Icon Bar

In this example, we'll build upon our standard multiple-line top header design to include an icon bar that is used to expand and collapse navigation menu content as needed:

See Demo

An icon bar provides a navigation interface that is well-suited for mobile devices with small touch screens (like phones and tablets). It presents visitors with a row of icon-based buttons that can be used to expand and collapse navigation content as needed. This creates a compact design that allows much of the main content area to be shown above the scroll.

On small screens, the icon bar is shown and the navigation content is collapsed. When a visitor selects a button on the icon bar, the dropdown section expands to show the corresponding content. When a visitor deselects a button on the icon bar, the dropdown section collapses.

On medium and large screens, the icon bar is hidden and navigation content is shown in a multiple-line navigation layout.

In this example, our navigation content includes a site menu, a search bar, and a social media share bar.

Header Structure and Style

The construction of the header is similar to our standard multiple-line top header design. But we add:

  • CSS to create a grid layout

Let's start with the HTML used to create the header for our icon bar design:

HTML

<!-- Header --> <header> <!-- Title --> <div id="title"> ... </div> <!-- Navigation --> <nav> ... </nav> </header>

First we create our header using the <header> element.

The first section inside our header contains the title bar for our website. We create this section using the <div> element and assign it:

  • The id="title" attribute to define the CSS rules that apply uniquely to the title section

The second section inside our header contains the navigation menu for our website. We create this section using the <nav> element and assign it:

  • The id="nav" attribute to define the CSS rules that apply uniquely to the navigation section

Next the CSS:

CSS

* { box-sizing: border-box; margin: 0; border: 0; padding: 0; } .page { max-width: 640px; margin: 0 auto; } @media (min-width: 960px) { .page {max-width: 960px;} } .grid { display: flex; flex-flow: row wrap; justify-content: center; } @media (max-width: 479px) { .grid_mod-sm-12 { flex: 0 0 auto; width: 100%; } } @media (min-width: 480px) and (max-width: 959px) { .grid_mod-md-6 { flex: 0 0 auto; width: 50%; } } @media (min-width: 960px) { .grid_mod-lg-6 { flex: 0 0 auto; width: 50%; } }

Here we create the CSS rules to drive our responsive layout.

Title Structure and Style

The construction of the title section is identical to our standard multiple-line top header design.

Let's start with the HTML used to create the title section for our icon bar design:

HTML

<!-- Title --> <div id="title"> <div class="page"> <div class="bar"> <h1 class="bar_item"> <a href="#home" class="bar_link"> My Website</a></h1> </div> </div> </div>

Inside the title section we create our page container using the <div> element and assign it:

  • The class="page" attribute to control the width of the page container

Inside the page container we create our title bar using the <div> element and assign it:

  • The class="bar" attribute to control the style of the title bar

Inside the title bar we create our title heading using the <h1> element and assign it:

  • The class="bar_item" attribute to control the style of the title heading

And inside the title heading we use the <a> element to create a link that directs visitors to our home page when clicked. We assign it:

  • The href="#home" attribute to specify the destination of the title heading link
  • The class="bar_link" attribute to control the style of the title heading link

Next the CSS:

CSS

/* Title */ #title {background: #4040BF;} #title .bar { font-size: 0; text-align: center; } #title .bar_item { display: inline-block; font: bold 24px / 1.5 sans-serif; } #title .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; }

Here we create a set of CSS rules to style the title section of our header. Each rule is preceded by the #title selector.

First we create the #title CSS rule to apply a background color to our title section.

Next we create the .bar CSS rule to control the style of our title bar. We add:

  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around the title heading

Then we create the .bar_item CSS rule to control the style of our title heading.

Finally we create the .bar_link CSS rule to control the style of our title bar link.

Navigation Structure and Style

The construction of the navigation section is similar to our standard search and social media share bar design.

Let's take a look at the HTML used to create the navigation section for our icon bar design:

HTML

<!-- Navigation --> <nav id="nav"> <!-- Icon Bar and Site Menu --> <div id="nav-1"> ... </div> <!-- Search and Social Media Share Bar --> <div id="nav-2"> ... </div> </nav>

The navigation section is divided into two subsections.

The first subsection inside our navigation section contains the icon bar and site menu for our website. We create this subsection using the <div> element and assign it:

  • The id="nav-1" attribute to define the CSS rules that apply uniquely to the icon bar and site menu subsection

The second subsection inside our navigation section contains the search and social media share bar for our website. We create this subsection using the <div> element and assign it:

  • The id="nav-2" attribute to define the CSS rules that apply uniquely to the search and social media share bar subsection

Icon Bar and Site Menu Structure and Style

The construction of the icon bar and site menu subsection is similar to our standard search and social media share bar design. But we add:

  • HTML and CSS to create the icon bar
  • CSS to allow the site menu dropdown behavior

Let's start with the HTML used to create the icon bar and site menu subsection for our icon bar design:

HTML

<!-- Icon Bar and Site Menu --> <div id="nav-1"> <div class="page"> <ul class="control" id="nav_control"> <li class="control_item-left"> <a href="javascript:void(0);" onclick="navSiteToggle()" class="control_link"> <i class="control_icon fa fa-bars"></i></a></li> <li class="control_item-right"> <a href="javascript:void(0);" onclick="navShareToggle()" class="control_link"> <i class="control_icon fa fa-share-alt"></i></a></li> <li class="control_item-right"> <a href="javascript:void(0);" onclick="navSearchToggle()" class="control_link"> <i class="control_icon fa fa-search"></i></a></li> </ul> <ul class="bar" id="nav-site"> <li class="bar_item"> <a href="#home" class="bar_link"> Home</a></li> <li class="bar_item"> <a href="#about" class="bar_link"> About</a></li> <li class="bar_item"> <a href="#products" class="bar_link"> Products</a></li> <li class="bar_item"> <a href="#services" class="bar_link"> Services</a></li> </ul> </div> </div>

Inside the icon bar and site menu subsection we create our page container using the <div> element and assign it:

  • The class="page" attribute to control the width of the page container

The first item inside the page container is our icon bar. We create this item using the <ul> element and assign it:

  • The class="control" attribute to control the style of the icon bar
  • The id="nav_control" attribute to allow the style of the icon bar to be controlled by JavaScript

The first item inside the icon bar is our site menu button. We create this item using the <li> element and assign it:

  • The class="control_item-left" attribute to control the style of the site menu button

Inside the site menu button we use the <a> element to create a link that opens and closes our site menu on small screens. We assign it:

  • The href="javascript:void(0);" attribute to void the destination of the site menu button link
  • The onclick="navSiteToggle()" attribute to execute the JavaScript function that opens and closes the site menu when clicked
  • The class="control_link" attribute to control the style of the site menu button link

And inside the site menu button link we create our site menu button icon using the <i> element and assign it:

  • The class="control_icon fa fa-bars" attribute to control the style of the site menu button icon

The second item inside the icon bar is our social media share bar button. We create this item using the <li> element and assign it:

  • The class="control_item-right" attribute to control the style of the social media share bar button

Inside the social media share bar button we use the <a> element to create a link that opens and closes our social media share bar on small screens. We assign it:

  • The href="javascript:void(0);" attribute to void the destination of the social media share bar button link
  • The onclick="navShareToggle()" attribute to execute the JavaScript function that opens and closes the social media share bar when clicked
  • The class="control_link" attribute to control the style of the social media share bar button link

And inside the social media share bar button link we create our social media share bar button icon using the <i> element and assign it:

  • The class="control_icon fa fa-share-alt" attribute to control the style of the social media share bar button icon

The third item inside the icon bar is our search bar button. We create this item using the <li> element and assign it:

  • The class="control_item-right" attribute to control the style of the search bar button

Inside the search bar button we use the <a> element to create a link that opens and closes our search bar on small screens. We assign it:

  • The href="javascript:void(0);" attribute to void the destination of the search bar button link
  • The onclick="navSearchToggle()" attribute to execute the JavaScript function that opens and closes the search bar when clicked
  • The class="control_link" attribute to control the style of the search bar button link

And inside the search bar button link we create our search bar button icon using the <i> element and assign it:

  • The class="control_icon fa fa-search" attribute to control the style of the search bar button icon

The second item inside the page container is our site menu. We create this item using the <ul> element and assign it:

  • The class="bar" attribute to control the style of the site menu
  • The id="nav-site" attribute to allow the style of the site menu to be controlled by JavaScript

Inside the site menu we create our site menu items using the <li> element and assign each:

  • The class="bar_item" attribute to control the style of the site menu item

And inside each site menu item we use the <a> element to create a link that directs visitors to the corresponding page when clicked. We assign each:

  • The href="..." attribute to specify the destination of the site menu link
  • The class="bar_link" attribute to control the style of the site menu link

Next the CSS:

CSS

/* Icon Bar and Site Menu */ #nav-1 { background: #000000; overflow: hidden; transition: height 0.25s; } #nav-1 .control { display: none; font-size: 0; text-align: center; overflow: hidden; } #nav-1 .control_item-left { display: inline-block; float: left; font: 16px / 1.5 sans-serif; } #nav-1 .control_item-right { display: inline-block; float: right; font: 16px / 1.5 sans-serif; } #nav-1 .control_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } #nav-1 .control_icon {width: 16px;} #nav-1 .bar { font-size: 0; text-align: center; } #nav-1 .bar_item { display: block; font: 16px / 1.5 sans-serif; } #nav-1 .bar_link { display: block; padding: 16px; text-decoration: none; color: #FFFFFF; } @media (min-width: 480px) { #nav-1 .bar_item {display: inline-block;} }

Here we create a set of CSS rules to style the icon bar and site menu subsection of our header. Each rule is preceded by the #nav-1 selector.

First we create the #nav-1 CSS rule to apply a background color to our icon bar and site menu subsection. To allow the dropdown behavior we add:

  • The overflow: hidden property to hide the content of the site menu when it is collapsed
  • The transition: height 0.25s property to allow the height of the site menu to change smoothly over a 0.25-second duration

Next we create the .control CSS rule to control the style of our icon bar. We add:

  • The display: none property to hide the icon bar on devices that are not JavaScript-enabled
  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around and between the icon bar buttons
  • The overflow: hidden property to allow the icon bar buttons to be floated without collapsing the height of the icon bar

Then we create the .control_item-left CSS rule to control the style of our left-aligned icon bar button. We add:

  • The float: left property to float the icon bar button to the left of the icon bar

Next we create the .control_item-right CSS rule to control the style of our right-aligned icon bar buttons. We add:

  • The float: right property to float the icon bar buttons to the right of the icon bar

Then we create the .control_link CSS rule to control the style of our icon bar button links.

Next we create the .control_icon CSS rule to control the style of our icon bar button icons.

Then we create the .bar CSS rule to control the style of our site menu. We add:

  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around and between the site menu items

Next we create the .bar_item CSS rule to control the style of our site menu items. Note that the site menu items are displayed vertically (as blocks) on small screens and horizontally (as inline-blocks) on medium and large screens.

Finally we create the .bar_link CSS rule to control the style of our site menu links.

Search and Social Media Share Bar Structure and Style

The construction of the search and social media share bar subsection is similar to our standard search and social media share bar design.

Let's start with the HTML used to create the search and social media share bar subsection for our icon bar design:

HTML

<!-- Search and Social Media Share Bar --> <div id="nav-2"> <div class="page grid"> <div class="grid_mod-sm-12 grid_mod-md-6 grid_mod-lg-6" id="nav-search"> <form action="http://www.google.com/search" target="_blank" method="get" class="form"> <div class="form_content"> <input type="hidden" name="sitesearch" value="www.mysite.com"> <input type="text" name="q" placeholder="Search..." class="form_input"> <button type="submit" class="form_button"> <i class="form_icon fa fa-search"></i></button> </div> </form> </div> <div class="grid_mod-sm-12 grid_mod-md-6 grid_mod-lg-6" id="nav-share"> <ul class="bar"> <li class="bar_item"> <a href="http://www.facebook.com/sharer.php?u=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-facebook-square"></i></a></li> <li class="bar_item"> <a href="https://twitter.com/share?url=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-twitter-square"></i></a></li> <li class="bar_item"> <a href="https://pinterest.com/pin/create/button/?url=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-pinterest-square"></i></a></li> <li class="bar_item"> <a href="https://plus.google.com/share?url=http://www.mysite.com" target="_blank" class="bar_link"> <i class="bar_icon fa fa-google-plus-square"></i></a></li> </ul> </div> </div> </div>

The first item inside the search and social media share bar subsection is the grid container for our search and social media share bar. We create this item using the <div> element and assign it:

  • The class="grid page" attribute to control the width and behavior of the search and social media share bar grid container

The first item inside the search and social media share bar grid container is the grid module for our search bar. We create this item using the <div> element and assign it:

  • The class="grid_mod-sm-12 grid_mod-md-6 grid_mod-lg-6" attribute to control the width of the search bar grid module
  • The id="nav-search" attribute to allow the style of the search bar grid module to be controlled by JavaScript

Inside the search bar page container we create the outer container for our search bar using the <form> element and assign it:

  • The action="http://www.google.com/search" attribute to specify the destination of the search engine
  • The target="_blank" attribute to open the search results in a new window or tab
  • The class="form" attribute to control the style of the search bar outer container

Inside the search bar outer container we create the inner container for our search bar using the <div> element and assign it:

  • The class="form_content" attribute to control the style of the search bar inner container

The first item inside the search bar inner container is a hidden input field that directs search engines to search only within our website domain. We create this item using the <input> element and assign it:

  • The type="hidden" attribute to hide the input field
  • The value="www.mysite.com" attribute to specify the domain of our website

The second item inside the search bar inner container is our search bar input field. We create this item using the <input> element and assign it:

  • The type="text" attribute to specify the type of input expected in the field
  • The class="form_input" attribute to control the style of the search bar input field

The third item inside the search bar inner container is our search bar button. We create this item using the <button> element and assign it:

  • The type="submit" attribute to specify the type of behavior executed by the search bar button
  • The class="form_button" to control the style of the search bar button

Inside the search bar button we create our search bar button icon using the <i> element and assign it:

  • The class="form_icon fa fa-search" attribute to control the style of the search bar button icon

The second item inside the search and social media share bar grid container is the grid module for our social media share bar. We create this item using the <div> element and assign it:

  • The class="grid_mod-sm-12 grid_mod-md-6 grid_mod-lg-6" attribute to control the width of the social media share bar grid module
  • The id="nav-share" attribute to allow the style of the social media share bar grid module to be controlled by JavaScript

Inside the social media share bar page container we create our social media share bar using the <ul> element and assign it:

  • The class="bar" attribute to control the style of the social media share bar

Inside the social media share bar we create our social media share bar items using the <li> element and assign each:

  • The class="bar_item" attribute to control the style of the social media share bar item

And inside each social media share bar item we use the <a> element to create a link that shares our page to the corresponding social media platform when clicked. We assign each:

  • The href="..." attribute to specify the destination of the social media share bar link
  • The class="bar_link" attribute to control the style of the social media share bar link

Next the CSS:

CSS

/* Search and Social Media Share Bar */ #nav-2 { background: #808080; overflow: hidden; transition: height 0.25s; } #nav-2 .bar { font-size: 0; text-align: center; } #nav-2 .bar_item { display: inline-block; font: 32px / 1.25 sans-serif; text-align: center; } #nav-2 .bar_link { display: block; padding: 8px 16px; text-decoration: none; color: #FFFFFF; } #nav-2 .bar_icon {width: 32px;} @media (min-width: 480px) { #nav-2 .bar {text-align: right;} } #nav-2 .form {padding: 8px 16px;} #nav-2 .form_content {position: relative;} #nav-2 .form_input { width: 100%; height: 40px; border-radius: 8px; padding: 8px 48px 8px 16px; font: 16px / 1.5 sans-serif; color: #404040; background: #FFFFFF; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) inset; } #nav-2 .form_button { height: 40px; position: absolute; right: 0; top: 0; padding: 8px 16px; font: 16px / 1.5 sans-serif; text-align: center; color: #000000; background: transparent; cursor: pointer; } #nav-2 .form_icon {width: 16px;}

Here we create a set of CSS rules to style the search and social media share bar subsection of our header. Each rule is preceded by the #nav-2 selector.

First we create the #nav-2 CSS rule to apply a background color to our search and social media share bar subsection. To allow the dropdown behavior we add:

  • The overflow: hidden property to hide the content of the search and social media share bar when it is collapsed
  • The transition: height 0.25s property to allow the height of the search and social media share bar to change smoothly over a 0.25-second duration

Next we create the .bar CSS rule to control the style of our social media share bar. We add:

  • The font-size: 0 property to prevent browsers from adding undesirable whitespace around and between the social media share bar items

Then we create the .bar_item CSS rule to control the style of our social media share bar items.

Note that the social media share bar items are aligned to the right on medium and large screens.

Next we create the .bar_link CSS rule to control the style of our social media share bar links.

Then we create the .form CSS rule to control the style of our search bar outer container.

Next we create the .form_content CSS rule to control the style of our search bar inner container. We add:

  • The position: relative property to specify that the search bar button is positioned relative to the search bar inner container

Then we create the .form_input CSS rule to control the style of our search bar input field. We add:

  • The padding: 8px 48px 8px 16px property to prevent the search bar input field text and search bar button from overlapping

Next we create the .form_button CSS rule to control the style of our search bar button. We add:

  • The position: absolute, the right: 0, and the top: 0 properties to position the search bar button in the top-right corner of the search bar inner container

Finally we create the .form_icon CSS rule to control the style of our search bar button icon.

Function

To create the icon bar dropdown behavior we use JavaScript to add functionality to our layout. Keeping aligned with the principle of "progressive enhancement", our navigation content remains fully functional for all devices. For visitors without JavaScript-enabled devices, the icon bar is hidden and navigation content is shown in a multiple-line navigation layout. But for visitors with JavaScript-enabled devices, the icon bar is shown and the dropdown behavior is added to the core functionality of our navigation layout to provide an improved user experience.

On small screens, we show the icon bar by setting its display to block. We hide the navigation content by setting the display of the site menu, search bar, and social media share bar to none. We collapse the icon bar and site menu subsection by setting its height equal to the height of the icon bar. And we collapse the search and social media share bar subsection by setting its height to 0.

When the button is clicked to expand the site menu, the site menu is shown, the search bar and social media share bar are hidden, and the dropdown section is expanded by setting its height equal to the combined height of the icon bar and site menu. When the button is clicked to collapse the site menu, the site menu is hidden and the dropdown section is collapsed by recalculating the height of its content (hidden content has a height of 0).

When the button is clicked to expand the search bar, the search bar is shown, the site menu and social media share bar are hidden, and the dropdown section is expanded by setting its height equal to the height of its content. When the button is clicked to collapse the search bar, the search bar is hidden and the dropdown section is collapsed by recalculating the height of its content (hidden content has a height of 0).

When the button is clicked to expand the social media share bar, the social media share bar is shown, the site menu and search bar are hidden, and the dropdown section is expanded by setting its height equal to the height of its content. When the button is clicked to collapse the social media share bar, the social media share bar is hidden and the dropdown section is collapsed by recalculating the height of its content (hidden content has a height of 0).

On medium and large screens, we hide the icon bar setting its display to none. We show the navigation content by setting the display of site menu, search bar, and social media share bar to block. We expand the icon bar and site menu subsection by setting its height to auto. And we expand the search and social media share bar subsection by also setting its height to auto.

Let's take a look at a step-by-step breakdown of how we want the JavaScript to function:

When the page is loaded or resized:

  • If device size is medium or large:
    • Hide icon bar control
    • Expand icon bar and site menu section
    • Expand search and social media share bar section
    • Show site menu
    • Declare site menu is open
    • Show search bar
    • Declare search bar is open
    • Show social media share bar
    • Declare social media share bar is open
  • If device size is small:
    • Show icon bar control
    • Collapse icon bar and site menu section
    • Collapse search and social media share bar section
    • Hide site menu
    • Declare site menu is closed
    • Hide search bar
    • Declare search bar is closed
    • Hide social media share bar
    • Declare social media share bar is closed

When site menu is toggled:

  • Hide search bar
  • Declare search bar is closed
  • Hide social media share bar
  • Declare social media share bar is closed
  • If site menu is closed:
    • Show site menu
    • Declare site menu is open
  • If site menu is open:
    • Hide site menu
    • Declare site menu is closed
  • Expand/collapse icon bar and site menu section
  • Collapse search and social media share bar section

When search bar is toggled:

  • Hide site menu
  • Declare site menu is closed
  • Hide social media share bar
  • Declare social media share bar is closed
  • If search bar is closed:
    • Show search bar
    • Declare search bar is open
  • If search bar is open:
    • Hide search bar
    • Declare search bar is closed
  • Collapse icon bar and site menu section
  • Expand/collapse search and social media share bar section

When social media share bar is toggled:

  • Hide site menu
  • Declare site menu is closed
  • Hide search bar
  • Declare search bar is closed
  • If social media share bar is closed:
    • Show social media share bar
    • Declare social media share bar is open
  • If social media share bar is open:
    • Hide social media share bar
    • Declare social media share bar is closed
  • Collapse icon bar and site menu section
  • Expand/collapse search and social media share bar section

Now the JavaScript that makes it happen:

JavaScript

var screenSize = window.matchMedia("(min-width: 480px)"); var navControl = document.getElementById("nav_control"); var nav1 = document.getElementById("nav-1"); var nav2 = document.getElementById("nav-2"); var navSite = document.getElementById("nav-site");; var navSiteState; var navSearch = document.getElementById("nav-search"); var navSearchState; var navShare = document.getElementById("nav-share"); var navShareState; function navInitial() { if (screenSize.matches) { navControl.style.display = "none"; nav1.style.height = "auto"; nav2.style.height = "auto"; navSite.style.display = "block"; navSiteState = 1; navSearch.style.display = "block"; navSearchState = 1; navShare.style.display = "block"; navShareState = 1; } else { navControl.style.display = "block"; nav1.style.height = navControl.scrollHeight + "px"; nav2.style.height = "0"; navSite.style.display = "none"; navSiteState = 0; navSearch.style.display = "none"; navSearchState = 0; navShare.style.display = "none"; navShareState = 0; } } function navSiteToggle() { navSearch.style.display = "none"; navSearchState = 0; navShare.style.display = "none"; navShareState = 0; if (navSiteState === 0) { navSite.style.display = "block"; navSiteState = 1; } else { navSite.style.display = "none"; navSiteState = 0; } nav1.style.height = navControl.scrollHeight + navSite.scrollHeight + "px"; nav2.style.height = "0"; } function navSearchToggle() { navSite.style.display = "none"; navSiteState = 0; navShare.style.display = "none"; navShareState = 0; if (navSearchState === 0) { navSearch.style.display = "block"; navSearchState = 1; } else { navSearch.style.display = "none"; navSearchState = 0; } nav1.style.height = navControl.scrollHeight + "px"; nav2.style.height = navSearch.scrollHeight + "px"; } function navShareToggle() { navSite.style.display = "none"; navSiteState = 0; navSearch.style.display = "none"; navSearchState = 0; if (navShareState === 0) { navShare.style.display = "block"; navShareState = 1; } else { navShare.style.display = "none"; navShareState = 0; } nav1.style.height = navControl.scrollHeight + "px"; nav2.style.height = navShare.scrollHeight + "px"; } window.onload = navInitial; window.onresize = navInitial;

And there you have it! A responsive icon bar.

The demonstration provided expands upon this code to include toggled icons, colors, and tooltips.

To see it in action, open the demonstration at the beginning of this example in a new window. View the source code in your web browser to see how the page is constructed.

To customize the demonstration, first save a local copy of the document on your computer. Then open the file in your text editor to add, remove, and modify code to create your own web design masterpiece.

More Parts in This Series