Series final project
Tags: beginners, css, html
Published: 2020-03-26 23:41:34

---
title: Series final project
published: true
description: The final project for the series of articles on Web Development
tags: beginners, css, html
series: FrontEnd Development Zero to Hero
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eok0binxqlf3bk7rz2qh.png
---

> The project is live on https://ziizium.github.io/aliceandbob/ and the code is on GitHub:

> {% github ziizium/aliceandbob %}

Welcome, this article is all about the development process of the _final project_ from _design_ to _implementation_. We'll also take a close look at some important parts of the code (both HTML and CSS) and the impact they have on _web accessibility_ and _usability_.

Let's begin.

<hr>

__Every development project starts with an idea or a need to solve a problem__. In our case, the need is to create a project that will showcase most of what we've learned in the entirety of this series of articles. I tried my best to come up with a fictional concept and I ended up creating a _fictional web design company_ named [Alice & Bob Design studio](https://ziizium.github.io/aliceandbob/).

_Alice_ and _Bob_ are two fictional characters used in science specifically _cryptography_ when explaining concepts like _public key cryptography_ and _secure communications_ between two parties. It was the only name that popped into my head. Just as the saying goes: There are two difficult things in _computer science_ which are: _naming things_ and _cache invalidation_.

##__First steps__
Since we are designing a website (or any app you might think of), the first thing to do is to sketch (or draw) the interface using your favorite tools. I decide to use _pen_ and _paper_ in order to keep things simple.

