html css case study

W3.CSS Colors

Web building, w3.css case study, building a responsive web site from scratch.

In this chapter we will build a W3.CSS responsive website from scratch.

First, start with a simple HTML page, with an initial viewport and a link to W3.CSS.

Put Elements in Containers

To add common margins and padding, put the HTML elements inside containers (<div class="w3-container">)

Separate the header from the rest of the content, using two separate <div> elements:

Advertisement

Color Classes

Color classes defines the color of elements.

This example adds a color to the first <div> element:

Size Classes

Size classes defines the text size for elements.

This example adds a size to both header elements:

Use Semantic Elements

If you like to follow the HTML5 semantic recommendations. please do!

It does not matter for W3.CSS if you use <div> or <header>.

Multicolumn Responsive Layout

With W3.CSS it is easy to create a multicolumn responsive layout.

The columns will rearrange themselves automatically when viewed on different screen sizes.

Some grid rules:

• Start with a row class <div class="w3-row-padding">
• Use predefined classes like "w3-third" to quickly make grid columns
• Place your text content inside the grid columns

This example shows how to create three columns of equal width:

This example shows how to create four columns of equal width:

Columns With Different Widths

This example creates a three-column layout where the column in the middle is wider than the first and last column:

Navigation Bars

A navigation bar is a navigation header that is placed at the top of the page.

Side Navigation

With side navigation, you have several options:

• Always display the navigation pane to the left of the page content.
• Use a collapsible, "fully automatic" responsive side navigation.
• Open navigation pane over the left part of the page content.
• Open navigation pane over all of the page content.
• Slide the page content to the right when opening the navigation pane.
• Display the navigation pane on the right side instead of the left side

This example opens the navigation pane over the left part of the page content:

JavaScript used to open and hide the menu:

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

Learn CSS – Responsive Web Design Study Guide

Cascading Style Sheets (CSS) represents the design for a web page. But when you are learning this information for the first time, it can be hard to keep track of all of the different CSS properties.

In this article, I have created a study guide for the freeCodeCamp curriculum's entire Learn Basic CSS by Building a Cafe Menu practice project . This study guide is filled with additional information, articles, and videos to help you understand the concepts better.

Feel free to reference this guide as you go through the certification. The first part of the project reviews HTML elements and then moves onto CSS.

Here is the complete list of topics covered. Click on any of the links below to learn more about the topic.

Table of Contents

• DOCTYPE and HTML elements - Step 1
• Head and Title elements - Step 2
• Meta charset attribute - Steps 3,17
• Body element - Step 4
• Heading elements - Steps 6,9,10, 47
• Paragraph element - Steps 7, 30, 31, 49, 65
• Header element - Step 7
• Main element - Step 5
• Section Elements - Steps 8, 9, 46
• Style element - Step 10
• text-align property in CSS - Steps 11, 12,  33,  35
• Grouping CSS selectors - Steps 13, 51
• Linking External Stylesheets - Step 16
• Viewport meta tag - Step 18
• background-color property - Steps 18, 19, 23, 68
• Div element - Step 20
• CSS width property - Steps 21, 24, 38, 39, 41, 45
• CSS comments - Steps 22, 77
• Margin property - Steps 25, 73, 75, 84, 85, 86, 91
• Class selectors - Steps 26, 27, 32,  34, 36, 42, 44, 50, 61, 76, 87
• background-image property - Step 28
• Article element - Steps 29, 31, 48, 52
• Block, inline and inline-block values - Steps 37, 89
• Padding - Steps 53 - 55, 72
• max-width property - Step 56
• font-family - Step 57 - 59
• font-style property - Step 60
• font-size property - Steps 62, 74, 78
• Footer elements - Step 63
• Anchor elements - Step 64
• hr element - Steps 66, 71
• Height property - Steps 67, 70
• border-color property - Step 69
• Color property - Steps 79, 83
• Pseudo-classes - Steps 80, 81, 82
• Image elements - Steps 88, 90

Additional resources for HTML and CSS

Doctype and html elements.

The first line in your HTML code should be the DOCTYPE declaration. A DOCTYPE tells the browser what version of HTML the page is written in.

This is the DOCTYPE declaration for HTML 5:

If you forget to include this line of code in your file, then some of the HTML 5 tags like <article> , <footer> , and <header>  may not be supported by the browser.

The html element is the root element where all other elements go inside of it.

The lang attribute inside the opening <html> tag sets the language for the page. It is also good to include it for accessibility reasons, because screen readers will know how to properly pronounce the text.

Head and Title elements

The <head> tags contain information that is processed by machines. Inside the <head> tags, you will nest metadata which is data that describes the document to the machine.

The <title> tag is the title for the web page. This text is shown in the browser's title bar.

This is an example of what a head would look like on a real web page. None of this information is displayed on the web page itself.

For a detailed description of each meta tag listed, you can read through this article on an HTML5 Boilerplate .

Meta charset attribute

UTF-8 is the standard character encoding you should use in your web pages. This will usually be the first <meta> tag shown in the <head> element.

According to the World Wide Web Consortium ,

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

Body element

The body element contains all of the content for the web page. This includes headings, paragraphs, images, links, and more.

Heading elements

HTML heading elements represent the main heading and subheadings of a web page.

The h1 element represents the most important heading and should only be used once per web page.

The h2 element represents the second most important heading on the page.

There are a total of six section heading elements:

This is what it looks like rendered to the page.

To learn more about heading elements, you can read through this DevDocs detailed heading elements explanation .

Paragraph element

Paragraph elements represent the paragraphs on a web page.

This is what it looks like rendered to the page:

To learn more about paragraph elements, you can read through this DevDocs p element detailed explanation .

Header element

The header element contains introductory content of the web page. This can include elements like a nav , h1 or website logo.

Main element

The main element is used to group all of the main content of the web page.

This is what the code looks like rendered to the page.

To learn more about the main element, you can read through this DevDocs detailed main element explanation .

Section elements

The section element is used to group sections of content in the HTML document.

Here is an example of the section element:

This is what the result looks like rendered to the page.

To learn more about section elements, you can read through this DevDocs section element detailed explanation .

Style element

The style element contains the styling for the web page. This is known as internal CSS.

The style element goes inside the head tags.

To learn more, you can read through this helpful DevDocs explanation on the style element .

text-align Property in CSS

When you are working with heading or paragraph tags, the default styling in HTML will position the text on the left hand side of the page.

In this example, we have an <h1> which is placed on the upper left hand side of the page.

If we wanted to horizontally center that text on the page, then we can use the text-align property.

To learn more, you can read through this helpful article on centering text: Text Align in CSS – How to Align Text in Center with HTML .

Grouping CSS selectors

If you have multiple CSS selectors with the same styles, then you can group them together like this:

Notice how the h1 , h2 and h3 are separated by commas. Grouping multiple CSS selectors together cleans up your CSS and removes repetition.

You can read more about CSS combinators here .

Linking External Stylesheets

The link element is used in most cases to link an external stylesheet to the HTML document. Using external CSS is preferred in most cases to help keep your HTML and CSS in separate documents for readability.

rel="stylesheet" defines the relationship between the HTML file and the external stylesheet.

To learn more, you can read this DevDocs example on link elements .

Viewport meta tag

This tag renders the width of the page to the width of the device's screen size. If you have a mobile device that is 600px wide, then the browser window will also be 600px wide.

The initial-scale controls the zoom level. The value of 1 for the initial-scale prevents the default zoom by browsers.

background-color property

You can change the background color of an HTML element by using the CSS background-color property.

Let's say we have this HTML markup.

I wanted to change the background color from the default of white to pink. We can target the body selector and use background-color: pink;

To learn more, you can read through this helpful article: CSS Background Color – How to Change the Background Color in HTML .

Div element

The div HTML element is used to group multiple HTML elements and represents a generic container. This element holds no semantic meaning and is mainly used for styling purposes.

To learn more, you can read through this helpful article: HTML Div – What is a Div Tag and How to Style it with CSS .

CSS width property

The width property will set the width for the HTML element.

In this example, I want to set the width of this div to 200px.

To learn more, you can read through this helpful DevDocs explanation on the width property.

CSS comments

If you need to comment out code or leave messages for yourself or other developers, you can use comments.

Here is the basic syntax for a comment in CSS:

Anything inside that comment tag will not be rendered to the web page.

In this example, we have some HTML markup.

For the CSS, I have changed the text color to red and increased the font size.

Here is the current result:

If I comment out the red text color, then the text will go back to black.

Margin property

The margin property represents the space around the HTML element. There are four different margin properties:

• margin-left
• margin-right
• margin-bottom

In this first example, we have two div elements which represent blue and red boxes.

Here is what the result looks like rendered to the page:

If we want to created some space between the red and blue boxes we can use the margin property. I am going to add a margin-bottom: 20px; to the blue box to create space.

This is what the result looks like:

We can also center both boxes, by setting the margin-left and margin-right properties to auto .

Here is the result:

In this next example, we have a green box, a blue box, and some text on the page. We can use the margin-left , margin-right , margin-top , and margin-bottom properties to create spaces between the text and boxes.

For the blue and green boxes, we can clean up our code here and place all of these margin styles all in one line.

The margin shorthand property is used to set the margin for all sides of the element. If two values are present, then the first value represents the top & bottom margins while the second value represents the left & right margins.

