How to Make a Website For Beginners

MUO

How to Make a Website For Beginners

Today I'll be guiding you through the process of making a complete website from scratch. Don't worry if this sounds difficult. I'll guide you through it every step of the way. Have you always wanted to make a website? Maybe you've read some of our HTML () and , but don't know how to use those languages on a bigger project. 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 (). 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 at .

The Design

Here's the design for this website. Take a look at a if you want a better look, or even better, download the full project . I designed this website for a fictional company in 2017. If you're interested, make sure you grab the .PSD file from the . Here's what you get in the photoshop file: 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 , used for all of the icons. The other two fonts are and Myriad Pro (included with Photoshop). If you're not sure how to install fonts, then . Don't worry if you don't have , 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 ). 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 . Here's the code you need: !DOCTYPE html
html
head
meta charset="UTF-8"
titleNoise 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 (). 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): , {
: 0;
: 0;
: '', '';
}
{
: 100%;
: ;
: 1 ;
: 25;
} 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 body tags 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: {
: 900;
: 0 ;
: 15 40;
: ;
: ;
} 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: : ; It's time to create the logo now. 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 h1Noise Media/h1
/div CSS: {
: ;
: 60;
: ;
}
{
: ;
: 21 0 0 25;
} 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 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"
lia href=""Home/a/li
lia href=""About/a/li
lia href=""Reviews/a/li
lia 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: {
: ;
: 29 0 0 0;
: 0;
: ;
: 16;
}
{
: ;
}
, , {
: ;
: ;
: 0 16 0 10;
: 0;
: 2 ;
}
{

: 0;
}
{

: ;
} 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: {
: 100%;
: 4;
: ;
} 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 loosely divided into thirds, roughly approximating the . You will need the sample image for this part. It's included in the . This image is 670px wide, and is from our . Add the HTML after the top-color-splash element: div class="normal-wrapper"
div class="one-third"
h2 class="no-margin-top"Welcome!/h2
pNoise Media is a technology company specialising in tech reviews./p
pWe’re very good at what we do, but unfortunately, we are not a real company./p
pMake sure you visit makeuseof.com for the full tutorial on how to build this website./p
pAlternatively, 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: {
: 40%;
: ;
: ;
: 20;
}
{
: 60%;
: ;
: ;
: 40;
: ;
: 20;
}
{
: 500;
}
{
: 0;
} 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
h4Joe Coburn/h4
/div
/div And then this CSS: {
: ;
: ;
: ;
: 15 0;
}
{
: ;
: 20;
: 0;
}
{
: ;
: 16;
: 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
h5YouTube/h5
pCheckout 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
h5Reviews/h5
pIf 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
h5Buying Guides/h5
pAt 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 . The HTML is once again using the normal-wrapper class. Here's the CSS: {
: ;
: ;
: 33%;
: 25;
: 0;
: ;
}
{
: ;
: ;
: 200;
: 200;
: 200;
: 0 ;
: 2 ;
: ;
: 75;
: 30 0 0 0;
: ;
}
{

: ;
: ;
}
{
: 15 0 10 0;
: 20;
} 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: {
: 100%;
: ;
: 1 ;
: 150;
} 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 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 . Add this CSS to switch over to the better fonts: url();
url();
, , , , {
: ' ', '', '';
} Now modify your html and body elements to use the new fonts: : ' ', '', ''; 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: {
: ;
} Now that the HTML and CSS is taken care of, let's switch over to JavaScript. It's useful to understand the (DOM) for this part, but it's not a requirement. 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:
$().ready(() {

time = ;

$im1 = $();
$im2 = $();
$im3 = $();
setInterval((){

changeImage();
}, time);
currentImage = ;
(){
(currentImage) {
:

$im1.hide();
$im2.show();
$im3.hide();
currentImage = ;
;
:

$im1.hide();
$im2.hide();
$im3.show();
currentImage = ;
;
:

$im1.show();
$im2.hide();
$im3.hide();
currentImage = ;
}
}
}); 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 and ). 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 ). Once you're comfortable using JavaScript or if you have any experience with Ruby, you can try your hand at creating a website with a static website builder like .