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
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.
Let’s structure the HTML Page document
firstly open your text editor Notepad++ or Visual Studio Code.
Type the document type <!doctype html>
<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
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.
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
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>
I’m a professional web programmer and tech blogger. I enjoy teaching others what I know how to do best. Contact me on 08063668067.