To learn more about the margin shorthand property, you can read through this helpful DevDocs explanation .

Class selectors

If you wanted a group of HTML elements to share the same styles, then you would use the class attribute.

Here is an example of how to apply a class to an HTML element.

Then in your CSS, you can target that class and add some styles to it.

Here is an example of turning that text red, using CSS. Note, that you need to precede that class name with a . which tells the computer that you want to use a class selector.

background-image property

The background-image property is used to set the background image for an HTML element.

In this example, we are going to apply a background image of lasagna to the body element.

The reason why this image is repeating on the screen is because that is the default behavior for the background-image property. You could use background-repeat: no-repeat; to change that default behavior.

Article element

The article element is a semantic HTML element that is used for independent self contained content.  

Block, inline and inline-block values

The display property is used to apply block or inline characteristics to an element. Block level elements take up the full horizontal space on the page while inline elements only take up the horizontal space for that element.

Inline elements will not work with width and height properties. The margin left and right values will work for inline elements but not the top and bottom values.

You can have multiple inline elements displayed in a row while you can have only one block level element per row. Here is an example for multiple inline elements in a row:

You can use the display:block; value on these anchor element to change their default behavior and set it to block characteristics.

This next example is for multiple block level elements. Notice how each of these divs takes up the entire horizontal space on the page and they are not displayed next to each other.

This last value is called inline-block which will treat elements as inline but will also have characteristics of block level elements.

Here is an example of two paragraph elements that are block level elements by default.

I can set the width, margin, padding and background-color for these p elements.

We can add display: inline-block; to place the paragraph elements next to each other.

In CSS, you can add padding to create space around the element's content.

In this example we have a paragraph element with a pink background that uses no padding.

Notice how the text is right up against the border of the p element. That is because we haven't added any padding.

If we want to create space around that text, then we can use padding. Let's add 10px of padding on all sides of the text.

If we only wanted to add padding to the left and right sides, then we can use the padding-left and padding-right properties.

We can also modify it so there is only space around the top and bottom of the text.

Similar to the margin property, you can use a shorthand notation to apply different types of padding to the top, left, right, and bottom sides.

In this example we are going to add 10px of padding to the top and bottom of the text and add 15px of padding to the left and right sides of the text.

Without the shorthand property the code would look like this:

But we can use the shorthand notation to achieve the same result. The first number in the padding property represents the top and bottom while the second number represents the left and right.

To learn more about the padding shorthand notation, you can read through this helpful DevDocs explanation .

max-width property

The max-width property is useful when you want to set a maximum width for an element.

In this example, we have a red container with a width set to 70% of the viewport width.

We can use the max-width property to set a maximum width of 1000px to this red container.

Now, when the viewport is larger than 1000px, the width will no longer be set to 70% of the viewport. Instead, it will stay at the maximum width of 1000px.

font-family property

In design, a font-family represents a collection of fonts that share similar design characteristics. Here are some examples of some font families:

In CSS, you can use the font-family property to apply a set of fonts to given elements.

The browser will select the first font in the list and display if it is available. If that font is not available, then it will move onto the next font in the list.

It is good practice to provide a fallback font in the event that the other fonts in the list are not available to the browser.  In our example, cursive would considered the fallback if Comic Sans MS and Comic Sans were not available.

font-style property

The font-style property is used to set the text in a normal, italic, or oblique font style.

Here is an example of setting the text to an italic font-style .

It's important not to use the HTML i (Idiomatic Text) element for styling text in italics. When it comes to styling text, you should always use the font-style property.

font-size property

The font-size property is used to change the font sizes for HTML elements like headings and paragraphs. Here are some common values that you can use with the font-size property:

• xx-small,  x-small, small, medium, large, x-large, xx-large, xxx-large
• smaller, larger
• px, em, rem
• percentages (for example, font-size: 60%;)

In this example, we are going to set the font-size for this paragraph element to be 20px.

Footer elements

The footer element is located at the bottom of the HTML document and contains information like copyrights, or links to other related information for the page.

Here is a basic example:

To learn more about the footer element, you can read through this DevDocs explanation of the footer element .

Anchor elements

An anchor element represents a link on the web page.

Here is the basic syntax:

You use the href attribute to tell the hyperlink where to go.

The anchor text is what gets displayed on the screen to users.

Here is an example of an anchor tag that links to freeCodeCamp:

To learn more about HTML anchor elements, I suggest reading through these helpful articles:

• The HTML <a> Tag – Anchor Tag Example Code
• HTML <a> Tag – Anchor Link HREF Example

The hr (Horizontal Rule) element is used to created breaks between the paragraph elements.

Here is an example of how to use the hr element between two paragraph elements. hr elements are self closing.

You can style the hr element by changing its border and color.

Height property

The height property in CSS is used to set the height for an HTML element. Here is an example where we have a blue container with a height of 50px.

To learn more about the height property, you can read through this helpful DevDocs explanation .

border-color property

The border-color property is used to set the color for an element's border.

In this example, we are going to create two paragraph elements with different border colors. The first step is to set the border widths and style.

Then we can set the first paragraph to have a border color of green and the second paragraph to have a border color of blue.

We can rewrite our example to use the border shorthand notation to apply the border width, color, and style all at the same time.

Color property

You can change the color of the text by using the color property. Here is an example to change the paragraph text to blue:

Pseudo-classes

Pseudo-classes are special keywords that you can add to CSS selectors to show the specific state of an HTML element.

In this first example, we are going to create a blue button that changes to a darker shade of blue when the user hovers over it. We can use the :hover pseudo-class to achieve that result.

In this next example, we are going to use CSS pseudo-classes to style the different states for a link.

The :link pseudo-class is used to show the initial state of the link.

The :hover pseudo-class is used to show when a user hovers over a link.

The :visited pseudo-class is used to show when a user clicks on that link and visits the site.

You can play around with this CodePen example to see the different link states.

If you want to learn more about pseudo-classes, then you can read through this helpful article .

Image elements

img elements are used to add images to the web page.

The src attribute represents the location of the image and the alt attribute is descriptive text for the image.

This is the what code looks like rendered to the page:

To learn more about the img element, you can read through this helpful img element tutorial .

Thanks for reading! Here are some more helpful resources to get you comfortable with CSS:

• CSS Tutorial – Full Course for Beginners
• CSS Tutorial - Zero to Hero (Complete Course)
• Learn HTML & CSS – Full Course for Beginners
• Introduction To Responsive Web Design - HTML & CSS Tutorial
• HTML and CSS Tutorial - Create a Website for Beginners

I am a musician and a programmer.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

To log in and use all the features of Khan Academy, please enable JavaScript in your browser.

Unit 2: Intro to HTML/CSS: Making webpages

About this unit.

Learn how to use HTML and CSS to make webpages. HTML is the markup language that you surround content with, to tell browsers about headings, lists, tables, and more. CSS is the stylesheet language that you style the page with, to tell browsers to change the color, font, layout, and more.

Intro to HTML

• Welcome to the web! (Opens a modal)
• HTML basics (Opens a modal)
• Quick tip: HTML tags (Opens a modal)
• Challenge: Write a Poem (Opens a modal)
• HTML: Text emphasis (Opens a modal)
• Challenge: You can learn text tags (Opens a modal)
• HTML: Lists (Opens a modal)
• Challenge: Wishlist (Opens a modal)
• HTML: Images (Opens a modal)
• Challenge: A picture-perfect trip (Opens a modal)

Intro to CSS

• CSS Basics (Opens a modal)
• Quick tip: Selecting by tag name (Opens a modal)
• Challenge: Colorful creature (Opens a modal)
• CSS: Selecting by id (Opens a modal)
• Challenge: Seasonal ids (Opens a modal)
• CSS: Selecting by class (Opens a modal)
• Challenge: Apples and bananas classes (Opens a modal)
• Project: Travel webpage (Opens a modal)
• Using simple CSS selectors 4 questions Practice

More HTML tags

• HTML links (Opens a modal)
• Challenge: Links for learning (Opens a modal)
• HTML internal links (Opens a modal)
• Challenge: Jump around (Opens a modal)
• HTML tables (Opens a modal)
• Challenge: The dinner table (Opens a modal)
• HTML comments (Opens a modal)
• Project: Recipe book (Opens a modal)

CSS text properties

• CSS Zen Garden (Opens a modal)
• CSS font-family property (Opens a modal)
• Challenge: Fancy font families (Opens a modal)
• CSS font-size property (Opens a modal)
• Challenge: Great big font sizes (Opens a modal)
• CSS font styles and shorthand (Opens a modal)
• Challenge: Famous font formats (Opens a modal)
• More CSS text properties (Opens a modal)
• CSS inheritance (Opens a modal)
• Project: Blog (Opens a modal)
• Using CSS text properties 4 questions Practice

Web development tools

• Using the browser developer tools (Opens a modal)
• Developing webpages outside of Khan Academy (Opens a modal)
• Hosting your website on a server (Opens a modal)
• Hosting your website on Github (Opens a modal)
• CSS grouping elements (Opens a modal)
• Challenge: Group the groupers (Opens a modal)
• CSS width, height, and overflow (Opens a modal)
• Challenge: The overflowing ocean (Opens a modal)
• CSS box model (Opens a modal)
• Challenge: The boxer model (Opens a modal)
• CSS position (Opens a modal)
• Challenge: Position planet (Opens a modal)
• CSS in the wild: Google Maps (Opens a modal)
• CSS floating elements (Opens a modal)
• Challenge: Floating clouds (Opens a modal)
• Planning your webpage (Opens a modal)
• Project: Event invite (Opens a modal)
• Using CSS layout properties 5 questions Practice

