Introduction to HTML, CSS, & JAVASCRIPT, Introduction to CSS

The Best Introduction to HTML, CSS and JavaScript (Part 1)

Congratulations, you found this post; I will be writing an in-depth article on introduction to HTML, CSS, and Javascript; so let us start our coding journey.

Course Title: INTRODUCTION TO HTML CSS JAVASCRIPT

We are starting with HTML; I’ll explain in full with details: kindly retweet for others. Welcome to your first class on HTML. To avoid missing future classes, kindly follow me on Twitter

I’ve talked about doing wonders with “No Code” and tapping from the ocean of opportunities in tech to enrich yourself. They are published on my website, and you might want to check here.

Before we start, let’s talk about what you need to embark on this journey with me. – Tutorial will take place every Monday on Twitter threads – You need a PC to keep up with us – You need an IDE such as VsCode application for PC Lastly, determination & InshAllah & In Jesus Name (Ijn)

An IDE Means “Integrated Development Environment” it’s usually in the form of a tool; this is what we will be using to write and run our codes; there are various types We have

1. Xcode – Compiling and running iOS & macOS apps

2. Android Studio – Compiling and running Android Apps

3. VsCode – Compiling and running HTML, CSS, JAVASCRIPT, and many other programming language files.

In this tutorial, we will be using VsCode Get your PC and download VsCode From this link

This tutorial will help you set it up.

I’m sorry, the hurtful truth is you can’t simply use only your phone to start your coding journey.

Introduction to HTML, CSS, & JAVASCRIPT

Now let’s get into today’s main course, which is HTML

Introduction to HTML, CSS, and JAVASCRIPT

What is HTML?

We humans can simply look at a document and understand the difference between a heading and a paragraph; computers have no such intuition. For a browser to correctly render a web page, it must be explicitly told what each piece of content is. Looking at this document below, you can immediately tell the heading, sub-heading, and cover image. Your computer isn’t nearly as smart.

So how exactly do we tell the browser what’s what? This is where Hyper Text Markup Language (or HTML for short) comes in handy. HTML is a markup language that describes the structure/layout of your web page. We define this structure by wrapping elements.

An HTML element is formed using a tag, which serves as a descriptor for each piece of content on your page. As an example, the <p> tag is used to describe a paragraph HTML element. Some other examples of HTML elements include:

  • <h1>: Highest-level heading
  • <h6>: Lowest-level heading
  • <img>: An image
  • <a>: An anchor which creates a hyperlink to things like other HTML pages, files, email addresses, and more

Most HTML elements contain both opening and closing tags to indicate where an element starts and ends, like so:

Image

There are a few exceptions, such as the <img> tag, which we will describe in subsequent lessons. So let me show you how a basic HTML file looks on an IDE Note that the text on <p> congratulations….. is not fully shown because it’s long. But I closed the parenthesis with </p>
Image
In the above image, The first line, <!DOCTYPE HTML> (Document Type), is referred to as a doctype declaration. This is used to indicate to a browser what HTML version the file is written in. For this file, specifying HTML indicates that the file is written in HTML5.
For the second line, take particular note of how the closing tag for the <html> is on the last line of the file. One of the properties of HTML elements is their ability to be nested. In other words, HTML elements can exist within other HTML elements.
Image
To properly define an HTML file, we must place <head> and <body> elements within the root <html> element. The <head> element contains supporting information about the file, commonly referred to as metadata. There must be a <title> (providing the webpage a title)
Directly underneath the <head> element in order to be complete. The <head> element may also contain links to Javascript files and CSS stylesheets. The <body> element contains the main content of an HTML file. This is the element that holds the information that is rendered by your web browser. There can be only one <body> element within an HTML file, and most of the HTML you write will exist within this element. Within the <body> element of this file, we have a high-level heading (<h1>) and a paragraph (<p>).

I know all these may sound like Hullabaloos to you, but it gets a lot easier in a practical sense. Then let’s run the code from the picture earlier and see what the browser shows.

Image

You see that it is just a white page with texts, and it doesn’t look like these fine websites you typically visit; yes, that’s where CSS comes in. Hopefully, if we can finish with HTML next week, we will enter the CSS.
I have to make the tutorial very short because this is a journey, and I want to take you along with me, so understanding the basics is very important. What we have done above with HTML is more or less an introduction, as I assumed everyone on this thread is a beginner.
Your assignment before next week when we meet again to continue with our COURSE: HTML, CSS & JavaScripts You can get your PC, download the IDE and watch the video In the 4th tweet of this thread. Pls, leave comments below if you have any questions.

37 Comments

  1. Esther Christopher says:

    Worth every read and really easy to follow through too

      1. When a student finds a good teacher it’s like a blessing from the almighty

  2. iwaloye pelumi says:

    I love every bit of this course. It really enlightened me more but the images are not showing

      1. Olusola ige says:

        Pls we need to talk…can I get ur whatsapp contact or better still can u pls hi me on 07030002483

  3. Oni Moyosore Temitope says:

    Thank you so much for this

  4. Where do I press to view the output, sorry beginner

  5. Great piece. Is there any reason or need to write each line with a different indent from the left?

  6. Augustine Chidera says:

    Looking forward to the next class, Thank you Sir.

  7. Ahmed ojor says:

    Thank you for this

  8. Olayode Usman Ajibola says:

    Nice one boss

  9. Folawiyo Farouq. says:

    Please Mr. Akin is it necessary for my pc to be connected to the internet?

  10. Good evening Mr. Akin, I just begin my class on your page today. However, the images you reference on the page are not displaying (only the attributes showing). Please check and thank you.

  11. Good evening, Akinola. Thanks so so much for this training. I’m a total novice in the digital world and these are totally strange to me even though I went through it like a 100 times, but I’m willing and ready to dive into it wholeheartedly. Please can I get your personal number to contact you for offline training?

  12. Mustapha Mustapha says:

    amazing course

  13. Nice thread , it was easy for me to understand what html is about ..

  14. Akoh Joseph Oche says:

    Finally overcame procrastination!
    Feels good to start again.

  15. Esez Johnson says:

    I followed the video, step after step, but using the live server, my pic is not showing..

    Great work sir… Really loving coding life here.

Leave a Reply

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