Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,152,652 members, 7,816,677 topics. Date: Friday, 03 May 2024 at 02:58 PM

Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap - Webmasters - Nairaland

Nairaland Forum / Science/Technology / Webmasters / Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap (920 Views)

Css3 Tutorial / Nokia Smartphone Built With HTML5 With Sourcecode / Start learning Website development(HTML5,CSS3,JavaScript and PHP) on Nairaland. (2) (3) (4)

(1) (Reply) (Go Down)

Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by ediko5(m): 1:25pm On Oct 02, 2019
Hello Nairalanders,

Do you want to learn web 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 the thread and feel free to ask your questions.

Link to Our Practical Website: http://tutorial.onlinenewspilot.com ( Note: I'm going to update the site and add new features as we proceed)

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
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by ediko5(m): 1:26pm On Oct 02, 2019
Now, 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.
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by ediko5(m): 1:27pm On Oct 02, 2019
ediko5:
Hello Nairalanders,

Do you want to learn web 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 the thread and feel free to ask your questions.

Link to Our Practical Website: http://tutorial.onlinenewspilot.com ( Note: I'm going to update the site and add new features as we proceed)

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
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by ediko5(m): 1:37pm On Oct 02, 2019
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>


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

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

type in the character encoding

<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.

Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by donsheddy1(m): 3:33pm On Oct 02, 2019
Uncle teacher, what's the meaning of bootstrap? Why confuse people with your confusion?

Are you teaching HTML & CSS or you're here to teach people how to use bootstrap?

And when you use the word dynamic website, does HTML and CSS makes website dynamic?
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by resosdigital(m): 6:18pm On Oct 02, 2019
donsheddy1:
Uncle teacher, what's the meaning of bootstrap? Why confuse people with your confusion?

Are you teaching HTML & CSS or you're here to teach people how to use bootstrap?

And when you use the word dynamic website, does HTML and CSS makes website dynamic?
Had same thoughts. Even his demo website is a total mess.
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by ediko5(m): 3:21pm On Oct 03, 2019
Kindly ignore some irrelevant posts here. There're always available every where to distract.

I opened this thread for complete newbie and also created the demo web page for the purpose of this tutorial which I'll be updating by God's grace.

I'm here to teach newbie how to code and achieve results.

I will only quote posts worthy of my response.
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by telleyway: 9:53pm On Oct 04, 2019
Oga we are waiting for you eagerly
Re: Live Coding - Learn Website Development With HTML5, CSS3 & Bootstrap by ediko5(m): 6:56pm On Oct 10, 2019
Moderators: adewasco2k and Slyr0x
Why's my code being removed when I post?

And why do you keep banning me because of this thread?

This is really annoying.

(1) (Reply)

I Need A Tweeter Account / How To Get A Free USA Number For Whatsapp, Telegram And Paypal Verifications / Cost Of Facebook, Instagram And Twitter Ads

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 30
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.