More CSS selectors

• Using multiple CSS classes (Opens a modal)
• Challenge: A classy gallery (Opens a modal)
• Combining CSS class and element selectors (Opens a modal)
• Challenge: Classes of elements (Opens a modal)
• CSS descendant selectors (Opens a modal)
• Challenge: Descendants of Khan (Opens a modal)
• Grouping CSS selectors (Opens a modal)
• CSS dynamic pseudo-classes (Opens a modal)
• Challenge: Grouped animals (Opens a modal)
• CSS specificity (Opens a modal)
• CSS specificity rules 4 questions Practice

Other ways to embed CSS

• Using inline CSS styles (Opens a modal)
• Using external stylesheets (Opens a modal)

Further learning

• Webpage design (Opens a modal)
• HTML validation (Opens a modal)
• What to learn next (Opens a modal)
• Validating HTML 4 questions Practice

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Learn to style HTML using CSS

Cascading Style Sheets — or CSS — is the first technology you should start learning after HTML . While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

Prerequisites

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first.

Once you understand the fundamentals of HTML, we recommend that you learn further HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't learn CSS without knowing HTML.

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up, as detailed in Installing basic software , and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner's module.

It is also recommended that you work through Getting started with the web before proceeding with this topic, especially if you are completely new to web development. However, much of what is covered in its CSS basics article is also covered in our CSS first steps module, albeit in a lot more detail.

This topic contains the following modules, in a suggested order for working through them. You should start with the first one.

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout .

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place with respect to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

Solving common CSS problems

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't know how to do it yet!

"CSS is weird"

CSS works a bit differently from most programming languages and design tools you'll come across. Why does it work the way it does? In the following video, Miriam Suzanne provides a useful explanation of why CSS works as it does, and why it has evolved as it has:

The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.

Going Places with HTML and CSS

Shilpa Kumar

HTML and CSS were probably the first two languages you learned when you first started coding. The two languages are the backbone of web page structure and while they are straightforward to grasp, they can be difficult to master. HTML offers many advanced tools that help to better define the objects on a page and optimize search results; CSS has recently released a new feature called Grid that provides a framework for layouts that adapt to multiple screen sizes.

Navigating the advanced features of HTML and CSS can be daunting, but this tutorial is intended to help demystify some of them.

HyperText Markup Language, or HTML, is the most popular way of communicating with the web because it tells the browser how elements, such as images or text, should be displayed on a page. Because this is a language that controls how content is shown, it’s important to utilize HTML tags to explicitly describe the types of content on a page. Leveraging the verbose tags available, or writing semantic HTML, can help boost pages in search results, and make pages more accessible for readers with disabilities.

Writing semantic HTML means writing meaningful HTML, where the markup tags convey the meaning of the content they contain. Semantic HTML acts as a layer of communication between developers working on the code, and it tells browsers, search engines and screen readers how to work with the page’s content. Essentially, semantic HTML is <div>s with definition.

How to Use Semantic HTML

Semantic HTML helps create a well-defined web page structure that minimizes ambiguity. It also enhances the accessibility of a page by allowing screen readers — software that traverses the content of a page and reads it out loud to the user — to navigate pages and relay more information to the user.

Here are some common Semantic HTML tags and how they are used:

<header> This tag is helpful in defining any introductory content, like page navigation or logos. This tag can exist anywhere on a page except within a <footer> tag. There can also be multiple headers that exist on one page. For example, use this tag to wrap a main headline with some introductory text, as shown below:

<nav> The main navigation of a page can be wrapped with the <nav> tag. This is useful for search engines, and it identifies the primary navigation more clearly in case there are other methods of navigation on the web page.

<section> Use the <section> tag instead of a <div> tag to explicitly define the areas in a document that contain a group of related content. Wrap a set of paragraphs, images or a mix of content in section tags to indicate that they are related content.

<article> The <article> tag is for content on a page that is self-contained, meaning it should make sense outside of the context of the page, like in an RSS feed or on another platform. Use this tag to wrap content like a news story or a blog post (shown below), for example.

<footer> Just like the <header> tag, any markup for footer content, including navigation, author bios or copyright notices should be defined in the <footer> tag. There can also be more than one footer on a page. Like the <header> tag, footers can be placed anywhere on the page, but usually is placed right before the end of a </section> or a </body> tag, as shown below.

The Semantic HTML Heading Tag It is important to note that each <h1> element creates a new section as well! Any subheading tags ( <h2> , <h3> , etc) are considered sub-headings under the top level heading and don’t create new sections.

What about <divs>? This does not mean the <div> tag has no meaning, but should only be used when appropriate.

The example markup below shows how to use some of these tags effectively.

Search Optimized HTML

Writing search engine optimized HTML, or SEO HTML, can make it easier for search engines to find your web page and can help you reach a larger audience. How the page appears in search engine results can be controlled with SEO markup.

These are some SEO tags and how to use them:

<head> Most of the important SEO tags go inside the <head> tag. This section will not affect the look or feel of your web page, but most of this content will be important in the search engine results page.

<title> This is what shows up as the headline on search engine result pages. What is written in the <title> tag should contain your web page’s name, and can include some of the content of your web pages.

<meta name=”[your description goes here]”> This is your web page’s description in the search engine results. Make sure it is detailed and honest.

For example:

Here is an example of these SEO tags in practice:

Open Graph Tags

Another useful HTML tool is open graph tags, which provide control over how content shows up on social media when a link is shared. For example, the content that appears on Facebook when a link is shared, such as article title, author and description, is controlled by open graph tags.

There are four required properties when using open graph tags: title, type, image and URL. Additional optional metadata tags can include audio, description, default language, and more. For a detailed look at open graph tags and to read documentation, check out http://ogp.me

In order to make your web page into a graph object, simply add additional metadata tags to the <head> section of your HTML markup with a property attribute set to a content property like below:

While the semantic HTML tags mentioned above let us write structured and readable markup, they don’t affect how our content will look in the browser. Cascading Style Sheets, or CSS, is where we define color, position, font and any other styles. CSS can also be used to control page layout and how elements change based on screen size.

There are numerous ways to control page layout with CSS — tables, setting widths, floats, flexbox — and all of them come with their own unique issues. A recently released CSS feature called CSS Grid, or Grid, can break any given page layout into a two-dimensional series of columns and rows that can be controlled by CSS rules. It’s implemented by applying CSS rules to both the parent element (the grid’s container) and the child elements (the grid items nested within the container). No floats or margins are required to style the content to be responsive.

It’s important to ensure your audience can access your content no matter what device they use, and CSS Grid can be is useful for creating clean layouts that are responsive across multiple screen sizes.

The cells of the grid are not fixed. If a design requires a grid cell to be positioned in a specific location, you can apply the `grid-column` and `grid-row` CSS properties on the cell to control where a cell should be positioned on the page. These shorthand properties specify a “from” and “to” position on the grid. This is useful if a design requires a specific placement of grid items in the mobile layout that is different from the tablet or desktop layout.

You can change the position of any cell in the grid to any location on the same grid and not stress about breaking the layout. Check out this CodePen example that illustrates these properties and placement of grid cells.

There are many layout options with CSS and it can be hard to know which ones to use. A good rule of thumb is if you can draw a grid over your layout, you should use CSS Grid. If a grid doesn’t quite work, use flexbox.

For more information about CSS Grid, read this extensive piece on the framework by my colleague Natalya Shelburne.

When building your web page, it’s important to keep your audience in mind and think about how they’ll access your content. The powerful tools outlined here will help to streamline your layouts, make your web pages more accessible and enhance how your pages appear in search results.

Written by Shilpa Kumar

Software Engineer at The New York Times

More from Shilpa Kumar and NYT Open

CJ Robinson

How the New York Times Games Data Team Revamped Its Reporting

Huge amounts of data from wordle and connections changed the way our team approached data infrastructure and design.

Milestones on our Journey to Standardize Experimentation at The New York Times

How we balanced flexibility and centralization across a large organization..

Rohit Supekar

How The New York Times Uses Machine Learning To Make Its Paywall Smarter

The new york times launched its paywall in march 2011, beginning its journey as a subscription-first news and lifestyle service. since its….

Rethinking How We Evaluate The New York Times Subscription Performance

An exploration into the growth data team’s process of designing and building a new subscription reporting model., recommended from medium.

Ameer Omidvar

Apple’s all new design language

My name is ameer, currently the designer of sigma. i’ve been in love with design since i was a kid. it was just my thing. to make things….

UX/UI-trends in 2024

The 2023 year was rich in technological innovations: we witnessed the introduction of virtual glasses from apple, the surge of generative….

Tech & Tools

Stories to Help You Grow as a Software Developer

General Coding Knowledge

Icon Design

Artturi Jalli

I Built an App in 6 Hours that Makes $1,500/Mo

Copy my strategy.

Christine Vallaure

UX Collective

Why UI designers should understand Flexbox and CSS Grid

Or bye bye, 12-column grid layout.

Julien Etienne

Stop Using localStorage

