By Joe Coburn
Have you always wanted to make a website? Maybe you’ve read some of our HTML (understanding HTML) and CSS tutorials, but don’t know how to use those languages on a bigger project. 5 Steps To Understanding Basic HTML CodeREAD MORE
Today I’ll be guiding you through the process of making a complete website from scratch. Don’t worry if this seems like a difficult task, I’ll guide you through it every step of the way.
You will produce this website using HTML, CSS, and JavaScript with a touch of jQuery (guide to jQuery). You won’t be doing anything really bleeding edge, so this code should work fairly well in most modern browsers.
If you’re not sure of any CSS, take a look at the CSS guide at W3Schools.com.
The Design
Here’s the design for this website. Take a look at a high resolution image if you want a better look, or even better, download the full project here.
Advertisement
I designed this website for a fictional company in Adobe Photoshop CC 2017. If you’re interested, make sure you grab the .PSD file from the bundle download. Here’s what you get in the photoshopfile:
Inside the PSD, you’ll find all the layers grouped, named, and color coded:
You’ll need a few fonts installed for things to look correct. The first is Font Awesome, used for all of the icons. The other two fonts are PT Serif and Myriad Pro (included with Photoshop). If you’re not sure how to install fonts, then read our guide. How To Install Fonts on Windows, Mac & LinuxREAD MORE
Don’t worry if you don’t have Photoshop, you don’t need it to proceed.
Initial Code
Now that the design is clear, let’s begin coding! Create a new file in your favorite text editor (I’m using Sublime Text 3). Save this as index.html. You can call this anything you like, the reason many pages are called index is due to the way web servers work. The default configuration for the majority of servers is to serve the index.html page if no page is specified.
If you don’t want to learn the details, go grab the full code from the download.
Here’s the code you need:
<html>
<head>
<meta charset="UTF-8">
<title>Noise Media</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* CSS goes here, at the top of the page */
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* JavaScript goes here, at the bottom of the page */
</script>
</body>
</html>
This does several things:
- Defines the bare minimum HTML required.
- Defines a page title of “Noise Media”
- Includes jQuery hosted on Google CDN (what’s a CDN).
- Includes Font Awesome hosted on Google CDN.
- Defines a style tag to write your CSS in.
- Defines a script tag to write your JavaScript in.
Save your file again and open it in your web browser. You probably won’t notice much, and it certainly won’t look like a website just yet.
Notice how the page title is Noise Media. This is defined by the text inside the title tag. This has to be inside the head tags.
The Header
Let’s create the header. Here’s what that looks like:
Let’s start with that little gray bit at the top. It’s a light gray with a slight dark gray underneath. Here’s a close up:
Add this HTML inside the body tag at the top:
<div id="top-bar"></div>
While you’re here, let’s break this down. A div is like a container to put other stuff in. This “other stuff” can be more containers, text, images, anything really. There are some restrictions on what can go into certain tags, but divs are fairly generic things. It has an id of top-bar. This will be used to style it with CSS, and target it with JavaScript if required. Make sure you only have one element with a particular id — they should be unique. If you want multiple elements to have the same name, use a class instead — it’s what they’re designed for! Here’s the CSS you need to style it (put at the top inside your style tag):
html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */
height: 25px;
}
Notice how the hash sign (#, hashtag, pound sign) is used before the name. This means that the element is an ID. If you were using a a class, you would use a full stop (.) instead. The html and bodytags have their padding and margin set to zero. This prevents any unwanted spacing issues.
It’s time to move on to the logo and navbar. Before you start, you need a container to put this content in. Let’s make this a class (so you can re-use it later on), and as this is not a responsive website, make it 900 pixels wide.
HTML:
<div class="normal-wrapper">
</div>
CSS:
.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}
It can be hard to tell what’s going on until you finish the code, so it can be helpful to add a (temporary) colored background to see what’s happening:
background: red;
It’s time to create the logo now. Font Awesome is needed for the icon itself. Font Awesome is a set of icons packaged up as a vector font — awesome! The initial code above already setup Font Awesome, so it’s all ready to go!
Add this HTML inside the normal-wrapper div:
<div id="logo-container">
<i class="fa fa-volume-down logo-icon"></i> <h1>Noise Media</h1>
</div>
CSS:
.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}
Don’t worry about the other fonts not matching the design — you will tidy that up later on. If you wish to use different icons, head on over to the Font Awesome Icons page, and then change fa-volume-down to the name of the icon you wish to use.
Moving onto the navigation bar, you will use an unordered list (UL) for this. Add this HTML after the logo-container (but still inside the normal-wrapper):
<ul id="navbar">
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Reviews</a></li>
<li><a href="" class="last-link" >Contact</a></li>
</ul>
The href is used to link to other pages. This tutorial website does not have any other pages, but you can put the name and file path (if required) here, e.g. reviews.html. Make sure you put this inside both double quotes.
Here’s the CSS:
#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}
This CSS starts with an unordered list. It then removes the bullet points using list-style-type: none;. Links are spaced apart a little, and given a color when you hover your mouse over them. The small gray divider is a right border on each element, which is then removed for the last element using the last-link class. Here’s what that looks like:
All that’s left for this section is the red horizontal color highlight. Add this HTML after the normal-wrapper:
<div id="top-color-splash"></div>
And here’s the CSS:
#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}
That’s the top section done. Here’s what it looks like — pretty similar to the design right?
Main Content Area
It’s now time to move on the main content area — the so-called “above the fold”. Here’s what this part looks like:
This is a pretty simple part, some text of the left with an image on the right. This area will be looselydivided into thirds, roughly approximating the Golden Ratio. Using the Golden Ratio in Photography for Better CompositionDo you struggle with photo composition? Here are two techniques based on the Golden Ratio that will drastically improve your shots with little effort on your part.READ MORE
You will need the sample image for this part. It’s included in the download. This image is 670px wide, and is from our Panasonic Lumix DMC-G80/G85 Review.
Add the HTML after the top-color-splash element:
<div class="normal-wrapper">
<div class="one-third">
<h2 class="no-margin-top">Welcome!</h2>
<p>Noise Media is a technology company specialising in tech reviews.</p>
<p>We’re very good at what we do, but unfortunately, we are not a real company.</p>
<p>Make sure you visit makeuseof.com for the full tutorial on how to build this website.</p>
<p>Alternatively, check out our review of the Panasonic G80 shown on the right!</p>
</div>
<div class="two-third">
<img class="featured-image" src="Image_1.jpg" />
</div>
</div>
Notice how the normal-wrapper element has returned (that’s the joy of using classes). You may be wondering why the image (img) tag does not close. This is a self closing tag. The forward slash (/>) indicates this, as it does not always make sense to have to close a tag.
CSS:
.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}
The most important attribute here is box-sizing: border-box;. This ensures the elements are always going to be 40% or 60% width. The default (without this attribute) is your specified width plus any padding, margins, and borders. The image class (featured-image) has a max-width of 500px. If you only specify one dimension (a width or a height), and leave the other blank, css will resize the image while maintaining it’s aspect ratio.
Quote Area
Let’s create the quote area. Here’s what this looks like:
This is another simple area. It contains a dark gray background, with white centered text.
Add this HTML after the previous normal-wrapper:
<div id="quote-area">
<div class="normal-wrapper">
<h3>“makeuseof is the best website ever”</h3>
<h4>Joe Coburn</h4>
</div>
</div>
And then this CSS:
#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}
There’s not a lot going on here. Sizing is the main adjustment needed — font size, spacing, and so on. Here’s what the whole thing looks like now — it’s starting to look like a website!
Icon Area
Let’s keep pressing on — it’s nearly finished! Here’s the next area that needs creating:
This part will utilize several classes. The three icons are mostly the same, with the exception of the content, so it makes sense to use classes instead of ids. Add this HTML after the previous quote-area:
<div class="normal-wrapper">
<div class="icon-outer">
<div class="icon-circle">
<i class="fa fa-youtube logo-icon"></i>
</div>
<h5>YouTube</h5>
<p>Checkout our YouTube channel for more tech reviews, tutorials and giveaways!</p>
</div>
<div class="icon-outer">
<div class="icon-circle">
<i class="fa fa-camera-retro logo-icon"></i>
</div>
<h5>Reviews</h5>
<p>If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.</p>
</div>
<div class="icon-outer">
<div class="icon-circle">
<i class="fa fa-dollar logo-icon"></i>
</div>
<h5>Buying Guides</h5>
<p>At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.</p>
</div>
</div>
These three icons are also Font-Awesome. The HTML is once again using the normal-wrapper class. Here’s the CSS:
.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}
There’s a few new things going on in the CSS. The rounded corners are being set by border-radius: 200px;. Setting this value the same as the width results in a perfect circle. You can reduce this if you would prefer more of a square with rounded corners. Notice how hover actions are applied to the divs — it is not restricted to links only. Here’s what this section looks like now:
The Footer
The last thing to do is the footer! This is really simple, as it’s just a gray area with no text. Add this HTML after the icon areas’ normal-wrapper:
<div id="footer"></div>
Here’s the CSS:
#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray "topline" */
height: 150px;
}
See – really simple stuff.
Add Some Pizzazz
That’s it, the coding is done! You can absolutely leave things as they are, it’s a finished webpage. You may have noticed however, that it does not look exactly like the design. The main reason for this is the fonts used. Let’s sort that out.
The font used for most of the titles is Myriad Pro. This comes with Adobe Create Cloud, but it’s not available as a webfont. The font currently used on the webpage is Helvetica. This looks ok, so you could leave it as is, however PT Sans is available as a webfont. The font used for all the text is PT Serif, which is available as a webfont.
Webfonts are a simple process. Just like loading a new font onto your computer, webpages can load fonts on demand. One of the best ways to do this is through Google Fonts.
Add this CSS to switch over to the better fonts:
@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}
Now modify your html and body elements to use the new fonts:
font-family: 'PT Serif', 'Helvetica', 'Arial';
Notice how the h3 element is not included in the list — this will default to PT-Serif instead of PT-Sans.
As a final bit of prettiness, let’s use some JavaScript to scroll through three different featured images. You will need Image_2 and Image_3 for this part, and again, it’s optional. The website is completely functional at this point without this feature. Here’s what it will look like (sped up):
Modify your HTML to include three featured images. Notice how two of these have a CSS class of hidden. Each image has been given an ID so that the JavaScript can target each of them independently.
<div class="two-third">
<img id="f-image-1" class="featured-image" src="Image_1.jpg" />
<img id="f-image-2" class="featured-image hidden" src="Image_2.jpg" />
<img id="f-image-3" class="featured-image hidden" src="Image_3.jpg" />
</div>
Here’s the CSS needed to hide the extra featured images:
.hidden {
display: none;
}
Now that the HTML and CSS is taken care of, let’s switch over to JavaScript. It’s useful to understand the Document Object Model (DOM) for this part, but it’s not a requirement. JavaScript and Web Development: Using the Document Object ModelThis article will introduce you to the document skeleton that JavaScript works with. Having a working knowledge of this abstract document object model, you can write JavaScript that works on any web page.READ MORE
Find the script area at the bottom of the page:
<script type="text/javascript">
/* JavaScript goes here, at the bottom of the page */
</script>
Add the following JavaScript inside the script tag:
/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});
There’s a few things happening here. The code is contained inside $(document).ready(). This means it will run once your browser has finished rendering the page — this is a good practice. The setInterval() function is used to call the changeImage() function regularly at a predefined interval in milliseconds (1000 milliseconds = 1 second). This is stored in the time variable. You can increase or decrease this to speed up or slow down the scrolling. Finally, a simple case statement is used to show different images, and keep track of the currently showing image.
Coding Challenge
That’s it! Hopefully you learnt a lot during the process. If you fancy a challenge, and want to put your new found skills to the test, why not try implementing these modifications:
Add a footer: Add some text into the footer (hint: you could re-use the normal-wrapper and one-third/two-third classes.).
Improve the image scrolling: Modify the JavaScript to animate the image changes (hint: look at jQuery fadein and animate).
Implement multiple quotes: Modify the quotes to change between one of several different ones (hint: look at the image scrolling code for a starting point).
Setup a server: Setup a server and send data between the webpage and the server (hint: read our guide to JSON and Python). How to Get Python and JavaScript to Communicate Using JSONToday I'll be showing you how to use JSON to send data from JavaScript to Python. I'll be covering how to setup a web server, along with all the code you need.READ MORE
Improve the image scrolling: Modify the JavaScript to animate the image changes (hint: look at jQuery fadein and animate).
Implement multiple quotes: Modify the quotes to change between one of several different ones (hint: look at the image scrolling code for a starting point).
Setup a server: Setup a server and send data between the webpage and the server (hint: read our guide to JSON and Python). How to Get Python and JavaScript to Communicate Using JSONToday I'll be showing you how to use JSON to send data from JavaScript to Python. I'll be covering how to setup a web server, along with all the code you need.READ MORE
Source: www.makeuseof.com
No comments:
Post a Comment