Hello guys I am a JavaScript computer programming enthusiast

ARE YOU CURRENTLY UNEMPLOYED AND TIRED OF NIGERIA and you want to learn a skill that will change your life for forever .

In just 3 months you can learn a computer program that we change your life and all you need is a laptop , pen and paper and follow this thread

And in this thread I will be showing you and demonstrating to you how to do various tasks web development wise with HTML and CSS and eventually JavaScript

Html means hypertext markup language, almost everything on the internet or website can be read or interpreted via HTML.

CSS means cascading styles sheets, it’s a way of adding extra touch to HTML that brings out beautiful end product websites

JavaScript is the language you need to know about after these two , the problem is you can’t learn JavaScript without knowing about html and CSS.

The good news is HTML AND CSS are like ABCDEF they are extremely easy to understand

So follow this thread carefully

In just 3 months you will be shocked the type of things and the type of instruction or code you will give to a computer and it will answer

Whether or not you do anything todsy 3 months will come , and in 3 months time you will wish you listened to this advice 3 months ago

All you need once again is a pen and paper

A laptop
You don’t need internet
As I will be teaching you everything you need to know here on Nairaland

Also Seun Osewa built this website with python , it’s another programming language but can do much more advanced stuff then JavaScript that I would be teaching you for free on here

Goodluck

Are you unemployed in Nigeria right now and you don’t know what to do but you want to have a start with website development

If you are serious enough with what you want, follow this thread and in 3 months you will be a fully stacked developer

You will be able to apply for remote jobs in London, United States and almost everywhere outside Nigeria due to the skills you might be able to acquire in 3 months

So from html- you learn CSS- then you learn JavaScript

The good news is with JavaScript you can do both back end stuff with node.is and front end stuff with react or bootstrap

For newbies into web development and software programming, back end means the codes behind a website you can’t see.

Front end means the user interface, the part of the website including the login etc that you can see

JavaScript can do all of this

JavaScript is the most popular programming language the only problem is you will never ever be able to understand it if you don’t first learn HTML and CSS

So keep following this thread guys all you need is

1) a laptop

2) access to Nairaland and my profile on Nairaland

3) a pen and paper

Following

I will be releasing HTML codes and explaining what the codes AND how to use to codes to do different things on a website

To make your codes work you can either open your notepad on your computer

And copy and paste the code on your notepad and save it as any name but it must be saved as name of file.html

Then after saving the notepad file as .html you right click on it and open it as a browser and see what your codes have become

If it’s CSS codes I release it must be saved as .Css

If it’s JavaScript codes I release it must be saved as JS.

If you don’t want stress using a notepad to be typing code all day

Then download Microsoft visual studio https://visualstudio.microsoft.com/#vs-section


Please note visual studio can only be downloaded on a computer

The best way to learn a computer program is to learn it offline then come back online and learn more

Watching YouTube videos all day would just waste ur data all day and you will waste ur time and be frustrated

The program helps you so much as it automatically guesses which programming language you working in html, or Css , python no matter the programming language under the sun, it will guess it and give you hints . Also you have to do is download it for FREE.

And Microsoft visual studio is so good that it will give you a hint of your code is wrong or you are typing something the wrong way or something isnt right somewhere

This is how Microsoft visual studio looks and all you have to do is click file and open a new text .

And when you are done click control plus S to save your work

And run the code by clicking shift plus F5 or navigate to the run code option on the navigation bar

Remember in just 3 months you life and career can change for life

Besides whether you do something or you do nothing

3 months will come and go

So your future is in your hands and you can get into tech for free using Nairaland by following this thread so are you ready

Let’s start first topic introduction to HTML

REMEMBER all you need is a laptop

A pen and paper

A notepad application on your laptop

Or find a way to download Microsoft visual studio

And we will start the journey of a thousand miles

You can never ever learn JavaScript programming language without mastering html and Css . It’s almost impossible

So this is why we are starting with html

Anyone interested pls type proceed and we shall start

WHAT IS HTML

HTML stands for hypertext mark language.

It usually begins with a a code that begins with <!DOCTYPE html>

Each line of code in HTML beings with an opening tag < and usually ends with a closing tag />

As ironic as it is the features that makes you able to type and comment on nairaland pages has features of HTML in it.

In other words, if i completely type a html code into a post on nairaland, it will be executed so you the person reading this wont be able to see the code, All you will be able to see what the code was intended to do.

Welcome to the world of programming

Find attached a copy of a typical HTML code

As you can above

you have the opening <doctype tag ........ This tells the computer you have started to write in the HTML programming language

you have the opening <head tag...............This tells the computer that you need a head section

you have the opening < title tag ................This tells the computer to note down the title of the page you are working on

you have the opening <body tag ..............This tells the computer you want a body section of the web page you are working on

and you have the closing </head tag ........This tells the computer you are done with the head section

and you have the closing <body tag ..........This tells the computer you are done with the body section of the web page you are working on

and you have the closing </html tag......... This tells the computer you are done with the document and the computer can now execute all the
codes together at once

