How To: Code Our Current Website

In this tutorial, I am going to show you how to code our current website from start to finish. Visit the website here: http://stwebdesigner.github.io/.

I have split this tutorial into four main parts. These part are:

  • Part 1: Coding the website
  • Part 2: Coding the modal window
  • Part 3: Making it Responsive
  • Part 4: Adding Animations

My folder structure is:

  • index.html
  • css
  • images
  • js

Part 1: Coding the website

The first stage is to code the basic HTML structure. In the head of the document, I have added metadata and links to the CSS files.

<!DOCTYPE html>
<html lang="en">
<head>
<title>STWebDesigner</title>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="css/main.css" type="text/css"/>
<link rel="stylesheet" href="css/animate.css">
</head>
  <body>
  </body>
</html>

Next, I’m going to code the main part of the website. This will involve both HTML and CSS.

HTML Code:

<div class=”container”>
<h1 class="hide">STWebDesigner</h1>

<div class="logo">
<img src="images/logo-lg.png" alt="Logo"/>
</div><!-- /.logo -->
  <h2>Web Design Tips, Tutorials &amp; News!</h2>
  <hr>
  <div class="social-icons">
<a href="https://www.facebook.com/STWebDesigner.97" target="_blank"><img src="images/icons/facebook.png" alt="Facebook"/></a>
<a href="https://twitter.com/STWebDesigner" target="_blank"><img src="images/icons/twitter.png" alt="Twitter"/></a>
<a href="https://github.com/STWebDesigner" target="_blank"><img src="images/icons/github.png" alt="Github"/></a>
<a href="https://medium.com/@stwebdesigner" target="_blank"><img src="images/icons/medium.png" alt="Medium"/></a>
<a href="https://www.youtube.com/user/STWebDesigner" target="_blank"><img src="images/icons/youtube.png" alt="YouTube"/></a>
</div><!-- /.social-icons -->
  <p><a href="stwebdesigner97@gmail.com" class="email">stwebdesigner97@gmail.com</a></p>

<footer>
<p>2014 - 2016 &copy; STWebDesigner. Website Designed and Developed by <a href="http://sophiethomas.co.uk/" target="_blank" class="copy">Sophie Thomas</a></p>
</footer>
</div><!-- /.container -->

CSS Code:

/* — — CSS Document — — */
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700);
/* Base Styles */
body {
margin: 0;
padding: 0;
font-family: ‘Raleway’, ‘Arial’, sans-serif;
font-size: 14px;
color: #4988a7;
}
.container {
height: 100vh;
background-image: url(../images/bg.jpg);
background-size: cover;
background-position: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
}
.hide {
display: none;
}
.clear {
clear: both;
}
hr {
border: 2px solid #4988a7;
width: 100px;
}
/* Typography */
h2 {
font-size: 18px;
}
/* Links */
a:hover, a:active, a:focus {
outline: 0;
border: 0;
}
a.link {
font-size: 14px;
color: #4988a7;
font-weight: bold;
text-decoration: none;
}
a.inpar {
font-size: 14px;
color: #000;
text-decoration: none;
}
a.email {
font-size: 14px;
color: #7b7474;
text-decoration: none;
}
a.copy {
font-weight: bold;
color: #4988a7;
text-decoration: none;
}
/* Images */
img {
border: 0;
outline: 0;
}
/* Home Page */
.logo {
margin-bottom: 10px;
}
.social-icons {
margin-top: 15px;
}
.social-icons img {
width: 40px;
margin: 0 1px;
}
.social-icons.is-emph {
animation-name: tada;
animation-duration: 1s;
animation-fill-mode: both;
z-index: 1;
}
/* Footer */
footer {
position: absolute;
bottom: 0px;
left: 20px;
}
footer p {
font-size: 14px;
}

Part 2: Coding the modal window

I am now going to code the modal window. The modal window will have more information about what STWebDesigner is and the creator behind it.

Firstly we’ll code the HTML part of the modal window, then style it using CSS and add some JavaScript to toggle the modal window.

HTML Code:

<div class=”menu”>
<a href=”javascript:void(0)” onclick=”toggle_visibility(‘modal’);”><img src=”images/icons/about.png” alt=”About the Creator” /></a>
</div><!-- /.menu -->

