Embedded Files
Introduction to web Coding
Introduction to web Coding
Welcome to my Coding Tutorial page!
This beginner exercise has been put together as a practical project to introduce you to the basics of coding by building a real website using Bootstrap.
This practical project is a good way to get to know the basics of coding and can help as you learn to use WordPress, or HTML email design.
Codecademy
Codecademy
Codecademy is a fantastic interactive way to learn all kinds of development coding.
W3schools
W3schools
W3schools has short tutorials and reference materials for all web development languages.
Working with Bootstrap
Working with Bootstrap
In this exercise we will be will working with a simple coding plugin called Bootstrap along with standard HTML and CSS code. Bootstrap is the coding equivalent of a template or website builder. You can use different Bootstrap elements, by copying and pasting the code for the features you want to include in your website.
Overview
Overview
In this project we are going to create a very basic website with some simple pages and functions in order to experiment and explore different website functions. The topic of the site can be about anything you want want, but if you are not sure what to call it; how about "My Portfolio" or "My CV".
You will also need some text editing software; Windows has Notepad and iOS has TextEdit built in, but both of these are a little basic. Why not try downloading Brackets or Notepad++, both of which provide colour coding and other features.
Step 1) Setting up your files
Step 1) Setting up your files
The first thing you will need for this project is a HTML file for your home page, and a CSS file for your styles and customisations. Both of these files can be created in a text editor, simple create a file and save as "Index.html" and another as "MyStlyles.css".
Remember to include the ".html" and ".css" at the end of the file name, and put both of these files into a folder for your website project.
Next you will need to copy and paste the HTML text provided into the .html file, and the CSS text into the .css file.
Bonus: create two more HTML files for additional pages, such as 'Contact.html' and 'Portfolio.html' - we can use these pages to link to later on.
Step 2) Using comments to make notes and keep track
Step 2) Using comments to make notes and keep track
Coding can look complicated, especially when there is lots of it all crammed into a short space; its hard to tell when one part starts and another part begins. Fortunately all developer languages have a way of writing comments to keep notes to help you keep track of where you are.
For each section in your website we will use comments like this. In your HTML file write a comment like so:
<!-- this is my first comment, highlighting my first section -->
You can do the same thing in your CSS file, but the syntax is slightly different. In your CSS file, lets do the same thing and write another comment like so:
/** this is another comment about the styling of a section **/
These comments can be used throughout your code as useful reminders.
Step 3) Using Bootstrap components
Step 3) Using Bootstrap components
We are now going to start building a template website using Bootstrap to copy and paste the parts we want.
Take a look at the Bootstrap website and all the different components you can copy into your site. We'll choose just a few for now but you can easily add more later on if you get inspired.
Start by pasting these components into your 'Index.html' file. Don't worry about modifying these just yet.
a navbar - to be your menu
a jumbotron - to be your header image
a button - to be a call to action (CTA)
Step 4) Creating sections for content
Step 4) Creating sections for content
Now we are going to make somewhere to put your content; your images and text.
In this section we will learn to use the HTML element <div> and classes such as "container" for content boxes plus "row" and "col" or for columns. The could look like:
<div class="container">
<div class="row">
<div class="col">
The sections and are responsive, but can also have responsive sizes specified for each element.
Create at least 3 areas for your content:
A two equal column section, with room for writing in one column and an image in the other.
A container to a section of text
A Footer section with columns of different sizes.
Step 4) Creating sections for content
Step 4) Creating sections for content
Now we are going to make somewhere to put your content; your images and text.
In this section we will learn to use the HTML element <div> and classes such as "container" for content boxes plus "row" and "col" or for columns. The could look like:
<div class="container">
<div class="row">
<div class="col">
The sections and are responsive, but can also have responsive sizes specified for each element.
Create at least 3 areas for your content:
A two equal column section, with room for writing in one column and an image in the other.
A container to a section of text
A Footer section with columns of different sizes.
Customise your menu with names for each of your pages and place a link in the 'href' section, for example:- <a class="nav-link" href="/contact.html/">
In your style sheet, create a setting that changes the background colour of the menu items when the mouse hovers over it. This should use the class for 'nav-item' like so:- .nav-item a:hover {
Give your jumbotron a background image to act like a front cover or header for your website. To do this you will need to add a background image into the images folder and add it to the stylesheet. To make the image fit like a cover you will need to write three lines under the jumbotron class, something like:- background: url(/images/headerImage.jpg); - background-repeat: no-repeat; - background-size: cover;
In your two equal columns section, add an image to one of the columns using the <img src="imageFile"> tag.
Add some text into the remaining columns using the <h2>, <h3>, <p>, <ul>, <li> and <br> tags. If you are unsure what to write, you can get placeholder text from: https://www.lipsum.com/
Manually apply a hyperlink attribute to something on your page using the <a href="link"> tag.
Congratulations
Congratulations
You have now put together a basic website! Take a look at it; what do you think? Even if you had to go to other websites to work out how to do certain parts, I bet it still wasn't too hard in the end.
So what now?
So what now?
There are two different directions to go from here to explore some more advanced techniques of website development. Basic animations in CSS, creating forms in HTML and JavaScript and exploring other ways to use JavaScript on your website.
Page updated
Google Sites
Report abuse