I have been meaning to make this post for a while to help some people out, it
may come handy to some people but others may not be interested.
As an in-house web developer for a company I create eCommerce and informative
websites. I know a few people in the community are keen to learn coding languages,
so this post will start of as the basics of web development then I will slowly progress
with the more complicated bits.
Getting started.
So to get started one of the first things you are going to want to do is you have a
text editor, for me I use Atom or Brackets, both very good text editors and free,
Then you should look for a framework to work off as this can really help if you
are a beginner. Frameworks are also used by web development companies, here are
a few frameworks I have used, Bootstrap is by far my favorite so I would suggest using it.
Here are a few I have used, like I said I suggest using bootstrap as that is what I will be showing you, the other frame
works have similar ways of doing what Bootstrap do but is coded different.
The next step is to have your root folders to store your files. I usually create
the folders from outside the text editor then I create the files from inside the
text editor. I usually make a folder to fit everything into then I create a folder inside
of that called assets, which then I make a folder in that called css. Always make sure your
home page is called index.html as that is what the browser reads it as. I will show you how to change this soon.
Also make sure you have a CSS file so you can change the look of your site,
this can be called what ever you like, I usually call mine 'style.css'. inside of the css folder.
I will now show you how to make a basic landing page.
You will want to start creating your html elements, we start off by putting in,
<!DOCTYPE html> - This tells the browser that it is reading html
<html lang="en"> - This tells the browser the html is in English
Then you will need to add the tags <head> </head> - You can put many things in the head tags but for now I will just be showing it link the css file and
the title tags. which should look something like this depending on where your
css file is-
<head>
<link href="./Assets/css/style.css" rel="stylesheet"> - This is what will link your css
<title> Web Starters </title> - This is the heading what shows in a tab.
</head>
Now you need to link in your framework, if you are using Bootstrap you can either
download the zip and put the files in the folders in your root or you can easily
link bootstrap in using
maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css - This will link Bootstraps css to your website, even when you are viewing it locally as long as you
are connected to the internet.
maxcdn.bootstrapcdn.com/font-awesome/4.4...font-awesome.min.css - Another thing apart of bootstrap is Font Awesome. Font Awesome have amazing responsive icons which you can use in your website I will get more in detail with this in the future.
Now your index.html should look something like this-
If you are wondering what <!-- --> means, this is how you comment in html so the browser cannot read it.
Next we will need to create a body tag after the closing of the </head> tag, a body tag looks something like this <body> </body>. Always remember to close the tag or
your html may not work.
Now we will start the body off with a header tag to specify what the section is, we can then either give it an id or a class, we will be giving it a class so we can
link the header to the css, we do this by simply putting- <header id= "head"> </header> you can put what ever name you want in between the brackets as this will not matter
unless you have called another id by the same name.
Now if you are using bootstrap, under that you can go ahead and put in a class like so <div class="container"> </div> this is a Bootstrap class so this
needs to be called 'container'. It will make the header look nice and tidy for what ever we put in there, it also helps making the size mobile friendly.
So at the moment you should have something like this
After the container we add in the tag <h1 class="title">Web Starters</h1>, the <h1> </h1> tag stands for heading 1, Bootstrap and many other frameworks
have there own pre set headings for this so we will not have to make changes to the text, unless we want the position to change which we will be doing. Also the class does
not have to be called title you can change it to whatever you want.
so now your index.html file should look something like this-
Now we move onto the css.
The classes and id we have used will help us change the style of those elements.
We will start off by making the body and html tags fit into 100% of the page height wise and width wise like -
body,html{
width: 100%;
height: 100%;
}
So the body and the html are separated by a comma, this lets us select 2 tags at a time.
Now we link the head tag in the html to the css like this-
.head{
}
When ever you have used a div class in html you link it to the css by using the full stop and the name of the class.
If you were to link a div id to the css from the html you would do the same thing but change the full stop . to a hashtag #
so for example an id would look something like this, we will not be using this in the css as everything is a class in our html-
#head{
}
Now inside our header class we will want to add
The reason why it has 100% width and height is so it covers the landing page. using background will let us have a picture as our background, please use the same url as me
so our sites will look the same. now the rest of the css in the head is to make the background a cover meaning it will fit the whole page, the reason 3 different types
of cover is in the code is so it makes it more browser compatible, the -moz-background-size: if for firefox 3 it does not work on firefox 4.0, so the image will not
fit on firefox so please use a different browser, I will show how to make it compatible in the future.
Now for the last bit of css we will do so far-
.title{
margin-left: auto;
text-align: center;
margin-top: 150px;
font-size: 60px;
}
If you are unsure on what the marging and padding means please check this out www.w3schools.com/cssref/pr_margin.asp
Using text-align: center will make our title center on our landing page. I have used font-size: 60px to make the font bigger, you can change it to any value you wish.
That is the end for the first part of the basics I will show how we can make the landing page look alot nicer when I update the post.
Some of you who know html and css may wonder why I have put bits in which are not needed, its just to help others learn the
meaning of the code.
If you get stuck you can add me on steam or I will help you if you comment in the post.
I may of messed up on a little bit of text as I have put alot in, in one go.
I will add images as soon as I can