![A sample sketch of a user interface showing the mobile, tablet and desktop view](https://dev-to-uploads.s3.amazonaws.com/i/owk1ucvry7sd2nm4edjd.jpg)<figcaption>A user interface sketch</figcaption>

From the image above you'll notice the sketch is for three displays:

* Mobile
* Tablet
* Desktop
 
You should do this for all interface in your application and while at that you should take _accessibility_ and _usability_ into every design decision. It's not that hard but it's about putting yourself in your user's shoes.

When you are through with the sketches the next step is to convert them to code using <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr>.

##__Converting sketches to code__
From your sketches, you'll know the section that's going to be the _header_, the _main content area_, _footer_, and other sections. When you open the project on a desktop browser you'll get a view similar to the image below:

![The homepage of Alice and Bob fictional design studio](https://dev-to-uploads.s3.amazonaws.com/i/qfalqqjyrlasiygcykf8.png)<figcaption>Homepage of the project</figcaption>

Have a look at the source code of [index.html](https://github.com/ziizium/aliceandbob/blob/master/index.html) between [line 1](https://github.com/ziizium/aliceandbob/blob/master/index.html#L1) and [line 40](https://github.com/ziizium/aliceandbob/blob/master/index.html#L40) you'll see the following:

```html
<!DOCTYPE html>
<html lang="en-GB">
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
	<meta name="author" content="Habdul Hazeez, ziizium"/>
	<title>Alice & Bob Design Studio</title>
	<link rel="stylesheet" href="css/all.min.css">
	<link rel="stylesheet" href="css/styles.css">
</head>
<body>
	<div id="skip">
		<a href="#content">Skip to main content</a>
	</div>
	
	<div class="top">
		<header class="header">
			<a href="index.html">
				<h1 class="header__name">Alice & Bob&trade;</h1>
			</a>
		</header>

		<nav class="navigation">
			<ul class="navigation__menu">
				<li class="navigation__item">
					<a href="web-design.html" class="navigation__link">Web Design</a>
				</li>
				<li class="navigation__item">
					<a href="graphics-design.html" class="navigation__link">Graphics Design</a>
				</li>
				<li class="navigation__item">
					<a href="contact.html" class="navigation__link">Contact Us</a>
				</li>
				<li class="navigation__item">
					<a href="blog.html" class="navigation__link">Our Blog</a>
				</li>
			</ul>
		</nav>
	</div>
```

From the snippet above you'll observe the following:

* The language of the document is specified as `en-GB` on [line 2](https://github.com/ziizium/aliceandbob/blob/master/index.html#L2)
* The _charset_ of the document is set to [UTF-8](https://en.wikipedia.org/wiki/UTF-8) on [line 4](https://github.com/ziizium/aliceandbob/blob/master/index.html#L4)
* [line 5](https://github.com/ziizium/aliceandbob/blob/master/index.html#L5) to [line 8](https://github.com/ziizium/aliceandbob/blob/master/index.html#L8) consists of _meta_ tags that are meant for the browser and will not be displayed on-page.
* [line 9](https://github.com/ziizium/aliceandbob/blob/master/index.html#L9) and [line 10](https://github.com/ziizium/aliceandbob/blob/master/index.html#L10) links to the CSS file and a file named `all.min.css`, this file is actually the CSS file of [Font Awesome](https://fontawesome.com)
* [line 13](https://github.com/ziizium/aliceandbob/blob/master/index.html#L13) to [line 15](https://github.com/ziizium/aliceandbob/blob/master/index.html#L15) is used as a _[skip to content](https://fae.disability.illinois.edu/rulesets/BYPASS_1/)_ that will enable keyboard user to skip the _header_ and _aside_ and jump to the page content
* The remaining snippets are structural element and you'll notice we are using __BEM__ [CSS Naming convention](https://dev.to/ziizium/css-naming-conventions-5gd6)

Between [line 42](https://github.com/ziizium/aliceandbob/blob/master/index.html#L42) and [line 46](https://github.com/ziizium/aliceandbob/blob/master/index.html#L46) you'll come across the following snippet:

```html
<aside id="hero" class="hero home-page">
	<div class="hero__container">
	    <p class="hero__text">We make things with code</p>
	</div>
</aside>
```

This is the _hero_ section of the page that acts like a _banner_. On the homepage and on each page of the site, you will realize it has a _background image_, this is possible thanks to CSS `background-image` property. Take a look at the following in [styles.css](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css) between [line 312](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L312) and [line 320](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L320):

```css
.hero.home-page {
    background-image: url("../images/homepage_hero.jpg");
    background-position: 30% 50%;
    background-color: #1a2340;
}
.hero.home-page .hero__container {
    background-color: #1a2340;
    background-image: linear-gradient(to right, #1a2340, #06162f);
}
```
On [line 313](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L313) we added a _background image_ then on [line 315](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L315) we added a _background color_, Why? The reason is simple, before the image downloads we don't want the user to see a blank background as if nothing exists in that place then all of a sudden the image downloads and they might be surprised where the image came from.

Even when the image fails to download, the user will still see the _background color_. Take a look at the image below:

![A section of a page rendered with a background color when the background image fails to download](https://dev-to-uploads.s3.amazonaws.com/i/hsfac21tdv6b737eoor0.png)<figcaption>Background image fails to download</figcaption>

__If you are on a fast internet connection you might not notice this__, but if you want to see this you should open the _Developer tools_ in your browser, navigate to the __Network tab__ and throttle the connection to _Regular 2G_ or _Good 2G_ then _hard reload_ the page (`Ctrl + Shift + R` on Windows Operating System).  

![An image of Firefox browser opened with the Developer tools focused on the network tab and the connection speed throttled to Good 2G](https://dev-to-uploads.s3.amazonaws.com/i/33j952vnpp7ymym2l3ac.PNG)<figcaption>Network tab of Firefox developer tools</figcaption>

On [line 318](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L318) we also provide a _background color_ for browsers that don't support the `linear-gradient()` property used on [line 319](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L319)

The next thing I will like to mention on the home page is the layout of the images. On mobile display, the images are stacked on each other (check between [line 188](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L188) and [line 206](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L206)) and from _tablet view_ to _desktop view_ the images are arranged using [CSS Grid](https://dev.to/ziizium/css-grid-part-1-3f57).

The images are located inside a `<div>` container with a `.image-container` class. The first two images are placed on the first row on two different columns and the last image is placed on the second row spanning two columns, the CSS code is between [line 215](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L215) and [line 231](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L231):

```css
@media screen and (min-width: 35em) {
	.image-container {
		display: grid;
		grid-template-areas: "h1 h2" "h3 h4";
	}

	/**
	  * The js logo is made to span 3 columns therefore
	  * it will be at the center of the grid and the
	  * width reduced to 45%
	  */
	figure:nth-child(3) {
		grid-row: 2;
		grid-column: 1/3;
		width: 45%;
	}
}
```

The remaining code of [index.html](https://github.com/ziizium/aliceandbob/blob/master/index.html) is self-explanatory. __If you find anything confusing kindly let me know in the comments section__.

The code snippets between between [line 1](https://github.com/ziizium/aliceandbob/blob/master/index.html#L1) and [line 40](https://github.com/ziizium/aliceandbob/blob/master/index.html#L40) is the same for all pages, the only difference in [web-design.html](https://github.com/ziizium/aliceandbob/blob/master/web-design.html) is the media card:

![Media cards showing of websites](https://dev-to-uploads.s3.amazonaws.com/i/lnw5bzddzpknsv9291zz.png)<figcaption>Media cards</figcaption>

The CSS code responsible for this can be found in [styles.css](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css) between [line 372](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L372) and [line 410](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L410):

```css
.media-card {
    background-color: #fff;
    border: 1px solid hsl(0, 0%, 85%);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
    max-width: 18.75em;
    margin: 2em auto;
}

@media screen and (min-width: 35em) {
    .media-card {
	  width: 40%;
	  float: left;
	  margin-right: 2em;
    }
}

.media-card__image {
    display: block;
    width: 100%;
    height: auto;
}

.media-card__content {
    padding: 1rem;
}

.media-card__title {
    font-size: 1.25rem;
    color: rgba(0,0,0,0.8);
}

.media-card__body {
    font-size: 1rem;
    color: rgba(0,0,0,0.75);
    line-height: 1.5;
    font-family: "Catamaran-Medium";
}
```

There are two things that I would like to point out in the snippet above which are:

* The `max-width` property
* The font used `Catamaran-Medium`

When you take a closer look at the _media cards_ you'll realize they have a specific width and irrespective of the viewport the _media card_ is always visible on the screen. The `max-width` property is responsible for this behavior.

As the property name implies and from the CSS rules the media card will only occupy a maximum width of `18.75em` equivalent to `300px` (assuming the browser default font size is `16px`).

`18.75em` is a relative unit and its `px` value equivalent will always be calculated based on the user's viewport size. To understand what I am saying check out the image below and take note of the highlighted `width` property in the _Developer Tools_ when the viewport is scaled to a mobile device (first image) and when it's scaled to an iPad view (second image).

![The effect of the max-width property as shown in Firefox developer tools when the computed browser styles are displayed and the device viewport is scaled to mobile view](https://dev-to-uploads.s3.amazonaws.com/i/olcvd4bwbspm6ipx3v3i.PNG)<figcaption>The computed width on mobile view</figcaption>

![The effect of the max-width property as shown in Firefox developer tools when the computed browser styles are displayed and the device viewport is scaled to tablet view](https://dev-to-uploads.s3.amazonaws.com/i/r49apjzzx1sxnyjdg63r.PNG)<figcaption>The computed width on tablet view</figcaption>

The next thing is the font used &mdash; `Catamaran-Medium`, this font was downloaded from [Google fonts](https://fonts.google.com). When you download a font file and you'll want to use it in your CSS file there are certain steps to follow, let's explain the process.

Fonts downloaded from Google fonts come packaged in a `zip` archive and you will have to extract it to your project folder before you can reference them in your CSS files. After extraction, you will find the font _license_ and the font files. Depending on the font, the files will be in varying _styles_ like _Regular_, _Bold_, _Italic_ with extensions like `ttf` (_true type font_) and `woff`(_web font file_).

Individual font files can have a name in the following format:

* `fontname-styles` e.g `Catamaran-Bold`

In your CSS files, you will need the `@font-face {}` property. Which accepts properties like:

* `font-family`
* `src`
* `font-weight`
* `font-style`

I am pretty sure if you've followed this series you will be familiar with the properties mentioned above except `src`. The `src` accepts a `url()` function and the `format` of the file. The `url` will point to the location of the font file(s) in your project folder and the `format` will specify the type of font (_truetype_ or _woff_).

The following snippet is between [line 76](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L76) and [line 105](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L105) of [styles.css](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css):

```css
@font-face {
    font-family: "Catamaran";
    src: url('../fonts/Catamaran/Catamaran-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Catamaran Bold */
@font-face {
    font-family: "Catamaran-Bold";
    src: url('../fonts/Catamaran/Catamaran-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Catamaran Medium */
@font-face {
    font-family: "Catamaran-Medium";
    src: url('../fonts/Catamaran/Catamaran-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Dancing Script bold */
@font-face {
    font-family: "DancingScript";
    src: url('../fonts/Dancing_Script/static/DancingScript-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}
```

Now that the font is imported you can specify it as the `font-family` on your chosen elements.

```css
.hero__container {
    font-family: "Catamaran";
    color: #ffffff;
    width: 50%;
    margin: 0 auto;
    padding: 1.2em;
}
```
The [graphics-design.html](https://github.com/ziizium/aliceandbob/blob/master/graphics-design.html) file is almost a replica of [web-design.html](https://github.com/ziizium/aliceandbob/blob/master/web-design.html) but there is something I would like us to discuss. When you take a look at both files you will notice that the `div` containing the _media card_ images us actually in a `section` element which in turn is inside a `<div>` element with a class of `clearfix` (check [line 53](https://github.com/ziizium/aliceandbob/blob/master/graphic-design.html#L53) of [graphics-design.html](https://github.com/ziizium/aliceandbob/blob/master/graphic-design.html)).

The _media cards_ are floated starting at a breaking point of `35em` and at another breakpoint the layout breaks.

![The layout breaks at a certain breakpoint](https://dev-to-uploads.s3.amazonaws.com/i/yehm1lv02ebi5wqqyjhh.png)<figcaption>A broken layout</figcaption>

The layout breaks due to the behavior floated element, if you need a refresher on this please [refer to the post on CSS Floats](https://dev.to/ziizium/css-floats-309c). The solution to keeping this layout is to use a `clearfix`. The job of the `clearfix` is to insert an element in the [DOM](https://dev.to/ziizium/the-document-object-model-3n8o) that will keep the page together. You will find this at the end of [styles.css](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css).

```css
.clearfix::before,
.clearfix::after {
    display: table;
    content: " ";
}
.clearfix::after {
    clear: both;
}
```

For more about the `clearfix` read [Clearfix: A Lesson in Web Development Evolution](https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/). Another solution to contain the floats is to use `display: flow-root` but at the time of writing and based on [data from Can I use](https://caniuse.com/#search=flow-root) its global support stands at `85.6%`.

The code snippet in [contact.html](https://github.com/ziizium/aliceandbob/blob/master/contact.html) is quite straight forward and the only thing that might be new to you is the `address` element used for addresses.

The [blog.html](https://github.com/ziizium/aliceandbob/blob/master/blog.html) is also straight to the point.

The _footer_ is the most common element for all files and contains _social media icons_ but when you take a look at the html file you will notice some `<span>` element with a class of `visuallyhidden`.

```html
<ul class="footer__list">
    <li class="footer__item social">
        <a class="footer__link" href="#"><em class="fab fa-facebook"><span class="visuallyhidden">Alice and Bob Facebook</span></em></a>
    </li>
    <li class="footer__item social">
        <a class="footer__link" href="#"><em class="fab fa-twitter"><span class="visuallyhidden">Alice and Bob Twitter</span></em></a>
    </li>
    <li class="footer__item social">
        <a class="footer__link" href="#"><em class="fab fa-instagram"><span class="visuallyhidden">Alice and Bob Instagram</span></em></a>
    </li>
</ul>
```

The `visuallyhidden` class will hide this element from _sighted_ users but at the sam time available for _screen readers_. The corresponding CSS can bee found at [line 525](https://github.com/ziizium/aliceandbob/blob/master/css/styles.css#L525) onwards.

```css
.visuallyhidden { 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height: 1px;
    width: 1px; 
    margin: -1px;
    padding: 0;
    border: 0; 
}
```

What we've talked about so far are the important parts of the project. _Please take a look at the code_, _read the comments_, _take the code part_.

##__Accessibility testing__

I validated the HTML codes using the [validator by W3C](validator.w3.org/) and also ran the project through the following accessibility tools to ensure that the project is accessible:

* Firefox accessibility tools
* [aXe accessibility checker](https://www.deque.com/axe/)
* [WAVE](https://wave.webaim.org/)

And all tests were encouraging.

The code is not perfect but it works and I did my best to make sure it's _accessible_ and _usable_ but I am pretty sure you can do better when you dig into the codebase. __If you have any questions please let me know in the comments section__.

I'll see you in the next and hopefully _final article_ in the series. Until then, _Have fun!_.