Bid farewell to localstorage embrace indexeddb for speed, type-safe storage, and non-blocking data transactions. #indexeddb #webdev.

Somnath Singh

Level Up Coding

The Era of High-Paying Tech Jobs is Over

The death of tech jobs..

Text to speech

Web Development & Design Foundations with HTML 5

A first course in web development.

The 10th edition of Web Development & Design Foundations is available!

Announcing the 10th Edition

Building on this textbook’s successful ninth edition, new features for the tenth edition include:

• Chapter 7 has been renamed Responsive Page Layout and takes a mobile first approach! There is a greatly expanded focus on new layout systems including CSS Flexible Layout Module (Flexbox) and CSS Grid Layout — including configuring grids using named areas.
• Chapter 9 introduces form layout with the CSS Flexbox and Grid Layout Systems
• Updated coverage of HTML5 elements and attributes
• Updated code samples, case studies, and web resources
• Expanded treatment of page layout design and responsive web design techniques
• Updated reference sections for HTML5 and CSS
• Additional Hands-On Practice exercises

The book will be primarily available as a Pearson eText. Print copies will be available on demand. Table of Contents Purchase at Pearson

Chapter 1: Introduction to the Internet and World Wide Web

This brief introduction covers the terms and concepts related to the Internet and the Web with which Web developers need to be familiar. For many students, some of this will be a review. Chapter 1 provides the base of knowledge on which the rest of the textbook is built.

Chapter 2: HTML Basics

As HTML5 is introduced, examples and exercises encourage students to create sample pages and gain useful experience. Students are encouraged to create sample pages as they read through the text.

Chapter 3: Configuring Color and Text with CSS

The technique of using Cascading Style Sheets to configure the color and text on web pages is introduced.

Chapter 4: Visual Elements and Graphics

This chapter discusses the use of graphics and visual effects on web pages, including image optimization, CSS borders, CSS image backgrounds, new CSS3 visual effects, and new HTML5 elements. Students are encouraged to create web pages as they read through the text.

Chapter 5: Web Design

This chapter focuses on recommended web design practices and accessibility. Some of this is reinforcement because tips about recommended website design practices are incorporated into the other chapters.

Chapter 6: Page Layout

This chapter continues the study of CSS begun earlier and introduces techniques for positioning and floating web page elements, including a two-column CSS page layout, CSS sprites, CSS for printing, single page website navigation, and more!

Chapter 7: Responsive Page Basics

A mobile first approach is used as this chapter introduces coding techniques for responsive web pages including media queries, feature queries, CSS Flexible Box Layout (Flexbox), CSS Grid Layout, HTML5 picture element, and responsive attributges for the img element.

Chapter 8: Tables

This chapter focuses on the HTML elements used to create tables. Methods for configuring a table with CSS are introduced.

Chapter 9: Forms

This chapter focuses on the HTML elements used to create forms. Methods for configuring the form with CSS, including CSS Grid Layout, are introduced. New HTML5 form control elements and attribute values are introduced.

Chapter 10: Web Development

This chapter focuses on the process of website development, including the job roles needed for a large-scale project, the web development process, and web hosting.

Chapter 11: Web Media and Interactivity

This chapter offers an overview of topics related to adding media and interactivity to web pages. These topics include HTML5 video and audio, CSS3 transforms, CSS transitions, CSS animation, aninteractive image gallery, interactivity with HTML5 Details and Summary elements, and a quick overview of HTML5 APIs, JavaScript, and AJAX.

Chapter 12: E-Commerce Overview

This chapter introduces e-commerce, security, and order processing on the Web.

Chapter 13: Web Promotion

This chapter discusses site promotion from the web developer’s point of view and introduces search engine optimization.

Chapter 14: A Brief Look at JavaScript & jQuery

This chapter provides an introduction to client-side scripting using JavaScript and jQuery.

Author Profile

Dr. Morris has a unique combination of years of industry experience in addition to many years teaching technology courses. Her hands-on approach to this topic enables students to become productive quickly. More Author Info

Student Files

Student files for the 10th edition are available for free download from Pearson .

Instructor Materials

Downloads are available to instructors with exercise solutions, case solutions, PowerPoint presentations, and sample test questions. Contact your Pearson Higher Ed representative or visit Pearson Publishing for more information.

A Case Study on Boosting Front-End Performance

At De Voorhoede we try to boost front-end performance as much as possible for our clients. It is not so easy to convince every client to follow all of our performance guidelines. We try to convince them by talking to them in their own language, and explain the importance of performance for conversion or compare their performance to their main competitors.

Incidentally, we recently updated our site. Apart from doing a complete design overhaul, this was the ideal opportunity to push performance to the max. Our goal was to take control, focus on performance, be flexible for the future and make it fun to write content for our site. Here’s how we mastered front-end performance for our site. Enjoy!

Design for performance

In our projects, we have daily discussions with designers and product owners about balancing aesthetics and performance. For our own site, this was easy. We believe that a good user experience starts with delivering content as fast as possible. That means performance > aesthetics .

Good content, layout, images, and interactivity are essential for engaging your audience, but each of these elements have impact on page load time and the end-user experience. In every step, we looked at how we could get a nice user experience and design while having minimum impact on performance.

Content first

We want to serve the core content (text with the essential HTML and CSS) to our visitors as fast as possible. Every page should support the primary purpose of the content: get the message across. Enhancements, meaning JavaScript, complete CSS, web fonts, images and analytics are inferior to the core content.

Take control

After defining the standards we set for our ideal site, we concluded that we needed full control over every aspect of the site. We chose to build our own static site generator, including asset pipeline, and host it ourselves.

Static site generator

We’ve written our own static site generator in Node.js . It takes Markdown files with short JSON page meta descriptions to generate the complete site structure with all of its assets. It can also be accompanied by a HTML file for including page-specific JavaScript.

See below a simplified meta description and markdown file for a blog post, used to generate the actual HTML.

The JSON meta description:

And the Markdown file:

Image delivery

The average webpage is a whopping 2406kb of which 1535kb are images . With images taking up such a big part of the average website, it is also one of the best targets for performance wins.

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. WebP images can be substantially smaller than images of other formats: sometimes they are up to 25% smaller than their JPEG counterpart. WebP is overlooked a lot and not often used. At the time of writing, WebP support is limited to Chrome, Opera and Android (still over 50% of our users), but we can degrade gracefully to JPG/PNG.

<picture> element

Using the picture element we can degrade gracefully from WebP to a more widely supported format like JPEG:

We use picturefill by Scott Jehl to polyfill browsers not supporting the <picture> element and to get consistent behaviour across all browsers.

We use the <img> as a fallback for browsers not supporting the <picture> element and/or JavaScript. Using the image’s largest instance makes sure it still looks good in the fallback scenario.

While the image delivery approach was in place, we still had to figure out how to painlessly implement it. I love the picture element for what it can do, but I hate writing the snippet above. Especially if I have to include it while writing content. We don’t want to bother with generating 6 instances of every image, optimising the images and writing <picture> elements in our markdown. So we:

• generate multiple instances of the original images in our build process, both in the input format (JPG, PNG) as in WebP. We use gulp responsive to do so.
• minify the generated images
• write  in our markdown files.
• use custom written Markdown renderers during the build process to compile conventional markdown image declarations to full blown <picture> elements.

SVG animations

We chose a distinct graphic style for our site, in which SVG illustrations play a major role. We did this for several reasons.

• Firstly, SVG’s (vector images) tend to be smaller than bitmap images;
• Secondly SVG’s are responsive by nature and scale perfectly while always staying super crisp. So no need for image generation and <picture> elements;
• Last but not least we can animate and alter them by CSS! A perfect example of designing for performance. All our portfolio pages have a custom made animated SVG that is reused on the overview page. It serves as a recurring style for all our portfolio items making the design consistent, while having very little impact on performance.

Check out this animation and how we can alter it with CSS.

See the Pen Change inline svg styling by De Voorhoede ( @voorhoede ) on CodePen .

Custom web fonts

Before diving in, here’s a short primer on browser behaviour regarding custom web fonts. When the browser comes across a @font-face definition in CSS that points to a font not available on the user’s computer, it will try to download this font file. While the download happens, most browsers don’t display the text using this font. At all. This phenomenon is called the “Flash of Invisible Text” or FOIT. If you know what to look for, you will find it almost everywhere on the web. And if you ask me, it is bad for the end-user experience. It delays the user in reaching their core goal: reading the content.

We can however force the browser to change its behaviour into a “Flash of Unstyled Content” or FOUT. We tell the browser to use an ubiquitous font at first, like Arial or Georgia. Once the custom web font is downloaded it will replace the standard font and re-render all text. If the custom font fails to load, the content is still perfectly readable. While some might consider this a fallback, we see custom fonts as an enhancement. Even without it, the site looks fine and works 100%.

Using custom web fonts can benefit the user experience, as long as you optimise and serve them responsibly.

Font subsetting

Subsetting is by far the quickest win in improving webfont performance. I would recommend it to every web developer using custom fonts. You can go all out with subsetting if you have complete control over the content and know which characters will be displayed. But even just subsetting your font to “Western languages” will have a huge impact on file size. For example, our Noto Regular WOFF font, which is 246KB by default, drops to 31KB when subsetted to Western languages. We used the Font squirrel webfont generator which is really easy to use.

