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 & Wednesday on Twitter threads

You need a PC and access to data connection and Twitter to keep up with us

You need an IDE such as VsCode application for PC Lastly to write and run your code

Lastly, you need zeal, determination and dedication

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.

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

Introduction to HTML, CSS, and JAVASCRIPT

What exactly is HTML?


We humans can tell the difference between a header and a paragraph by looking at a page; computers lack this intuition. To successfully display a web page, a browser must be explicitly told what each piece of content is.

By looking through the document below, you can tell which is the title, heading, sub-heading, and cover picture right away. Your computer isn’t nearly as intelligent.

So how exactly do we tell the browser what’s what? This is where HyperText 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 tag
  • <a>: An anchor which creates a hyperlink to things like other HTML pages, files, email addresses, and more

Most HTML elements have both opening and closing tags to indicate where an element begins and stops, as seen below:

<p>writing a paragraph in HTML</p>

<h6>this is an heading 6 in HTML<h6>

There are a few exceptions, such as the <img> tag, which you will understand even better as we proceed.

<img src="emoji.jpg" alt="the picture of my dog.">

So let me show you how a basic HTML file looks on an IDE.

<!DOCTYPE html>
<html> 
  <head>
    <title>A Basic Web Page</title>
  </head>
  <body>
    <h1>My First HTML File</h1>
    <p>This is the beginning of my Frontend Web Development Journey.</p>
  </body>
</html>

In the above image, The first line, <!DOCTYPE html>

The fact that the majority of HTML elements have both opening and closing tags to specify where an element begins and finishes is referred to as a doctype declaration. This parameter specifies the HTML version of the file that is written to a browser. When defining HTML for this file, it indicates that it was written in HTML5.

For the second line, note 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.

<!DOCTYPE html>
<html> 
  <head>
    <title>A Basic Web Page</title>
  </head>
  <body>
    <h1>My First HTML File</h1>
    <p>Congratulations! You're learning to code from Agba Akin.</p>
  </body>
</html>

See the Pen
Untitled
by aptLearn (@aptlearn)
on CodePen.40347

Let me explain this further

<!DOCTYPE html> — This tag determines the language in which the page will be written. HTML 5 is used in this instance.

<html> — This tag indicates that we will now write in HTML code.

<head> — This section contains all of the page’s metadata — information that is primarily intended for search engines and other computer programs. The code we insert on this page will not be visually displayed to users.

<body> — This section contains the page’s content.

 


If you will like to take this course in full, practice in real-time, acquire certification, and more, please click here.