<div id=”modal” class=”modal-pos”>
<div class=”modal-wrapper”>
<div class=”modal-content”>
<div class=”close-wrapper”>
<p><a href=”javascript:viod(0)” onclick=”toggle_visibility(‘modal’);” class=”close”>X</a></p>
</div><!-- /.close-wrapper -->
<img src=”images/avatar.jpg” alt=”Avatar” class=”avatar”/>
<h2>Welcome to STWebDesigner</h2>
<p>Hey, my name is Sophie Thomas and I launched STWebDesigner back in 2014. I am also the content creator.</p>
<p>STWebDesigner provides Web Design tips, tutorials and news. The purpose of creating STWebDesigner was to share my knowledge about Web Design as I learn.</p>
<p>I teach you how to design and code features that can be used on your next project as well as showing you how to build websites from start to finish through tutorials on <a href=”https://www.youtube.com/user/STWebDesigner” target=”_blank” class=”inpar”>YouTube</a>.</p>
<br />
<p>Check out my latest video: <a href=”https://www.youtube.com/watch?v=YMNVFKTQE7s” target=”_blank” class=”link”>Annual (+ a few months) Review</a>.</p>
<p>Want to find out more about me? <a href=”http://sophiethomas.co.uk/" target=”_blank” class=”link”>Check out my website</a>.</p>
</div><!-- /.modal-content -->
</div><!-- /.modal-wrapper -->
</div><!-- /#modal & .modal-pos -->

CSS Code:

.menu {
position: absolute;
top: 15px;
right: 30px;
cursor: pointer;
}
.modal-pos {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 8;
background-color: rgba(37,41,52,0.7);
vertical-align: middle;
overflow: auto;
}
.modal-wrapper {
position: absolute;
max-width: 600px;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
.modal-content {
background-color: #fff;
padding: 20px 50px 50px;
}
.modal-content p {
color: #000;
line-height: 1.5;
}
.avatar {
margin-top: 20px;
width: 100px;
border-radius: 100%;
}
.close-wrapper {
position: relative;
margin-bottom: 50px;
}
.close {
position: absolute;
top: 0;
right: 0;
color: #4988a7;
text-decoration: none;
font-size: 20px;
font-weight: bold;
}

JavaScript Code - Place above the end body tag:

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src=”js/functions.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == ‘block’)
e.style.display = ‘none’;
else
e.style.display = ‘block’;
}
</script>

Part 3: Making it Responsive

The next part is to make this website responsive. Doing this will improve the viewing experience on mobile devices.

CSS Code:

/* Media Query */
@media screen and (max-width: 550px) {
footer {
left: 0;
}
}
@media screen and (max-width: 400px) {
.modal-content {
padding: 20px;
}
}

Part 4: Adding Animations

The final part of this tutorial is adding cool animations to the website. This will involve animating the icons and the modal window so it fades and slides into the page.

The animation effects are from animate.css.

JavaScript Code:

// JavaScript Document
setInterval(function() {
var randNum = Math.floor(Math.random() * $(‘.social-icons img’).length) +1
$(‘.social-icons img’).eq(randNum).addClass(‘animated tada’);
setTimeout(function() {
$(‘.social-icons img’).removeClass(‘animated tada’);
}, 2000);
}, 4000);
setInterval(function() {
$(‘.menu img’).addClass(‘animated tada’);
setTimeout(function() {
$(‘.menu img’).removeClass(‘animated tada’);
}, 1500);
}, 10000);

To make the modal window animate down, I’m going to go back to the index.html page and add two classes to the div with a class of modal-wrapper.

<div class=”modal-wrapper animated fadeInDown”>

That is all the code to our current website. To recap, we coded and styled the main webpage and modal window, made the whole site responsive and added animation effects to some elements.

The Final Result:

Main Page
Modal Window

This post is a written version of the video produced on my YouTube Channel. Watch the video below.

Please Note: Sorry about the audio quality. I didn’t realise how bad it was until after I recorded the video. I think the main issue was that the mic was near the fan on my laptop which gets very loud.