Font face observer

Font face observer by Bram Stein is an awesome helper script for checking whether fonts are loaded. It is agnostic as to how you load your fonts, be it via a webfont service or hosting them yourself. After the font face observer script notifies us that all custom web fonts are loaded, we add a fonts-loaded class to the <html> element. We style our pages accordingly:

Note: For brevity, I did not include the @font-face declaration for Noto in the CSS above.

We also set a cookie to remember that all fonts are loaded, and therefore live in the browser’s cache. We use this cookie for repeating views, which I will explain a bit later.

In the near future we probably do not need Bram Stein’s JavaScript to get this behaviour. The CSS Working Group has proposed a new @font-face descriptor (called font-display ), where the property value controls how a downloadable font renders before it is fully loaded. The CSS statement font-display: swap; would give us the same behaviour as the approach above. Read more on the font-display property .

Lazy load JS and CSS

Generally speaking we have an approach of loading in assets as soon as possible. We eliminate render blocking requests and optimise for the first view, leveraging the browser cache for repeated views.

Lazy load JS

By design, we do not have a lot of JavaScript in our site. For what we do have, and what we intend to use in the future, we developed a JavaScript workflow.

JavaScript in the <head> blocks rendering, and we don’t want that. JavaScript should only enhance the user experience; it is not critical for our visitors. The easy way to fix the render blocking JavaScript is to place the script in the tail of your web page. The downside is that it will only start downloading the script after the complete HTML is downloaded.

An alternative could be to add the script to the head and defer the script execution by adding the defer attribute to the <script> tag. This makes the script non-blocking as the browser downloads it almost immediately, without executing the code until the page is loaded.

There is just one thing left, we don’t use libraries like jQuery and thus our JavaScript depends on vanilla JavaScript features. We only want to load JavaScript in browsers supporting these features (i.e. mustard cutting ). The end result looks like this:

We place this little inline script in the head of our page detecting whether the vanilla JavaScript document.querySelector and window.addEventListener features are supported. If so, we load the script by writing the script tag directly to the page, and use the defer attribute to make it non-blocking.

Lazy load CSS

For the first view the biggest render blocking resource for our site is CSS. Browsers delay page rendering until the full CSS file referenced in the <head> is downloaded and parsed. This behaviour is deliberate, otherwise the browser would need to recalculate layouts and repaint all the time during rendering.

To prevent CSS from render blocking, we need to asynchronously load the CSS file. We use the awesome loadCSS function by the Filament Group . It will give you a callback when the CSS file is loaded, where we set a cookie stating that the CSS is loaded. We use this cookie for repeating views, which I will explain a bit later.

There is one ‘problem’ with loading in CSS asynchronously, in that while the HTML is being rendered really fast it will look like plain HTML with no CSS applied, until the full CSS is downloaded and parsed. This is where critical CSS comes in.

Critical CSS

Critical CSS can be described as the minimum amount of blocking CSS to make a page appear recognisable for the user . We focus on ‘above the fold’ content. Obviously the location of the fold differs greatly between devices, so we make a best guess.

Manually determining this critical CSS is a time consuming process, especially during future style changes. There are several nifty scripts for generating critical CSS in your build process. We used the magnificent critical npm module by Addy Osmani .

See below our homepage rendered with critical CSS and rendered with the full CSS. Notice the fold where below the fold the page is still sort of unstyled.

We host de Voorhoede site ourselves, because we wanted to have control over the server environment. We also wanted to experiment how we could boost performance by changing server configuration. At this time we have an Apache web server and we serve our site over HTTPS.

Configuration

To boost performance and security we did a little research on how to configure the server.

We use H5BP boilerplate Apache configuration , which is a great start for improving performance and security for your Apache web server. They have configurations for other server environments as well.

We turned on GZIP for most of our HTML, CSS and JavaScript. We set caching headers neatly for all our resources. Read about that below in the file level caching section .

Serving your site over HTTPS can have a performance impact for your site. The performance penalty is mainly from setting up the SSL handshake, introducing a lot of latency. But — as always — we can do something about that!

HTTP Strict Transport Security is a HTTP header that lets the server tell the browser that it should only be communicated with using HTTPS. This way it prevents HTTP requests from being redirected to HTTPS. All attempts to access the site using HTTP should automatically be converted. That saves us a roundtrip!

TLS false start allows the client to start sending encrypted data immediately after the first TLS roundtrip. This optimization reduces handshake overhead for new TLS connections to one roundtrip. Once the client knows the encryption key it can begin transmitting application data. The rest of the handshake is spent confirming that nobody has tampered with the handshake records, and can be done in parallel.

TLS session resumption saves us another roundtrip by making sure that if the browser and the server have communicated over TLS in the past, the browser can remember the session identifier and the next time it sets up a connection, that identifier can be reused, saving a round trip.

I sound like a DevOps engineer, but I’m not. I just read some things and watched some videos. I loved Mythbusting HTTPS: Squashing security’s urban legends by Emily Stark from Google I/O 2016.

Use of Cookies

We don’t have a server side language, just a static Apache web server. But an Apache web server can still do server side includes (SSI) and read out cookies. By making smart use of cookies and serving HTML that is partially rewritten by Apache, we can boost front-end performance. Take this example below (our actual code is a little more complex, but boils down to the same ideas):

The Apache server side logic are the comment looking lines starting with <!-- # . Let’s look at this step by step:

• $HTTP_COOKIE!=/css-loaded/ checks if no CSS cache cookie exists yet.
• $HTTP_COOKIE=/.*css-loaded=([^;]+);?.*/ && ${1} != '0d82f.css' checks if the cached CSS version is not the current version.
• If <!-- #if expr="..." --> evaluates to true we assume this is the visitor’s first view.
• For the first view we add a <noscript> tag with a render blocking <link rel="stylesheet"> . We do this, because we will load in the full CSS asynchronously with JavaScript. If JavaScript would be disabled, this would not be possible. This means that as a fallback, we load CSS ‘by the numbers’, ie. in a blocking manner.
• We add an inline script with functions for lazy loading the CSS, an onloadCSS callback and set cookies.
• In the same script we load in the full CSS asynchronously.
• In the onloadCSS callback we set a cookie with the version hash as cookie value.
• After the script we add an inline stylesheet with the critical CSS. This will be render blocking, but it will be very small and prevent the page from being displayed as plain unstyled HTML.
• The <!-- #else --> statement (meaning the css-loaded cookie is present) represents the visitor’s repeating views. Because we can assume to some degree that the CSS file is loaded previously we can leverage browser cache and serve the stylesheet in a blocking manner. It will be served from the cache and load almost instantly.

The same approach is used for loading in fonts asynchronously for the first view, assuming we can serve them from browser cache for repeating views.

File level caching

Since we depend heavily on browser caching for repeating views, we need to make sure we cache properly. Ideally we want to cache assets (CSS, JS, fonts, images) forever, only invalidating the cache when a file actually changes. Cache is invalidated if the request URL is unique. We git tag our site when we release a new version, so the easiest way would be to add a query parameter to request URLs with the code base version, like `https://www.voorhoede.nl/assets/css/main.css?v=1.0.4`. But.

The disadvantage of this approach is that when we would write a new blog post (which is part of our code base, not externally stored in a CMS), cache for all of our assets would be invalidated, while no changes have been made to those assets.

While trying to level up our approach, we stumbled upon gulp-rev and gulp-rev-replace . These scripts helped us to add revisioning per file by appending a content hash to our filenames. This means the request URL only changes when the actual file has changed. Now we have per-file cache invalidation. This makes my heart go boom boom!

If you’ve come this far (awesome!) you probably want to know the result. Testing how performant your site is can be done with tooling like PageSpeed Insights for very practical tips and WebPagetest for extensive network analysis. I think the best way to test your site rendering performance is by watching your page evolve while throttling your connection insanely. That means: throttle in a probably unrealistic manner. In Google Chrome you can throttle your connection (via the inspector > Network tab) and see how requests are slowly being loaded in while your page builds up.

So see here how our homepage loads on a throttled 50KB/s GPRS connection.

Notice how we get the first render at 2.27s on a 50KB/s GPRS network, represented by the first image from the filmstrip and the corresponding yellow line on the waterfall view. The yellow line is drawn right after the HTML has been downloaded. The HTML contains the critical CSS, making sure the page looks usable. All other blocking resources are being lazily loaded, so we can interact with the page while the rest is being downloaded. This is exactly what we wanted!

Another thing to notice is that custom fonts are never loaded on connections this slow. The font face observer automatically takes care of this, but if we wouldn’t load in fonts asynchronously you would be staring at FOIT for a while in most browsers.

The full CSS file is only loaded in after 8 seconds. Conversely, if we’d loaded the full CSS in a blocking manner instead of having critical CSS inline, we would have been staring at a white page for 8 seconds.

If you’re curious how these times compare to other websites with less of a focus on performance, go for it. Load times will go through the roof!

Testing our site against the tools mentioned earlier shows some nice results as well. PageSpeed insights gives us a 100/100 score for mobile performance, how awesome is that?!

When we look at WebPagetest we get the following result:

We can see that our server performs well and that the SpeedIndex for the first view is 693. This means our page is usable after 693ms on a cable connection. Looking good!

We are not done yet and are constantly iterating on our approach. We will focus in the near future on:

