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!!
Welcome to your first class on HTML. To avoid missing subsequent classes, kindly follow me.
I have Tweeted many threads on the ocean of opportunities flowing in tech at the moment and how you can tap into it, they are all published on my website, and you might wanna check later.
Before we begin, let's discuss what you will be needing to go on this journey.
-Tutorial will take place every Monday & Wednesday using Twitter thread
-You need a PC or mobile phone in good condition
-Internet access
-An IDE App
Then determination and InshAllah 😉
An IDE simply means "Integrated Development Environment" these are tools majorly used to write and run codes, and we have various types.
XCODE { Develop iOS apps/softwares }
Android Studio { Develop Android Apps }
VsCode { Web Development }
Since we are currently starting with web development, we will be using VS-Code.
However, some of you were already making excuses about not having a PC, so I did a few searches to find the best suitable app for use, so you don't get left behind, and I am recommending SOLOLEARN
You can check your respective mobile app store to download these apps and another good news is you can learn and take coding challenges for free as well on it.
To those on PC, please use the link below to install VS-Code
code.visualstudio.com/download
Now let us get to the main course.
Introduction to HTML
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 render a web page correctly, it must be explicitly
told what each piece of content is.
Looking at this document, you can tell immediately where the heading, sub-heading, and cover image are. 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 content in HTML.
Now let us set up our VsCode and starts coding; watch the below video, not all those long boring one; you will enjoy and retweet this. akinolaakeem.com/introduction-t…
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:
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>
In the above image
The first line, <!DOCTYPE html> is referred to as a doctype declaration. This indicates what HTML version the file is written into a browser. For this file, specifying Html suggests that the file is 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.
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 to be completed. 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
INPUT --------- OUTPUT
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, we will enter the CSS Smiling face with heart-shaped eyes if we can finish with HTML next week.
This is a journey, and I want to take you along, so understanding the basics is very important.
We have done above with HTML is more or less an introduction, as I assumed everyone on this thread is a beginner.
Now you assignment
Download and Install recommended IDE for your various devices. Run the HTML codes in the screenshot and post them in the comment.
See you on Wednesday. Do not borrow anyone your laptop, or we will fight.
I know you want to say thank you, but I appreciate it; you can follow my newly launched company product @TheSwiftScores for unrivaled sport updates and analysis.
I love you all, bye for now.
Video summary of todays HTML Class part 1. Please like and share.
Video summary of today’s HTML Class the end. Please like and share.
You also don’t need any thread decompiler, everything we’ve done today can be accessed
On this page akinolaakeem.com/introduction-t…
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.