coding-tutorial website development

Live Coding – Learn Website Development With HTML5, CSS3 & Bootstrap

Do you want to learn website development?

Do you dream to build standard dynamic websites? Then his thread is for you.

I’ll be teaching you how to build (code) a responsive website from scratch using HTML5, CSS3 and Bootstrap. Please Note: This isn’t a Content Management System (CMS) website design tutorial like the use of WordPress, Joomla, Blogger, Wix etc. Here, you’ll learn practically how to code.

Just stay tune to this post and feel free to ask your questions in the comment section below.

Firstly let’s start with what you need to code a website.
-> A computer (Laptop or desktop) with at least 4GB RAM recommended

-> Web broswer Google chrome, firefox, opera,

-> Text editor (This is what you’ll use to write your codes. There are various code editors like Notepad++, Visual Studio Code, Brackets, Atom, Sublime Text Editor and others. I recommend you download and install two for the purpose of this tutorial Notepad++ and Visual Studio Code

-> For mobile device: I don’t really recommend learning web development using mobile phones, but it’s still okay to use your phone to learn if you don’t have a computer with you but note that you’ll be limited to some features. For Android User, visit Google play store and: Search for Notepad Plus Code Editor for HTML CSS JavaScript

 let’s talk about about the languages we’ll be learning.

HTML: Hyper Text Markup Language is the markup language for web pages. it is used to create and structure sections, paragraphs, headings, links, navigations, sidebars, blockquotes and footers for web pages and applications.

CSS: Cascading Style Sheets is a web development language that handles the design and beauty of the web page.
CSS in conjunction with HTML control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.

Bootstrap: Bootstrap is a free front end web development framework. Bootstrap is framework built with HTML, CSS, and JavaScript to facilitate the development of responsive, mobile-first sites and apps.

Let’s structure the HTML Page document
firstly open your text editor Notepad++ or Visual Studio Code.

Type the document type <!doctype html>
type:

<html lang="en">

</html>

In between the html opening and closing tag, type in the <head> (opening) and </head> (closing tag).

type in the character encoding

All other codes in your HTML document will go in between the <html> (opening tag) and </html> (closing tag). The lang=”en” stands for language set to English. The

<meta charset="UTF-8">

after the head opening tag, followed by the meta tag to make the site responsive

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and then the title of the site <title>HTML, CSS AND BOOTSTRAP TUTORIAL</title>.

Your code should look like the one below:

<!doctype html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML, CSS AND BOOTSTRAP TUTORIAL</title>
    </head>
</html>

Save, your page as index.html

Now, it’s time to open your web page on your browser. From the folder you save our html file (index.html) right click on the file and click open file with, select the browser you want to use or from the browser, press CTRL + O and choose the file.

The file should look like the one in the attachment below
Notice that only the title shows in the head of the web page.


BOOTSRAP DOWNLOAD

Let’s download and add bootstrap into our webpage.
There are two ways to include the bootstrap framework into first is it put the bootstrap CDN (Content Delivery Network)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

or download the bootstrap files https://getbootstrap.com/docs/4.3/getting-started/download
For the purpose of this CSS, we’ll need only two files
Bootstrap CSS (bootstrap.min.css) and
Popper Js (bootstrap.bundle.min.js)

You’ll need JQuery for bootstrap to work. Just like bootstrap, you can get JQuery through the JQuery CDN

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

Or download the JQuery at https://jquery.com/download
Inside your main folder, open two folders CSS folder and JavaScript (JS) folder. Put all CSS files inside the CSS folder and al JavaScript files in the JS folder.

This is how your code will look like

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Bootstrap Theme</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>

<script src="js/jquery-3.4.0.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

6 + 4 =