Web development, the starting (HTML & CSS) [lesson-1]

6 min readSep 23, 2020

Hey, This is my first tutorial article, and probably your first step for becoming a web developer if you aren’t one yet! I recently made a full web development guideline, If you read that and wanted to get started, start from here!

Ohh, I know that some people prefer video tutorials rather than written tutorials. So, If you want Some good video tutorials on HTML, CSS, I prefer these.

Enough overview! Let’s start QUICK!

HTML

Html stands for HyperText Markup Language. It’s the skeleton of all websites if you consider the web as a human body. HTML allows us to make the main foundation, the base content, text, image of the website.

Let’s just show you a simple HTML code! Don’t get scared after watching it, this is very easy and you will get a hang of it very soon.

And the result of the code is-

Now, time to learn! First of all, You have to turn on a setting on your device. (Show file extensions)

Note: If you are on the mac or not on windows 10, people search on google about how to do it on your OS.

Steps:

Open your file explorer
On Top, There is a tab named “View”, click it.
Check the option “File Name Extensions” and make sure it’s enabled.

Now, Go to any folder in any drive where you want to start learning and writing codes. Make a text document, name it “index” because it’s the standard. You can see that its name is “index.txt”. Now, rename it to “index.html” or “index.htm”.

Note: for an image, it will say .jpg or .png, for audio, it will say .mp3, .webm, .m4a These are called extensions. You won’t see them unless you check the “File Name Extensions” Option

The software where you will write code is called IDE/Text Editor. I prefer VScode. It’s a pretty advanced software. But, I think you should start with it from the beginning. Download VScode and Install it.

Now, Open The “index.html”. It will open a browser that will be fully blank. Don’t get surprised, because you haven’t written anything yet! Minimize the browser, right-click on the file, click “Open with Code”. (Make sure you allow the “Open with code” feature for files and folders while installing VScode)

The Interface will look like this and you write from- (I pointed the place)

The Latest Version of HTML is 5 and for writing that, First, write the code like this, “<!DOCTYPE html>” with the angle brackets and exclamation mark. For writing clean code, press enter, and go to the next line.

Now, write with the < & > “<html>”. These are the tags that I told about earlier. They are wrapped with < & >. So You wrote, “<html>”, do another line break, write “<head>” This is another tag that represents the head tab of our website.

Every website has browser tabs.

Every website has these small tabs. What we put in the head tag, is the content that is represented here. inside “<head>”, lets put a tag “<title>”. After that put a site title.

In this case, “I am a Web Developer”. After that, we have to close the tag by typing “</title>”. In HTML, most tags need a closing tag. Now the title is done. Now, Right the closing tag of the other starting tags (</head>, </html>)

next to the head tag, right a tag “<body>” and close is with “</body>”. It’s basically the main page that has the content. Inside it, write a “<h1>”, “</h1>” tag which represents heading-1 (The biggest size). Inside this, write it, for example- “Hey There!”. Let me show you the code!

I have added indentation for your understanding and neat coding!

Note: Use tabs on starting for indentations and neat spacing! Code colors may look different in my software because of themes.

The difference is I wrote a “<p>”, “</p>” tag instead of “<h1>”, “</h1>”. It is short for “Paragraph”.

To see the result, maximize the browser now. If anything hasn’t changed, reload the page and you will see something like this!

Now, Let’s meet CSS. You can write CSS in 3 ways. Inline, Internal & External.

THE CSS

In this lesson, we will only check the inline CSS. What it basically does is, styling the HTML elements.

For now, let’s stylize our “Let’s start” text. To write CSS, give a gap after your tag name before the right angle bracket. and you can write CSS there. here we will get familiar with attributes. Every HTML tag can have attributes. there will be an attribute name (for CSS, the name is ‘style’), an equal sign (=) and the values will be wrapped in quotations.

In this case, we can write

“<p style=“[the CSS code]”>Let’s Start!</p>”

“<h1 style=“[the CSS code]”>Let’s Start!</h1>”

Note: “style” is an attribute name which is only for CSS. There are many other attributes that we will check later. after the equal sign (=), You can either put single quotes or double quotes (“” / ‘’)

Inside the quote, we will write CSS! Now, In this case, I want to make the size of the “Let’s Start!” text bigger. I also want the text to be a little greenish type.

For that I will write it on the structure of “ style=“Key: Value;” ”. The key refers to the property name and value refers to value (simply).

For making the text bigger and changing the color, we will put, style=“Font-size: 40px; color: #029E74;”

Note: You must put a colon (:) after The key and a semicolon (;) after the value! Also, you can see that I wrote a thing called 40px. px refers to Pixel. A pixel is just a unit that has the size of a small dot.
On the other hand, I wrote #029E74 as a color. It’s a hex code that I copied from a green color which is slightly different from the general green. I used a tool for copying. You can simply write green instead of the #029E74;

You can check my code for better understanding-