Remember, html is used for building website and static web pages so because a computer is not a human being, when speaking to the computer using html as your programming language, you must break it down for it which part of the WEB PAGE you are working on and which part do you want your codes to work on and vice versa

This is how HTML and almost every computer programming language was designed

You cant just write codes anyhow or write anything,

You must structure your code in this HTML format for it to work or for the computer to have a chance of understanding you or the message the code is talking about

Find attached

Now take out your pen and paper and write down what is attached as a picture down on paper

HTML EDITOR

For your HTML code to work, you need some sort of software or application which you can use to run your codes

You dont need an internet connection to run a HTML code.

You can use a notepad ( most windows computers or laptops ) come with the note pad application. The only thing you must save whatever you type of copy into the notepad as .html and then save it and open it with Google chrome or Safari and with any other browser.

It will work yes offline it will work.

OR
Follow the following steps in getting started

Step 1: Open Notepad (PC)
Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:

Write the code attached as a PICTURE to this post below

Step 3: Save the notepad text you wrote or copied in Step 2 as a HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).

Step 4: Close the file after saving it in step 3 and right click and open it again back with any browser of your choice safari, google chrome, etc

Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with".

The result will look much like this:


once the browser can display a message to your like this

CONGRATS YOU HAVE JUST WRITTEN YOUR FIRST PROGRAMMING LANGUAGE

Congrats you have just written your first line of code

but just before you rejoice

study the code you have just typed and saved into your notepad and you will notice the following :

1.The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

2.HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

3.HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

4. Closing </head> tag
5. Closing </html> tag


CAUTION
FOR EVERY TAG YOU OPEN, YOU MUST ALSO CLOSE IT ONCE YOU ARE DONE

YOUR CODES WILL NOT WORK IF YOU DONT

For every opening <head there must be closing </ head tag somewhere in the HTML document

This is the only major strict rule about HTML

You must open your tags and close them

[center]HTML TOPIC 1 - ELEMENTS [/center]

In HTML, an element is defined by a start tag some content in between and an end tag

For instance in the html code i told you to write down on paper you had the following:

<h1>My First Heading</h1>
<p>My first paragraph.</p>

In the HTML code above,

The <h1>is the start tag
the </ h1 is the end tag

And My first paragraph is the content in between

HTML TOPIC 2 - HTML Attributes

In HTML, attributes provide more information about an HTML element

For instance let say you have <h1>My First Heading</h1>

But you want the person seeing the message my first heading to be able to click on this message or you want to attach a picture to this message then you have the following attributes you can use

1.The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to

<a href=" https://www.nairaland.com " >Visit nairaland</a>

2,The src Attribute
The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:
for example a typical src attribute looks like this
<img src="img_girl.jpg">

2a.The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the width and height of the image (in pixels):
for example a typical width and height attribute looks like this

<img src="img_girl.jpg" width="500" height="600">

3.The alt Attribute
The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to a slow connection, or an error in the src attribute, or if the user uses a screen reader.
for example a typical alt attribute looks like this

<img src="img_girl.jpg" alt="Girl with a jacket">

4.The style Attribute
The style attribute is used to add styles to an element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

OPEN YOUR NOTE PAD AND TYPE OR COPY THE FOLLOWING CODE INTO A NEW TEXT FILE

<!DOCTYPE html>
<html>
<body>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>


SAVE THE NOTEPAD AS INDEX.HTML

AND OPEN IT AND SEE WHAT IT BECOMES

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any heading with the style attribute, using the CSS font-size property:

use the following code if you want your heading to be bigger

<h1 style="font-size:60px;">Heading 1</h1>


SO ONCE AGAIN OPEN YOUR NOTEPAD CREATE A NEXT TEXT FILE.HTML AND TYPE THIS NEW FRESH CODE TO MAKE THE FIRST HEADING BIGGER THAN NORMAL THE LAST TIME

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

</body>
</html>

HTML Paragraphs

A paragraph always starts on a new line, and is usually a block of text.

HTML Paragraphs
The HTML <p> element defines a paragraph.

A paragraph always starts on a new line, and browsers automatically add some white space (a margin) before and after a paragraph.

HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML page:

HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new paragraph:

The HTML <pre> Element
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

open your notepad and type this code afresh and save it as html and run it

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

Background Color

The CSS background-color property defines the background color for an HTML element.

To change the background you can use the following code

<body style="background-color:powderblue;">

or you can select the individual element the h1 and p element and apply the tags

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

OPEN YOUR A NEW TEXT FILE ON YOUR NOTEPAD AND TYPE THE FOLLOWING CODE

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

SAVE AND RUN THE CODE

WHAT DO YOU SEE

HTML TEXT COLORS

1.WITH THIS CODE FOR EXAMPLE YOU CAN CHANGE THE TEXT COLOR OF ANY ELEMENT IN HTML

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

2.HTML FONT

USING THIS AS AN EXAMPLE YOU CAN CHANGE THE FONT TO ANY FONT YOU WANT

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>


3.HTML FONT SIZE
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

4.HTML ALIGN

