Habdul Hazeez - Mar 26 '20 - The project is live on https://ziizium.github.io/aliceandbob/ and the code is on GitHub:
ziizium / aliceandbob
A fictional site created as the final project for a series of articles about Web development
Alice & Bob is a fictional design studio created as the final project for a series of articles about Web development on ThePracticalDEV
Tools used
The site is coded in HTML and CSS. All images are freely usable images from:
Icons used on the homepage are from iconfinder and social media icons are from Font Awesome.
Other projects
The second design of my personal website is a modified version of this project.
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.
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.
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.
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.
From the image above you'll notice the sketch is for three displays:
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 HTML and CSS.
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:
Have a look at the source code of index.html between line 1 and line 40 you'll see the following:
<!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™</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:
en-GB on line 2
all.min.css, this file is actually the CSS file of Font Awesome
Between line 42 and line 46 you'll come across the following snippet:
<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 between line 312 and line 320:
.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 we added a background image then on line 315 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:
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).
On line 318 we also provide a background color for browsers that don't support the linear-gradient() property used on line 319
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 and line 206) and from tablet view to desktop view the images are arranged using CSS Grid.
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 and line 231:
@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 is self-explanatory. If you find anything confusing kindly let me know in the comments section.
The code snippets between between line 1 and line 40 is the same for all pages, the only difference in web-design.html is the media card:
The CSS code responsible for this can be found in styles.css between line 372 and line 410:
.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:
max-width propertyCatamaran-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 next thing is the font used — Catamaran-Medium, this font was downloaded from Google fonts. 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-familysrcfont-weightfont-styleI 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 and line 105 of styles.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.
.hero__container {
font-family: "Catamaran";
color: #ffffff;
width: 50%;
margin: 0 auto;
padding: 1.2em;
}
The graphics-design.html file is almost a replica of 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 of graphics-design.html).
The media cards are floated starting at a breaking point of 35em and at another breakpoint the layout breaks.
The layout breaks due to the behavior floated element, if you need a refresher on this please refer to the post on CSS Floats. The solution to keeping this layout is to use a clearfix. The job of the clearfix is to insert an element in the DOM that will keep the page together. You will find this at the end of styles.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. 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 its global support stands at 85.6%.
The code snippet in 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 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.
<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 onwards.
.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.
I validated the HTML codes using the validator by W3C and also ran the project through the following accessibility tools to ensure that the project is accessible:
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!.
