Building a website from scratch free course Part 1
Hello folks and welcome back to "Creating a website in mints for beginners"
in this video we are going to start creating our website
we will start creating the header of our site which will be styled using css3 properties so let's start creating it, you can either follow along by watching this video or you can continue reading below.
we will start creating the header of our site which will be styled using css3 properties so let's start creating it, you can either follow along by watching this video or you can continue reading below.
Now start by opening your text editor and creating some structural tags that look something like this
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
now that we have our structural tags in we need to save it (create a new folder and save)
NOTE: Save the file as "all files" and put .html or .htm (Don't forget the dot) at the end of the file name
you can name it anything you like but for the purpose of this tutorial series you should name as index.html as this is going to be our homepage
the homepage file is always an index file for any website
okay let's add a title to our site
in the head section add this code
<title>Our site</title>
of-course delete the empty <title></title> tags.
great..!! now let's add header section inside of <body></body> tags
so just create a header tags (<header></header>) and inside of these create another h1 tag write something in it it and save
Now your code should look something like this.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<h1>SomeText</h1>
</header>
</body>
</html>
ok go ahead and open that file in a browser by double clicking on it or by right clicking and choosing to open with a browser you are using.
Looks awful right ??
but it's just the starting we are going to make look pretty
Now go back to the folder where you saved this file and in that folder create a new folder called "css"
ok now in that "css" folder create a new file and name it "style.css". Now open that file up in your text editor
reset the margins and paddings to 0 by adding a simple rule at the top in style.css
* {
padding:0;
margin:0;
}
So what that does is that it selects all html tags by writing "*" and sets there paddings and margins to 0
okay now select the header tag using css selector "header"
and add following styles
header {
font-size:2.5em;
background: rgba(166,44,44,1);
}
Don't know what that means ? don't worry let me take you through this code in details
So the font-size (i think you probably have guessed that one) just sets the font size of the text we wrote in the header section , you can change that to any size you want or like i will just keep it 2.5em
The second line well i think that's pretty confusing isn't it ?
don't worry it's nothing you can't understand.
Basically that is just setting the background color of the header to a red color and sets the opacity to a 100%
How ??
let's look at this
rgba(166,44,44,1) Ok the first three values are Red, Green and Blue values "rgb" and the last one is an alpha value which sets the opacity by going through 0 to 1 (0 , 0.1, 0.2....1)
i think that should clear your mind (at least a little) if you are still having trouble go ahead and search for "rgba color values" and read about that property.
ok before we open our index file in the browser we need to link to our stylesheet file which is located inside of the "css" folder
to link to our stylesheet file add the following code to the head section
<link rel="stylesheet" type="text/css" href="css/style.css">
Okay so that should now link to our stylesheet. now open your index file in your browser and see what happens
So did that look good ?? No ?? let's add some more style to it.
header {
font-size:2.5em;
background: rgba(166,44,44,1);
text-align:center;
color:rgba(255,255,255,1);
padding:40px;
text-shadow:2px 2px 5px rgba(0,0,0,1);
}
Now that should look okay ..
i think you understand the code above a little bit so i will only explain the text-shadow property a bit
so in the text-shadow property we are setting 2px horizontal shadow 2px vertical and blurring it by 5px after that we are just setting the color for the shadow (you can change that if you like).
So this is how it looks
Okay now that's it for this lesson hope you learned something and now if you have any queries or questions you can drop your comments below and i will try to answer you as soon as i can
Now the last thing is sharing the article with friends .. :)
Thank you..!