FIRST STEP TO CODING WORLD AS A FULL STACK DEVELOPER!
New to coding…?
Come let me explain what I went through as a novice developer.
Before that you need to know what is the concept behind the coding world. Generally to create one application or a web page, the complete work is split into three tasks.
- Front end: This is the page where common users accessing normally e.g.: Amazon/Face book interface.
so how to create that page? what tool I need? what I have to know? here it comes the backbone of all the web pages called HTML(hyper text markup language). The advanced version is HTML 5.
Is HTML 5 only enough to make a static web page?….yes but not completely. We need 3 things to know to make a complete static web page. which are,
1. HTML 5- It’s like a man without dress.
2. CSS- It’s like a dress.
3. Bootstrap- It’s like rental dress.
Don’t worry, these are not three different languages. In a single platform we will use these in similar language. let’s have a look into HTML,
- HTML is used to make the front page of a website. we can make html file in (notepad ++,visual studio code). How the basic HTML program looks and what is it structure:
so that’s all your html basic coding. save it as file_name.html, now run the file in any browser. you can see your own web page. save your file whenever making corrections and refresh your browser so that you can see your modification in web page.
If you want to know all the tags and its usage, go to: www.w3schools.com. whatever you are writing in the body tag <body>hello</body> that will be displayed in your web page. but it’s like a normal content in a book. so here the CSS comes in.
2. CSS(cascading style sheet):
As I said already, it’s like a dress for a naked human. To make the page presentable, CSS is used. Generally saying, it is used to align, format, resize, position, coloring, bordering and all the visual aspects. this can be done in three different ways,
a)Inline
Designing can be made in the same html line itself.
b) Internal
Designing can be made inside the html file in two types, which are, class & ID
it means the content in body tag can be designed from head tag through a function called class and ID. The difference is, class can be called many times from body tag. but Id is one time, same like our personal identity card, its unique right. here is, how it looks:
so here all the CSS activity can be done in between the style tags in head section.
c) External
All the designing will be done in a separate sheet as CSS file and that can be linked to the html file.
this is how it looks:
that’s all about basic CSS. simple right!
3.Bootstrap
you can think, all the designs can be made in CSS then why need to waste time in bootstrap. You will change your mind after knowing bootstrap.
so what is bootstrap, it is a open source library. Instead of designing with lots of code in CSS, we can simply give the link of bootstrap file in header section and call the function from body section through class or ID. e.g.: getting dress for rental whenever needed.
The purpose of bootstrap is to reduce the designing and processing time. this is how it looks,
e.g.:<div class=”jumbotron bg-dark ….”></div>
To learn more about functions in bootstrap go to link: www.getbootstrap.com
so that’s all about the front end. hope I shared some basic things which I learnt as of now.
small tip I wanted to share, start your web page design from the paper sketch. SEE YOU FOLKS…