YOU CAN ALIGN ANY TEXT OR ELEMENT FROM LEFT TO RIGHT TO CENTER USING THIS CODE FOR EXAMPLE

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

HTML Formatting Elements
Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text


HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any extra importance.

FOR EXAMPLE

<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is typically displayed in bold.

Example
<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example
<em>This text is emphasized</em>

HTML <small> Element
The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>

HTML <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element
The HTML <del> element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element
The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

Example
<p>This is _subscripted text.</p>

HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1]:

Example
<p>This is ^{superscripted} text.</p>

HTML Styles - CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

he word cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else)!

Using CSS
CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the text color of the <p> element to red:

To SEE HOW INLINE CSS works, open a new notepad and type the following code and save it as HTML and run the code by opening it with a browser

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:

OPEN YOUR NOTEPAD AND TYPE THE FOLLOWING CODE AND SAVE IT AND RUN IT

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

NOTES
Because the h1 and p tags have be set to blue and red any word you type using the h1 and p tag are therefore set to blue and red

Because the background colour has been styled to appear powder blue in the head section, the code runs its job and sets the background to powder blue

Following...

Please can you create a training plan and timetable or is it that one will just need to come here and be following what you typed?

Again, so you know who is with you or following the training.

Just my personal opinion. I actually need this and Python in view too

External CSS

This is 3rd way of styling a HTML page and it involves creating a seperate document with any text editor.

Such document must be saved as .css INSTEAD of .html

Then in the .html document, in the head section a link is used to reference and attach the css document

In other words

Step 1 create a .css document with notepad or any text editor ( YOU MUST SAVE THE DOCUMENT AS .CSS )

FOR EXAMPLE TYPE THIS CODE INTO A NEW NOTE PAD AND SAVE IT AS styles.css


body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

SAVE THE ABOVE DOCUMENT AS styles.css

STEP 2, OPEN A NEW TEXT FILE WITH NOTEPAD AGAIN AND SAVE THE FOLLOWING CODE BELOW AS .HTML FILE EXTENSION

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

SAVE THE DOCUMENT AS INDEX.HTML

STEP 3. CREATE A FOLDER ON YOUR DESKTOP AND MOVE BOTH THE INDEX.HTML AND styles.css document into the new folder


step 4 : Run the index.html file

What do you notice

If step 1-4 has been done correctly

You should see a powderblue background
You should see this is a heading in blue text
you should see this is a new paragraph in red text

THIS IS HOW YOU CHANGE A HTML DOCUMENT WITH AN EXTERNAL CSS DOCUMENT
the index.html file and the styles,css file must be kept in the same folder for the magic to work


IF SOMETHING WENT WRONG WITHIN STEP 1-4
YOU WILL ONLY SEE A WHITE BACKGROUND INSTEAD OF A POWDER BLUE BACKGROUND

With an external .css style sheet, you can change the look of an entire web site, by changing one file!

yusufmurry:
Following...

Please can you create a training plan and timetable or is it that one will just need to come here and be following what you typed?

Again, so you know who is with you or following the training.

Just my personal opinion. I actually need this and Python in view too

The idea is if you follow the thread the topics and timetable follow each other automatically

This thread will be available in public for years I don’t want any newbie to ever miss out on the knowledge

All everyone needs is a laptop
A paper and pen

And follow my explanation

Most explanation end with open your notepad and type the following code etc etc

You must do it and tell me what you see and what you encountered

This is how you learn to be a good programmer

This is how you learn a new subject

adonainana:



The idea is if you follow the thread the topics and timetable follow each other automatically

This thread will be available in public for years I don’t want any newbie to ever miss out on the knowledge

All everyone needs is a laptop
A paper and pen

And follow my explanation

Most explanation end with open your notepad and type the following code etc etc

You must do it and tell me what you see and what you encountered

This is how you learn to be a good programmer

This is how you learn a new subject

Good job boss, following and anticipating. May Almighty God blesses you.

adonainana:
If you don’t want stress using a notepad to be typing code all day

Then download Microsoft visual studio https://visualstudio.microsoft.com/#vs-section


Please note visual studio can only be downloaded on a computer

The best way to learn a computer program is to learn it offline then come back online and learn more

Watching YouTube videos all day would just waste ur data all day and you will waste ur time and be frustrated

The program helps you so much as it automatically guesses which programming language you working in html, or Css , python no matter the programming language under the sun, it will guess it and give you hints . Also you have to do is download it for FREE.

And Microsoft visual studio is so good that it will give you a hint of your code is wrong or you are typing something the wrong way or something isnt right somewhere

This is how Microsoft visual studio looks and all you have to do is click file and open a new text .

And when you are done click control plus S to save your work

And run the code by clicking shift plus F5 or navigate to the run code option on the navigation bar

Pls for the visual Studio 2022 download drop-down, which should be selected:
Community 2022
Professional 2022 or
Enterprise 2022?

yusufmurry:



Pls for the visual Studio 2022 download drop-down, which should be selected:
Community 2022
Professional 2022 or
Enterprise 2022?

Professional 2022