168 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

        1. Ekeinde Joshua says:

          Great piece, I am looking forward to be under your tutelage

          1. Sweet 😊

        2. Thank you very much, please kindly help. Was unable to watch the setup video for the IDE

        3. Shittu Afeez says:

          My phone can not play the video uploaded. Does that mean I can only use the PC to play it

          1. Teewhy Lee says:

            Meeky, is that you? 😝

      2. Hello sir i want to get a clear understanding about coding

      3. Fesan Joel says:

        Your way of teaching will definitely attract even unserious people to be serious. You made learning so easy. Thanks for all you do. God blessings will continually be with you. Amen

      4. Ezekiel Felix says:

        I have finished this first course but my laptop is bad can I buy the MacBook you once offer for 100k ?

    1. Eziego caleb says:

      Thanks so much for this piece

    2. Hi Akin thanks for the session.
      I encountered a challenge while setting up- the part of Run and Debug.
      I clicked chrome but I saw launch.json promoting what you I do?

    3. Sir do you have an any YouTube channel?
      For learning by watching your videos it would be easy to learn.
      Thank you

  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

        1. Really love the class but does one really need to get a laptop to know all this very well. Can’t i do it on my android phone. Thank you

    1. God bless you sir, the only thing is to keep on trying

  3. Oni Moyosore Temitope says:

    Thank you so much for this

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

      1. pls how do i install a live server and also use it so i can view the output of the codes?

      2. Shittu Afeez says:

        How do we do that master!

    1. You’ll have to run it on your VScode . You right click on the name you gave your work and you’ll get reveal in explorer . Chrome is better Cause your work might not show on other browser . Tho I use chrome

  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.

    1. Shittu Afeez says:

      How do we do that master!

  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.

  16. Thanks for this great opportunity boss, just stated today though

    1. Thanks Akin. Greater grace.
      I will have to get a laptop by fire by force now.

  17. Abdulmalik says:

    I’m joining the class late and lack one or two things.
    It is interesting and Inshaa Allah.
    I’ll try as much as I can to catch up.

  18. Sulaimon Ibrahim says:

    Very interesting class and easy thread. This is great and you have done well man

  19. Baqr uthman says:

    Thank you very much boss, very beginner friendly 🤗

  20. New Years Resolution: I MUST follow your teachings with all my might.
    Thank you so much

  21. Prince Onyedikachi says:

    I am a beginner and from what you have just showed me the door has been unlocked. I am willing to follow your teachings, and I pray for the grace of God upon your life and more wisdom to offload

  22. Apata Amos says:

    I was able to get the VS code installed and I typed out the code and it feels good. Thank you for putting this together.

  23. Bamidele oluwatobi says:

    Very educative I will be goin through late night because am at work for now practically

  24. Dominion Yangi says:

    Thanks so much It was quite surprising that I understood every bit thanks to your detailed explanation.
    But I have one question
    How come we do see things like on some websites?

  25. Thank you very sir
    Please can you tell us the function of this </ ?

  26. Taiwo Kazeem Olalekan says:

    Thanks so much for this wonderful opportunity. Can someone without pc download the app and start learning this.

  27. Seun Odukunle says:

    This is really good.. I’m a beginner and I find your class, your teaching and explanation very exciting and easy to follow.. God bless you

  28. Many thanks Agba. 2022 surely starting on a good note.

  29. Emiator Destiny says:

    All the way from Twitter you the best, selfless and humble thanks for this platform

    1. Great job sir, well detailed class. God bless you for this.

      I have a question sir, what if am working on a website that has a title and sub title, how can I achieve this?… Sub title… Will it come after the title, the opening tag and closing tag

  30. Finally found something useful.. Thanks boss

  31. I just bumped into your threat on twitter and finished the first lesson and a bit enlightened, looking forward to the next. Thank you very much for what you are doing for the majority of us. God bless you

  32. ALIYU UMAR says:

    Thanks very much. i’m really grateful

  33. bro thank you for this, i still dont know how to write the codes myself

  34. Obiunu Efemena says:

    Good morning and thanks for this sacrifice you’ve decided to make… The video on the 4th tweep refused to play, I tried it so many times it only displayed the movement of a hand but it didn’t play at all.

  35. Rahman Balogun says:

    Thanks for this boss

  36. Is HTML case sensitive?

    1. Generally, HTML is case-insensitive, but there are a few exceptions. Entity names (the things that follow ampersands) are case-senstive, but many browsers will accept many of them entirely in uppercase or entirely in lowercase; a few must be cased in particular ways. For example, Ç is Ç and ç is ç. Other combinations of upper and lower case are no good.

  37. Omojarabi Femi says:

    I enjoy every bit of ur work sir. I pray for greater height in life in Jesus Name!

  38. Oluwafemi Sunmola says:

    Awesome, it’s really a journey. Thanks sir for your time.

  39. Goodness Trix says:

    Looking forward to this

  40. Thank you, this was helpful.

  41. olanrewaju says:

    perfect lecture boss

  42. JEFFERY ABOAGYE says:

    thanks boss, I’m elated as to starting this journey

  43. ADESHOLA JOSHUA IDOWU says:

    Thank you so much , this is so helpful

  44. I’m really glad that you gave me the opportunity to learn something this year Bless man well i wanna go far on this ….

  45. Ibrahim Abba Bashir says:

    I’m going to stick with you till the end sir, Thank you for this.

  46. Anulika Umeaku says:

    This is so helpful..

  47. Toluwanimi says:

    Thank you so much Sir, God reward you bountifully 🙏🏽

  48. Collins Beka says:

    Wow! This is something…

  49. I love it. Easy to understand and I’m down for this. What and what do I need to download to follow up with your classes?

  50. Chukwudi Nnodim says:

    Thanks for all that you are doing. I saw your tweet and got interested with learning the path with you. I already have solid knowledge of HTML5, CSS and basic knowledge of JavaScript. I’m willing to follow this till you notice my effort and possibly get the link to my first tech job.

    Regards

  51. HAMMED Sherif says:

    Weldone. Thank you for this

  52. you’re literally changing the world right now king.

  53. Please I would like to have 1 or 2 serious guys who is very serious and determined so we can work together, set targets and archive our set goals on weekly basis. I can send you a mail if your interested.

  54. hi,please if i’m using a phone and i’m using the solo learn app where do i click to show the output of the code?

  55. I did it already
    thank you😭😭😭😭🥺🥺

  56. hi please why are there spaces in front of some of the html tags?
    and how do i know how many spaces to keep. i’m talking about something like this

    A Basic Web Page

    My First HTML File
    Congratulations! You’re well on your way to creating your own web pages.

    why is the head tag or title not on the same line as the doctype and html above?
    is that a rule or it depends?
    thank you

  57. Alameen Umar says:

    Thank you sir. I’m excited about this.

  58. John Tesla says:

    Thank you so much for this life changing opportunity. Almighty Allah grant your heart desires Insha Allah.

  59. Monday Michael says:

    Sir you are doing a very nice job God bless you

    Sir I can’t play the set up video on my phone I have downloaded the vs code on my system I would have downloaded it from your link but I don’t know which particular VPN I can use for my system..

  60. Please, I want to learn coding……can I start from this lesson?? Or where do I start from Akinola Abdulakeem

  61. Blackbird says:

    Sadly I don’t have a laptop 😭 does this bring me to the end of my journey?

  62. Michael Ezeka says:

    Looking forward to the next class

  63. Thank you so much Egbon… I really appreciate you am a slow learner and am really trying but it’s not easy for me.. done with the first step and I hope to gain more

  64. Thank you Sir for this initiative
    Sadly I’m just joining class today…
    The attached video for the set up is not playing, look into it please?

  65. Hey Akin,

    Thank you very much for this!

    I finished the first class, late comer, I know… lol.

    Anyway, I’m having a hard time having a hard time locating the remaining 4 HTML classes before moving on to CSS.

    I joined the first one and it was amazing! please make a list (with links) to each of the classes or just point me in the right direction.

    Thank You!!!

  66. Ifeoluwa Ezekiel says:

    Thank you very much✊🏽✨

  67. Amo Tsetse says:

    So excited to learn more!!

  68. Iyanu Wales says:

    Thank you for this sir

  69. Na God go bless you 🙏🏿

  70. I’ve got stuck to your space lately.. I would love to operate a one on one class .. Thanks in advance..

  71. Dipupojames says:

    Bro! You are a gift from God. Thank you so much for this.

  72. Ernest Ndaji says:

    A big thanks to you sir, I succeeded in replication what you did on the video, but it still looks like mystery, I hope I get to understand it better soon.
    More grace 😊

  73. Oh wow… Thank God for passionate people like you.
    Thanks alot for the sacrifice.

    Though the video frustrated me so much but I won at last.
    God bless you sir

  74. Thank you so much for this lecture. But please when I tried reviewing the coding I did with my chrome, it didn’t work. I don’t understand what it’s saying. It brought out a launch.json with a lot of codings. It didn’t show me my web page

  75. Seleem Aleshinloye says:

    With this I was able to create a webpage …thank you so much

  76. cravehub9ja says:

    Hi!! i just started this, following your tutorial, it wasnt tough.. thank you for showing us the way! hope to achieve more with your lessons!

  77. charles Midas says:

    My first lesson, continue making us great.

    1. Setlokoane Ntsala says:

      Thank you very much Akin for your kindness and generosity, i have been following your tweets even though i didn’t have the PC, and i was inspired to get one. I hope I’m not too late to join the course. God bless you more my brother, by the way im from South Africa.

  78. sulaimon buhari says:

    thank you so much

  79. Martin Harmony says:

    Thank u so much sir.just came across this today and I have able to complete the practical task u did here with solo learn and quick edit app.U made learning this easy.God bless u 🙏

  80. Thank you very much for this. May God continue to bless you

  81. Keep it up man, you’re doing a wonderful job.

  82. Was an eye opener to understanding certain things.. Thank you

    But, the video can’t be played

  83. Thank you so much for helping us . What I needed is zeal and dedication for coding . I’m not the Type who has more time siting in one place but coding requires more time and total commitment to work . God bless you brother . With what I came across tonight you gave me another chance to get more serious with coding

  84. Hey,
    I am starting your class today.
    Hoping to learn new things.

  85. Please how can we download the IDE on PC?

  86. Osokomaiya Oluwasanmi says:

    Beautiful piece.

    Thank you for your enlighenment sir

  87. Augustine says:

    I just started going through your twitter account some days back where I found the link to this amazing content. I must confess, I am not just intrigued by the simplicity of the choice of words you used for beginners like me, but also carried away by how your write up has created a desire to know more and also grow further in this field. I hope to meet up with the class. Thank you Sir.

  88. Can I use sublime text as an IDE?

  89. Olaseni Abibat Ayanfeoluwa says:

    Thanks Agba, it was explanatory but I could not see well, maybe you are too far from the camera. I will be glad if there is a better way we can go about it. Thanks

    1. George Duka says:

      Nice one. Wow. Please can there be a sort of space where your student can login and out so as to continue the lectures when they are free.

    2. George Duka says:

      And also a quiz after each class.

  90. Thank you so much for this lecture. God bless you! please when I tried run and debug my code with chrome, it didn’t work. I don’t understand what it’s saying. It brought out a launch.json with a lot of codings. It only show ” about blank page ” on my web page.

  91. I’m now on track
    Thanks Agba.

  92. Bartholomew says:

    Just joining the class for the first time today, can I still catch up?

  93. Wilson Tomisin says:

    Thank you sir

  94. Oluwatoni Oluyemi says:

    Been richly blessed with all you doing.

  95. Justice Emma Anya says:

    Thanks so much sir. God bless you

  96. super amazing sir!!!!!!!
    God blss you abundantly!

  97. Wow super amazing!!!!!!!
    God bless you abundantly sir!

  98. Good morning Akin, im so pleased to read on how you break down coding for beginners on your platform in simple terms…
    please you should try and be audible in your voice or you increase the volume to your device, i hardly hear you clearly in your videos…. thanks for the good work you are doing keep it up.

  99. Peter Oluwatola says:

    Wow! This is great am so happy following u on twitter, thanks for ur time and teaching us especially me as a beginner. God bless just joining I hope I catch up in time.

  100. Thanks a lot for such a brief but bountifully rich package. I feel like I want to dive into teaching too! I’ll like to continue with all the lessons but will gladly welcome the opportunity to work at my pace for I don’t have enough time in the day to focus sir. Make it easier for me. Thank u!

  101. I really appreciate you sharing all this with us, thank you.

  102. Yambozibe Torutein says:

    Thank you for this Boss!!🙏🏻🙏🏻

Leave a Reply

Your email address will not be published.