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.
Congratulations, you are seeing this Tweet; here is a life-changing opportunity to transition into tech this year; we will be starting our coding journey.
Course Title: HTML, CSS & JAVASCRIPT
I’ll explain like you are 5 years old; please retweet for others, and let’s begin!!
— Àgbà Akin (@Kynsofficial) January 3, 2022
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.
Worth every read and really easy to follow through too
Thanks
When a student finds a good teacher it’s like a blessing from the almighty
Great piece, I am looking forward to be under your tutelage
Sweet 😊
Thank you very much, please kindly help. Was unable to watch the setup video for the IDE
My phone can not play the video uploaded. Does that mean I can only use the PC to play it
That is weird, you should be able to play the video
Meeky, is that you? 😝
Hello sir i want to get a clear understanding about coding
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
I have finished this first course but my laptop is bad can I buy the MacBook you once offer for 100k ?
Thanks so much for this piece
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?
Sir do you have an any YouTube channel?
For learning by watching your videos it would be easy to learn.
Thank you
I love every bit of this course. It really enlightened me more but the images are not showing
Oh sorry about that, I will check again.
Pls we need to talk…can I get ur whatsapp contact or better still can u pls hi me on 07030002483
Hi, I will prefer email instead, hi@akinolaakeem.com
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
God bless you sir, the only thing is to keep on trying
Thank you so much for this
You are welcome Temitope
Where do I press to view the output, sorry beginner
Please install a live server from your VsCode
pls how do i install a live server and also use it so i can view the output of the codes?
Hi, please watch the video in the post
How do we do that master!
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
Great piece. Is there any reason or need to write each line with a different indent from the left?
Hi, This is to properly align your code
Looking forward to the next class, Thank you Sir.
Alright, Chidera, see you
Wow, just wow.
😉
Thank you
You are welcome
Thank you for this
You are welcome
God bless you for this
So grateful
See you class buddy!!❤️
Yes Sa’ad
Nice one boss
Thank you Usman
Please Mr. Akin is it necessary for my pc to be connected to the internet?
Oh NO, But it is better with it connected to the internet.
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.
Hi Tunde, Make sure you are linking to the right folder.
How do we do that master!
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?
Hi, I will prefer you use the contact me option on the home page. I wish you success
amazing course
Nice thread , it was easy for me to understand what html is about ..
Finally overcame procrastination!
Feels good to start again.
Happy to hear. Goodluck man
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.
Happy to hear that from you, please close your VsCode and Reinstall
Thanks for this great opportunity boss, just stated today though
You are welcome
Thanks Akin. Greater grace.
I will have to get a laptop by fire by force now.
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.
Very interesting class and easy thread. This is great and you have done well man
Thank you very much boss, very beginner friendly 🤗
New Years Resolution: I MUST follow your teachings with all my might.
Thank you so much
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
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.
Very educative I will be goin through late night because am at work for now practically
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?
Hi your question is not clear
Thank you very sir
Please can you tell us the function of this </ ?
It means closing Tag
Excellent!!!!!
Thanks so much for this wonderful opportunity. Can someone without pc download the app and start learning this.
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
Many thanks Agba. 2022 surely starting on a good note.
All the way from Twitter you the best, selfless and humble thanks for this platform
You are welcome
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
You can use different heading tags for this h1
to
h2 and so on
Finally found something useful.. Thanks boss
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
I thank you
Thanks very much. i’m really grateful
bro thank you for this, i still dont know how to write the codes myself
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.
Thanks for this boss
Is HTML case sensitive?
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.
I enjoy every bit of ur work sir. I pray for greater height in life in Jesus Name!
Awesome, it’s really a journey. Thanks sir for your time.
Looking forward to this
Thank you, this was helpful.
perfect lecture boss
thanks boss, I’m elated as to starting this journey
Thank you so much , this is so helpful
I’m really glad that you gave me the opportunity to learn something this year Bless man well i wanna go far on this ….
I’m going to stick with you till the end sir, Thank you for this.
This is so helpful..
Thank you so much Sir, God reward you bountifully 🙏🏽
Thank you, Amin.
Wow! This is something…
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?
Hi, it is right there in the post.
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
Weldone. Thank you for this
Hello, you are welcome
you’re literally changing the world right now king.
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.
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?
Click the Run Button
I did it already
thank you😭😭😭😭🥺🥺
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
Reckon you ask these questions on Twitter spaces. Voice explanation is a lot better
Thank you sir. I’m excited about this.
Thank you so much for this life changing opportunity. Almighty Allah grant your heart desires Insha Allah.
Amin, thank you.
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..
Please, I want to learn coding……can I start from this lesson?? Or where do I start from Akinola Abdulakeem
This lesson please
Sadly I don’t have a laptop 😭 does this bring me to the end of my journey?
Looking forward to the next class
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
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?
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!!!
Thank you very much✊🏽✨
So excited to learn more!!
Thank you for this sir
Na God go bless you 🙏🏿
I’ve got stuck to your space lately.. I would love to operate a one on one class .. Thanks in advance..
Thanks man, God bless
Bro! You are a gift from God. Thank you so much for this.
Thank you very much
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 😊
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
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
With this I was able to create a webpage …thank you so much
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!
My first lesson, continue making us great.
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.
thank you so much
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 🙏
Thank you very much for this. May God continue to bless you
Keep it up man, you’re doing a wonderful job.
Was an eye opener to understanding certain things.. Thank you
But, the video can’t be played
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
Hey,
I am starting your class today.
Hoping to learn new things.
Please how can we download the IDE on PC?
Beautiful piece.
Thank you for your enlighenment sir
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.
Can I use sublime text as an IDE?
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
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.
And also a quiz after each class.
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.
I’m now on track
Thanks Agba.
Just joining the class for the first time today, can I still catch up?
Yes, you can.
thank you so much, sir. this is so easy to grab
Thank you sir
Been richly blessed with all you doing.
Thanks so much sir. God bless you
super amazing sir!!!!!!!
God blss you abundantly!
Wow super amazing!!!!!!!
God bless you abundantly sir!
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.
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.
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!
I really appreciate you sharing all this with us, thank you.
Thank you for this Boss!!🙏🏻🙏🏻
Thanks boss agreed with Patrick when you find a good teacher is truly a blessing