• HTTP/2 : It’s here and we are currently experimenting with it. A lot of things described in this article are best practices based on the limitations of HTTP/1.1. In short: HTTP/1.1 dates from 1999 when table layouts and inline styles were super awesome. HTTP/1.1 was never designed for 2.6 MB webpages with 200 requests. To alleviate our poor old protocol’s pains we concatenate JS and CSS, inline critical CSS, use data URL’s for small images, et cetera. Everything to save requests. Since HTTP/2 can run multiple requests in parallel over the same TCP connection, all this concatenation and reducing of requests might even prove to be an antipattern. We will move to HTTP/2 when we are done with running experiments.
• Service Workers : This is a modern browser JavaScript API that is run in the background. It enables a lot of features that were not available for websites before, like offline support, push notifications, background sync and more. We are playing around with Service Workers, but we still need to implement it in our own site. I guarantee you, we will!
• CDN : So, we wanted control and hosted the site ourselves. Yes, yes, and now we want to move to a CDN to get rid of network latency caused by the physical distance between client and server. Although our clients are mostly based in the Netherlands, we want to reach the worldwide front-end community in a way that reflects what we do best: quality, performance, and moving the web forward.

Thanks for reading! Please visit our site to see the end result . Do you have comments or questions? Let us know via Twitter . And if you enjoy building fast websites, why not join us ?

I would love to see a follow-up article with the results of your HTTP/2 tests.

There will be a follow-up! We work in components so we can quite easily split up the concatenated CSS file into multiple component CSS files for example. What I can tell you is that until now we didn’t find any HTTP/2 setup that beat our current HTTP/1 optimised setup described here, which is kind of weird.

If you’re just serving static content. Why use Apache? Nginx is better suited to that kind of a task.

You are absolutely right, we are trying to switch as soon as possible.

I’m in that dilemma for my own site right now, but the problem I’m having is that Nginx’s HTTP/2 module doesn’t support Server Push :\ Until it does, I’m hanging onto Apache 2.4.x.

This is a really solid article. One of the best I’ve read in a while. I feel as if performance is something everyone likes to talk about but few take the steps to improve. Or they’ll focus on back-end only, or front-end only. I like the static site generator aspect (unfortunately I’m in the CMS world so I don’t see ever getting to that point). One question about the static site generator though, I feel like you just re-rolled your own version of Jekyll (or one of the other static site generators). What does your generator do that Jekyll didn’t do for you?

Thanks Jason! In our front-end projects we write components that we reuse and combine into HTML templates. So we have a lot of build tasks ready to use for compiling a static site. We needed some extra ones, e.g. the image generation task and hashing the static assets for instant cache invalidation. But large parts of the build process are reused from other projects. Also we wanted complete control over how we edit content and deliver optimised pages to our visitors. We could do this with an already existing static site generator, but this is our architecture. All of my colleagues can extend the generator quite easily, because they are familiar with the setup. It only does what it needs to do, we iterated during development to this point. So when extending the generator, you don’t have to browse unused cruft. But hey, Jekyll and others are great! Right tool for the job for I guess.

Nice article Declan!

We’ve made a bunch of similar improvs to our site – got score of 97/98 for mob/PC views at PageSpeed Score https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fonedollarclub.com.ua%2Fru%2F

HTTPS/2 is really nice feature. Hope that will help you guys.

We will check WebP integration, thanks for an idea

Thanks Igor! And nice job!

Very exciting article, I’d be interested to see how the web page performs in contrast to your fallback conditions. I often feel that “graceful degradation” is just a kind term for bullying end-users upgrade their client.

I would really like to see your approach to CDN, you mentioned that your goal is to reduce latency and packet loss due to a shorter distance to the POP but will localization be part of this consideration? Do you have any concerns with how this will synchronize with your current approach for file level caching?

Since we technically don’t have static HTML(because of the server side cookie check), we can’t cache HTML. This means we can only serve our static assets over a CDN. So cache invalidation would work the same as it does now(by unique filename) and we would only remove network latency for our static assets. We still want to get rid off all network latency so we are looking into deploying our site to some edge locations, which means our HTML will get served from a more closer location(static assets still over CDN).

What’s your take on the performance degradation caused by SVG memory usage?

As much as I like both SVG’s responsive nature and easy manipulation for both animation or theming purposes, I find that heavy use of SVGs can bog down the rest of a page because more is required to display an SVG than a simple bitmap image.

However, maybe I am the only one that perceives this?

I don’t know if I understand completely what you mean, but since SVG inlined in the HTML are just DOM nodes the DOM can become cluttered and the animation can become janky if your SVG is too complex. This can occur if you render some large network visualisation with relationships between entities for example. This problem boils down to how complicated your SVG is. You can use canvas in that case, since that is only 1 DOM node. Did you encounter that for the animations on our site? Did I answer your question?

Wow, great article great site! Only one question: Why did you choose to use an animated .GIF on the homepage in the hero section, when you are using SVGs on other part of the site?

Hah you got me! We still need to convert that one to SVG, we are working on it.

@Declan 1000+ Awesome article I read ever. Thanks for sharing this wonderful article. It’s a must read article for all.

This is great, and seems to summarize well the breadth and depth of front-end performance techniques. I’m a little surprised, too, that the site’s code is not included as an optimization opportunity. Particularly CSS, which can parse at different speeds depending upon how its factored. Is there insight about this regarding your site that you can share?

I tried to keep the article focused on optimising perceived performance. With this setup the size of your critical CSS, size of your HTML and first byte time will mostly determine how fast you can serve a usable page. I would say that the larger your CSS and JS is the more performance will benefit from this approach. We do minify CSS, JS, even HTML, we don’t use jQuery and use progressive enhancement, we work in components so HTML, CSS and JS are easy to maintain. This all benefits the size of our assets. But again this benefits the total load time and not necessarily the first paint time.

Very nice article. It seems to me when the cookies are used, even when you request a static file (.jpg, .css…) the cookie is also send. When you say you will use CDN server it’s to have a cookieless server to store assets files ?

Will you mix it with the use of “dns-prefetching” ?

Can’t wait to see your futur article on the update.

In one of the comments above I explained that we technically don’t have a static site. We only need to read out the cookies in the HTML, which we don’t serve over a CDN. For the static assets, which we do serve over a CDN, we don’t care about the cookies. I highly recommend dns prefetching when using a CDN.

You should have a look at http://surge.sh as a CDN option. I haven’t used them yet in production, but they seem like a good, low maintenance option.

Thanks for the awesome article. Front-end performance is a topic I’ve been following for a while now and I’m constantly trying to optimize performance as much as possible for my company’s projects.

50 HTML, CSS, and JavaScript Projects with Source Code for Beginners

By Faraz - April 28, 2024

Dive into the world of web development with these 50 beginner-friendly HTML, CSS, and JavaScript projects. Explore source code, step-by-step guides, and practical examples to kickstart your coding journey.

In today's fast-paced digital world, web development is a highly sought-after skill. Whether you're looking to build your own website, enhance your resume, or embark on a new career path, learning HTML, CSS, and JavaScript is a great place to start. To help beginners get a hands-on experience, we've compiled a list of 50 beginner-friendly projects with complete source code. These projects will not only bolster your coding skills but also boost your confidence in creating interactive and visually appealing web pages.

Table of Contents

Introduction to html, css, and javascript.

HTML, CSS, and JavaScript are the three core technologies for building web pages and web applications. HTML (Hypertext Markup Language) is used for structuring web content, CSS (Cascading Style Sheets) is used for styling and layout, and JavaScript adds interactivity and functionality to web pages.

Setting Up Your Development Environment

Before diving into the projects, it's essential to set up your development environment. Make sure you have a code editor like Visual Studio Code or Sublime Text installed. You'll also need a web browser for testing your projects, and it's highly recommended to use Google Chrome with its developer tools.

1. Digital Clock

If you're just starting your journey into web development, creating a digital clock is a fantastic project to get your hands dirty with HTML, CSS, and JavaScript. You'll learn how to display real-time data, format it elegantly, and make it interactive. This project will introduce you to the basics of JavaScript's Date object and how to manipulate the DOM to update the clock's display in real-time.

2. Pulse Search Bar

Creating a pulse search bar is a visually appealing project that combines HTML and CSS. You'll learn how to use CSS animations to create a subtle pulsing effect.

3. Social Media Icons

In this project, you'll explore the world of iconography using HTML and CSS to create a set of beautiful social media icons. This is a great opportunity to learn how to use CSS for styling and positioning elements to achieve the desired look and feel. You can also practice linking these icons to your social media profiles.

4. Drop-Down Menu

A drop-down menu is a fundamental component of web design. By building one from scratch, you'll gain valuable experience in HTML and CSS to create a navigation menu that can expand and collapse as needed. This project lays the foundation for more complex navigation systems in the future.

5. Simple Calculator

Want to add some interactivity to your website? Build a simple calculator using HTML, CSS, and JavaScript. This project will teach you how to capture user input, perform calculations, and display the results on your web page. It's a great way to start working with user interactions and basic JavaScript functions.

6. Login Page

Creating a login page is an essential skill for any web developer. With this project, you'll learn how to design a clean and user-friendly login interface using HTML and CSS. Additionally, you can explore JavaScript for form validation and user authentication in the future.

7. Sign Up Form

