Every week (sometimes every day we are building full projects). So if you are planning to land a job as a full-stack web developer and you need some cool projects to show to your client, your journey will start now.
Today is day one. you are going to learn basic HTML and CSS, and how to build a web page. So grab your coffee, soda, or whatever you like to drink, stretch your shoulders and your hands. Put that hoodie on or wear your favorite coding t-shirt, and code with us.
Don’t worry no skills needed
Most people like to learn with video tutorials, so here is a video tutorial for this article on YouTube. And you can see the final result of what your gonna build to day!.
If you are looking for some coders stuff or gaming accessories check out our store!Check out the t-shirt of this lesson! CLICK HERE
The coding camp will be divided into workshops to help you understand everything. For the first workshop, we will start with HTML because without HTML elements there is no webpage or website.
Q1: What is the Html?
Html – HyperText Markup Language, is a markup language used to describe the structure of a webpage. The language elements organize and give information about the page to the browser.
We write Html by its special tags or elements. Will understand everything in a minute, but first, what is the hypertext?
Hypertext is the text which you click on and transfer to another webpage. The best example for hypertexts is Google. When we search anything on Google we get a lot of results as a text and when we click on it, it opens another webpage. That’s the hypertext.
Jump for the coding side, create a folder with two files in it “index.html” and “style.css”. Also, create another folder for the photos.
Today we will build a personal portfolio about us, for the people who have pets try to talk about your pet & you can write about your skill or a business you own. So after you picked the content let’s start coding.
For this code camp, we will be using VSCode editor because it’s free, lite, and anyone can get it. If you have another editor you like to use feel free to use it.
If you are using vscode type “!” mark and hit enter, vscode will do the rest for you and your code should look like this.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
This is the base code to any Html page, now let’s explain it line by line
<!DOCTYPE html> : Tells the browser that this page is built by HTML5 ( You can imagine the page standing in front of the browser and holding a paper and says : “hey, this is a HTml5 page okay?”)
<html lang=”en”> : Tells the browser that the page will start from this line. lang=”en” means that the page is written with English Language. (lang stands for language and en is English of course)
<head> : Inside the head tag we write information that does not shown inside the page like the icon tab and the title shown at the tab, CSS pages we linked, the meta info. These are information we don’t see at the page itself.
<meta charset=”UTF-8″> : UFT-8 tells the browser to display the page with whatever language it’s written by, for example if you built a webpage the content is in Arabic language, it might shows squares not characters , that’s why you need to add this line.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> : for the media query to make your webpage responsive with all the screen sizes and devices. (Will learn more about it later)
<title> Document </title> : Here you write the title of the page, this title will be displayed at the tab head ( look at the image down below ) </title> most of the Html tags need a closing tag so <title> is the opening tag and after we type the title we want we close that tag </title>
<body> </body> : Here all of our element will be.
</html> : And here is the end of the page.
The next steps is to imagine the page in your mind or use a pen and paper and draw down how you want it to look like. For our portfolio we want the page look like this. ( Make it very simple for this first draw to know where the things will be not how the page will look like)
NOTE : YOU CAN USE PHOTOSHOP / WHITE BOARD TO MAKE IT EVEN BETTER TO UNDERSTAND AND IT’S A GREAT PRACTICE.
First of all, every page has a header that contains the logo, bio and call to action button. Also, a footer to write the copyright and add some navigation if you have a lot of pages in your website.
Now add <header> </header> before your <body> tag, then add <footer></footer> after the </body> tag. Your code should look like this now.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>iTechYard</title> </head> <header> </header> <body> </body> <footer> </footer> </html>
For our portfolio, we will add the logo , welcoming text and a button. so it’s an Image, Header, Paragraph, Button.
let’s start with adding the logo image, you guys remember the image folder we created? move your logo to there first.
Now to add an image we use the <img> element this element has no closing tag so there is no </img>. Add <img> tag inside your <header>. Then let’s tell the page which and where the image is.
First we use “src” attribute to tell the source of the image. (foldername/image name) you can also use an URL but as a tip always use an image from inside the website folder.
<header> <img src="images/Logo Text Header.png" /> </header>
you should see the img at your webpage now.
<header> <img src="images/Logo Text Header.png" /> <h1>Welcome</h1> <p> Hello to Techies, Gamers & Developers yard! Where you can find all what you need from coding tutorials, best accessouries and more! <br /> Visit our website By Clicking The Button Below</p> </header>
As we mentioned before, we need a header and a paragraph to welcome our visitors, take a look to the code above you will see <h1> tag and <p> tag.
The header tag is <h1> to <h7> but <h1> is the biggest font size and <h7> is the smallest, look to this code :
<h1> header 1 is very big </h1> <h2> header 2 is big </h2> <h3> header 3 is almost normal </h3> <h4> header 4 is normal </h4> <h5> header 5 is a bit small </h5> <h6> header 6 is small </h6> <h7> header 7 is very small </h7>
And that what you will get from that code
The paragraph tag is <p> with the closing tag </p> to add a paragraph, so back to the portfolio code we have inside our <p> tag another tag <br /> which make a break inside the paragraph and continue in a new line.
Let’s add the last element of the header for this web page, the button. But for this part we are not using the button element because we only need a text to open our website URL, button usually used with a form and we don’t need a form in our heading, so we are using <a> element and make it as a button.
<a> </a> : make the text between the tag a hyper text, as we said before hyper text takes us to another page or URL.
<a href="https://www.itechyard.com">Visit Our Website</a>
That’s how we tell where to go or what to open by using href attribute and typing the URL or a Html page. Now our webpage look like this
The body part now! so for our page we need a title, paragraph and img and repeat the same pattern twice, then a very simple form. and that’s it. So, how we can divide our page? there is am element <div> imagine it as a box contain another elements or a section of the page.
So, add <div> </div> inside your <body> tag. Then inside the div we need to add a title as a header which mean <h1> and a <p> and a <img>
<div> <h1></h1> <p></p> <img src="" alt=""> </div>
The alt attribute at the <img> is taking a text to display when the image not found. You can leave it empty when the image does not contain text and it’s only for the design or an icon.
now copy and paste the same div as much as you need, for our portfolio we need a div for the website, store, and YouTube channel so we need three divs.