Continuing from the login page, designing a sign-up form is another crucial web development skill. You'll delve into form elements, validation techniques, and user-friendly interfaces. This project will expand your HTML and CSS skills while preparing you for more complex forms in the future.

8. Animated Search Box

Elevate your search bar game by creating an animated search box with HTML and CSS. This project will teach you how to make your website more dynamic and engaging, with a search bar that expands and contracts smoothly, providing an improved user experience.

9. Dark/Light Mode Switch

Adding a dark/light mode switch to your website is not only trendy but also functional. With this project, you'll explore how to use HTML, CSS, and JavaScript to allow users to switch between different color themes. It's a great way to learn about user preferences and customization options in web development.

10. Breadcrumb

A breadcrumb navigation trail is essential for guiding users through a website's hierarchy. In this project, you'll learn how to create a breadcrumb trail using HTML and CSS. This will help users easily navigate your website and understand its structure.

11. Carousel Sliders

Creating a carousel slider is a fantastic way to enhance your website's visual appeal. Using HTML and CSS, you can build an interactive image slider that allows users to browse through multiple images or content items.

12. Glitch Effect Text

If you want to add a touch of creativity to your website, consider implementing a glitch effect text. This project involves HTML and CSS to create text that appears to glitch or distort, giving your site a unique and eye-catching aesthetic.

13. Sound Bars

Incorporating soundbars into your website allows you to explore the world of audio visualization.

14. Loaders

Loaders are essential elements to keep users engaged while content is loading. By creating loaders with HTML and CSS, you'll learn how to provide feedback to users and enhance their overall experience on your website.

15. Radio Button

Radio buttons are a fundamental part of form design. In this project, you'll dive into HTML and CSS to create radio button elements and learn how to style them to fit your website's aesthetics. You can also explore JavaScript to make them interactive.

16. Blog Card Grid

Building a blog card grid is a great way to display articles or posts on your website. With HTML and CSS, you'll create an attractive grid layout for showcasing content. This project will teach you responsive design techniques and the art of presenting information effectively.

A well-designed footer can provide important information and links to users. Using HTML and CSS, you can create a stylish and functional footer that complements the overall design of your website. This project will also introduce you to layout concepts for organizing content at the bottom of web pages.

The navigation bar (navbar) is a critical element of web design. With this project, you'll learn how to create a responsive navbar using HTML and CSS. You can also explore JavaScript to add interactive features, such as dropdown menus or smooth scrolling navigation.

19. Sidebar

Sidebars are a common feature in many websites, providing additional navigation or information. Using HTML, CSS, and JavaScript, you can create a sidebar that complements your website's layout and functionality. This project will enhance your skills in layout design and organization.

20. Sort HTML Table

Learn how to make your website more user-friendly by allowing users to sort data in an HTML table. With HTML, CSS, and JavaScript, you'll create a sortable table that empowers users to arrange data according to their preferences, enhancing the usability of your site.

21. Switch Button

Adding a switch button to your website can be a great way to give users control over specific features or settings. Using HTML and CSS, you can create a customizable switch button that toggles between different states.

22. Tab Bar

Tabs are a common UI pattern for organizing content. With HTML and CSS, you can build a tab bar that allows users to switch between different sections or categories of information on your website.

23. Submit Button

Designing an attractive and responsive submit button is crucial for web forms. This project focuses on HTML and CSS, teaching you how to style submit buttons effectively and ensure they look appealing across various devices and browsers.

24. To Do List

A to-do list is a practical project that introduces you to HTML and CSS for creating a dynamic task management system. You'll learn how to add, edit, and remove tasks, providing valuable experience in handling user data and interactions.

25. Hamburger Menu

Hamburger menus are a popular choice for mobile navigation. Using HTML, CSS, and JavaScript, you can create a responsive hamburger menu that expands to reveal navigation options when clicked. This project will improve your skills in designing mobile-friendly interfaces.

26. Accordion

Accordions are a great way to present information in a compact and organized manner. With HTML, CSS, and JavaScript, you can build an accordion that expands and collapses sections to display content when users interact with it.

27. Coffee Landing Page

Creating a landing page for a coffee shop is an exciting project that combines your HTML and CSS skills to design an appealing and informative page.

28. Login and Sign-Up Form

Expanding on the login and sign-up form projects, you can create a combined login and registration system. This project allows users to choose between logging in or signing up, streamlining the user experience on your website.

29. Card Design

Card design is a versatile skill in web development. With HTML and CSS, you can create stylish cards for showcasing various types of content, such as articles, products, or profiles. This project will sharpen your abilities in layout and design.

30. Glow Button

Glowing buttons can add a touch of interactivity and elegance to your website. Using HTML and CSS, you can create buttons that illuminate or change color when hovered over.

31. Modal Popup Window

Modal popup windows are commonly used for displaying additional information or user interactions without navigating away from the current page. Using HTML and CSS, you can create modal windows that appear when triggered and can be closed by users.

32. Split Text

Splitting text into creative and visually appealing elements is a fascinating design technique. With HTML and CSS, you can split text into individual characters, words, or lines and animate them in unique ways.

33. Product Showcase Carousel

Showcasing products effectively is crucial for e-commerce websites. Using HTML, CSS, and JavaScript, you can create a product showcase carousel that allows users to browse through featured items. This project will teach you how to design and implement interactive product displays.

34. Drag and Drop File

Implementing drag-and-drop functionality can greatly enhance user experiences on your website. With HTML, CSS, and JavaScript, you can create a file upload interface that allows users to drag and drop files for uploading. This project delves into handling file input and user interactions.

35. 404 Not Found Page

Even error pages can be creatively designed. With HTML and CSS, you can create a custom 404 Not Found page that not only informs users of a broken link but also keeps them engaged with your website's branding and navigation options. This project demonstrates your ability to design user-friendly error pages.

36. Animated Product Page

Taking your product pages to the next level, you can create an animated product page that provides detailed information and visualizations of products. Using HTML and CSS, this project enhances your skills in product presentation and user interaction.

37. Netflix Clone

Creating a Netflix clone is a challenging but rewarding project for web developers. While it may involve more advanced concepts, it offers a comprehensive learning experience in HTML and CSS.

38. Google Clone

Building a Google clone is another ambitious project that covers a wide range of web development skills. You'll create a simplified version of the Google search engine.

39. Dropdown Menu

Expanding on the drop-down menu project, you can explore more advanced dropdown menu designs with CSS and JavaScript. This project allows you to create multi-level dropdowns, mega menus, or dynamic content-driven menus, enhancing your navigation menu development skills.

40. Music Player

Developing a music player is a captivating project that combines HTML, CSS, and JavaScript to create an interactive audio player. You'll learn how to play, pause, skip tracks, and display album art. This project offers hands-on experience with media elements and user interface design for music applications.

41. Profile Card

Designing profile cards is a useful skill for displaying user information on social media, forums, or networking sites. With HTML and CSS, you can create stylish and customizable profile cards. This project will refine your layout and styling abilities.

42. Portfolio Template

Building a portfolio website is a fantastic way to showcase your work as a web developer. With HTML, CSS, and JavaScript, you can create a personalized portfolio template to display your projects, skills, and contact information. This project will serve as a reflection of your abilities and a valuable asset for your career.

43. Copy Text to Clipboard

Implementing a "Copy to Clipboard" feature on your website can greatly enhance user convenience. Using HTML, CSS, and JavaScript, you can create a button or icon that allows users to easily copy text or code snippets to their clipboard. This project delves into the clipboard API and user interface design for enhanced usability.

44. Hotel Landing Page

Creating a hotel landing page is an engaging project that combines your HTML, CSS, and JavaScript skills to design an attractive and informative page for a hotel or resort. You can include details about rooms, amenities, booking options, and more, enhancing your web design and layout abilities.

45. Ice Cream Shop Landing Page

Designing a landing page for an ice cream shop is a sweet and visually appealing project. Using HTML, CSS, and JavaScript, you can create an enticing page that showcases delicious ice cream flavors, specials, and location information. This project encourages creativity in web design.

46. Blog Cards with Bootstrap

Bootstrap is a popular front-end framework that simplifies web development. With this project, you can create stylish blog cards using Bootstrap's components and CSS. It's a great opportunity to learn how to leverage frameworks to streamline your development process.

47. Pizza Shop Website

Building a website for a pizza shop is a fun project that combines your HTML, CSS, and JavaScript skills to create a mouthwatering online presence. You can include menu items, ordering options, delivery information, and more, honing your web development abilities.

48. Password Validation Form

Enhance your form-building skills by creating a password validation form. With HTML, CSS, and JavaScript, you can design a form that enforces strong password requirements and provides real-time feedback to users. This project reinforces the importance of data validation and user experience.

49. Text to Voice

Adding text-to-voice functionality to your website can make it more accessible and user-friendly. Using HTML, CSS, and JavaScript, you can create a feature that converts text content into speech, benefiting users with visual impairments or those who prefer audio content. This project explores the Web Speech API and inclusive design principles.

50. Circular Grid

A circular grid with an amazing hover effect is a design element that consists of a grid of circular elements arranged in a circular pattern, with some sort of hover effect applied to each element. The hover effect could be something like a change in color, a change in size, or the display of additional content when the element has hovered over with the mouse.

Bonus: Pricing Table

A pricing table is an essential element of any website that offers products or services for sale. It provides a clear and concise comparison of the different options available to the customer, allowing them to make an informed decision about which option best suits their needs.

In conclusion, embarking on a journey of web development through these 50 HTML, CSS, and JavaScript projects for beginners has been an enriching experience. Each project has provided valuable insights and practical skills, equipping you with a versatile toolkit for creating dynamic and visually appealing websites and web applications.

Starting with projects like the digital clock and pulse search bar, you gained a solid foundation in the core technologies of the web. As you progressed through more complex tasks such as building a Netflix clone or a Google clone, you honed your skills in layout design, user interfaces, and even API integration.

From interactive forms like login pages and sign-up forms to creative elements like glitch text effects and sound bars, you've explored the diverse facets of web development, each project contributing to your growth as a developer.

Additionally, you've learned the significance of responsive design, accessibility, and user experience through projects like dark/light mode switches, copy-to-clipboard functionality, and text-to-voice conversion.

Remember that web development is dynamic, and your projects are stepping stones to even greater proficiency. Whether you're building personal projects, contributing to open-source initiatives, or pursuing a career in web development, the knowledge and experience gained from these projects will continue to serve you well.

As you move forward, continue exploring, experimenting, and challenging yourself with new projects and technologies. The world of web development is ever-evolving, and your skills will grow with it. Embrace the excitement of creating, innovating, and making the web a better place, one project at a time.

That’s a wrap!

I hope you enjoyed this article

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks! Faraz 😊

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox, latest post.

Creating a Responsive Bootstrap Dashboard: Source Code Included

Learn how to design, customize, and implement interactive Bootstrap dashboards with our comprehensive guide. Source code included for easy development.

Create Your Own Bubble Shooter Game with HTML and JavaScript

May 01, 2024

Build Your Own Nixie Tube Clock using HTML, CSS, and JavaScript (Source Code)

April 20, 2024

Create a Responsive Popup Contact Form: HTML, CSS, JavaScript Tutorial

April 17, 2024

Create a Responsive Customer Review Using HTML and CSS

April 14, 2024

How to Create a Scroll Down Button: HTML, CSS, JavaScript Tutorial

Learn to add a sleek scroll down button to your website using HTML, CSS, and JavaScript. Step-by-step guide with code examples.

How to Create a Trending Animated Button Using HTML and CSS

March 15, 2024

Create Interactive Booking Button with mask-image using HTML and CSS (Source Code)

March 10, 2024

Create Shimmering Effect Button: HTML & CSS Tutorial (Source Code)

March 07, 2024

How to Create a Liquid Button with HTML, CSS, and JavaScript (Source Code)

March 01, 2024

Learn how to develop a bubble shooter game using HTML and JavaScript with our easy-to-follow tutorial. Perfect for beginners in game development.

Build a Number Guessing Game using HTML, CSS, and JavaScript | Source Code

April 01, 2024

Building a Fruit Slicer Game with HTML, CSS, and JavaScript (Source Code)

December 25, 2023

Create Connect Four Game Using HTML, CSS, and JavaScript (Source Code)

December 07, 2023

Creating a Candy Crush Clone: HTML, CSS, and JavaScript Tutorial (Source Code)

November 17, 2023

Create Image Color Extractor Tool using HTML, CSS, JavaScript, and Vibrant.js

Master the art of color picking with Vibrant.js. This tutorial guides you through building a custom color extractor tool using HTML, CSS, and JavaScript.

Build a Responsive Screen Distance Measure with HTML, CSS, and JavaScript

January 04, 2024

Crafting Custom Alarm and Clock Interfaces using HTML, CSS, and JavaScript

November 30, 2023

Detect User's Browser, Screen Resolution, OS, and More with JavaScript using UAParser.js Library

October 30, 2023

URL Keeper with HTML, CSS, and JavaScript (Source Code)

October 26, 2023

Creating a Responsive Footer with Tailwind CSS (Source Code)

Learn how to design a modern footer for your website using Tailwind CSS with our detailed tutorial. Perfect for beginners in web development.

Crafting a Responsive HTML and CSS Footer (Source Code)

November 11, 2023

Create an Animated Footer with HTML and CSS (Source Code)

October 17, 2023

Bootstrap Footer Template for Every Website Style

March 08, 2023

How to Create a Responsive Footer for Your Website with Bootstrap 5

August 19, 2022

HTML & CSS I

HTML & CSS are languages used to build and design the appearances of your websites. Let's learn the fundamentals of web programming whilst actually building a web page.

Course Overview

• 1. Getting Started with HTML
• 2. Getting Started with CSS
• 3. The Basic Layout
• 4. The Header
• 5. The Footer
• 6. The Contents

Start the lesson from the initial state. Warning: your code will be deleted.

Review the lesson without resetting your code.

This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML. Go back

Welcome to Learn HTML!

This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.

Overview of HTML

A brief introduction to the key concepts in HTML.

Document structure

Learn how to structure your HTML documents with a solid foundation.

How to use meta tags to provide information about your documents.

Semantic HTML

Using the correct HTML elements to describe your document content.

Headings and sections

How to correctly use sectioning elements to give meaning to your content.

Learn about the different global attributes along with attributes specific to particular HTML elements.

Text basics

How to format text using HTML.

Everything you need to know about links.

Lists and other ways of grouping your content.

Navigation is a key element of any site of application, and it starts with HTML.

Understanding how to use tables to mark up tabular data.

An overview of forms in HTML.

An overview of images in HTML.

Audio and Video

Discover how to work with HTML media such as audio and video.

Template, slot, and shadow

An explanation of template, slot, and shadow.

Learn how HTML information can be exposed and manipulated using JavaScript.

How to manage focus order in your HTML documents.

Other inline text elements

An introduction to the range of elements used to mark-up text.

Details and summary

Discover how the very useful details and summary elements work, and where to use them.

The element is a useful element for representing any kind of dialog in HTML, find out how it works.

Conclusion and next steps

Wrapping up with some further resources.

JavaScript disabled. A lot of the features of the site won't work. Find out how to turn on JavaScript  HERE .

• Quick Reference
• Case Studies

Navigation Bar S2C Home  «  Navigation Bar

One of the most important areas of website design is allowing users easy navigation to the other content on our site. In this lesson we create a navigation bar for our homepage for this purpose. Using the relevant section of the proposal and the Fine Fancy Foods Layout Diagram we can see what the client wants with regards to this part of the site. With this information acquired we can create the navigation bar, using CSS and HTML.

Fine Fancy Food's Website Proposal Revisited

Areas that affect the navigation bar are highlighted in red.

Deciphering our highlighted text

Ok, let's go through our highlighted text and see what we can learn from the website proposal with regards to our navigation bar.

Under the banner we would like a navigation bar that allows our users to jump to any of our cookery sites. The sites are:.

There is no mention of placement here so lets revisit the diagram Fine Fancy Foods sent us.

Creating Our Layout

Well from the diagram the navigation bar sits under the banner and the links seem to be evenly spaced.

Reopen up the file with Notepad we updated in Lesson 3: Website Banner for our global CSS.

You saved the file to your computer in the C:\_CaseStudy folder as global.css

Copy and paste the following code into the reopened file, overwriting the existing #nav style.

Save the file in the C:\_CaseStudy folder and close the Notepad.

Reviewing The CSS

We styled the #nav division with CSS properties you should be familiar with by now. We then style the unordered list so no bullet points appear. After this style the list items with a background color of royal blue (#4169e1) and float the items left. As we are using a 960 grid and we have six list items we can make each list 160 pixels wide to full the entire width of the screen (160x6 = 960). Lastly we style the links and set a new colour for when the mouse hovers over a link.

Creating Our HTML

Reopen up the file with Notepad we updated in Lesson 3: Website Banner .

You saved the file to your computer in the C:\_CaseStudy folder as index.html

Copy and paste the following code into the reopened file, between the opening < div id="nav" > and closing </ div > element.

Viewing Our Saved File

From the C:\_CaseStudy folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

Reviewing The Code

The HTML is simply an unordered list and we did most of the work when we styled the tags with CSS. Just make sure you understand the CSS and HTML we used before going on to the next lesson.

Lesson 4 Complete

In this lesson we have reviewed the proposal and retrieved information to create a navigation bar for the site as requested by the client.

Related Tutorials

HTML Basic Tutorials - Lesson 6 - Ordered and Unordered Lists

HTML Basic Tutorials - Lesson 8 - Links

HTML Intermediate Tutorials - Lesson 2 - HTML Structure - Layout

CSS Basic Tutorials - Lesson 5 - Styling Text

CSS Basic Tutorials - Lesson 8 - Padding & Margins

CSS Basic Tutorials - Lesson 9 - Borders

CSS Intermediate Tutorials - Lesson 1 - Backgrounds

CSS Intermediate Tutorials - Lesson 2 - A Final Look At The Box Model

CSS Intermediate Tutorials - Lesson 7 - Positioning

CSS Intermediate Tutorials - Lesson 8 - Display

CSS Advanced Tutorials - Lesson 3 - Styling Lists

What's Next?

In the next lesson we extract the information from the proposal that is relevant to the main content.

Java Case Study

Servlets/jsp case study, html/css case study, website proposal, page layout, website banner, navigation bar, main content, left sidebar, right sidebar, case study summary, javascript/jquery case study.

Server and Client Tutorials