Language knowledge for Front end developement(Complete road-map)

-

Hey folks, so as far as web development is concern website rely on two main factor which is client side and server side, and to deal with client side(content shown on screen) is known as Front end.

Basic: 

Before you switch to any framework or code editor make sure you clear your all the  basic, and basic for front end consist 3 languages which is :

1. HTML

2. CSS

3. JavaScript

Introduction

so HTML is a hyper text markup language which is use to create body of your website.or we can say that structure of website is written in this language like button, navbar, written content(heading, paragraph,etc)

CSS is Cascading Style Sheet which add style to your website or in compact i would say it make your website beautiful, for example you make a button in html then CSS has power to add color, margin, padding, align content, add animation and many more

Javascript can be consider as a brain of your front end, here logic is written to add better punctuality for you're website, and yes javascript is completely different from java.

So after a quick definition, lets see from where to learn, how much time to invest what project should do on basic level

Source:

HTML is very basic markup language and need no quick hustle learn, if you learn it from you're teacher, friend that's good else switch to w3school ( https://www.w3schools.com/ ) or tutorial point ( https://www.tutorialspoint.com/ ) for contextual data and here you got editor to code and practice and for visual knowledge as i also prefer you should go to a YouTube channel

for html you should practice around 3 - 4 week to master, for Project you start by making some simple button, navbar, insert a image than make a body of simple content oriented website of your own choice

CSS need bit higher time to master and you can master it by the method tell above like visual and textual, and be loyal to you're learning like whatever you read watch you should practice on you're code editor for say make a button and CSS to it , write some paragraph and add CSS to it, and to master CSS you need upgrade daily yourself and here project idea pop out , design your previous HTML work, design a best portfolio for you.

JavaScript is a programming language to write the logic for a website for say when event triggered after some time some  changes are shown, so this phase of web development need time learn from available platform and practice a lot, then add javascript functionality to you're portfolio, and make you're portfolio as beautiful as you are😃

PROJECT:

1.Personal Portfolio-Create a beautiful portfolio where you got chance to showcase you're complete talent by making it and tell world about skills hobbies internship personal experience etc etc.

2.Create a website which reflect you're interest, it'll be helpful in your personal interview.

3.Small Game: like a Tic Tac Toe, Snake game, Hang man etc.

4.Major Project: An E commerce website for you're interest.

Quick Tip:

Add all of the above project in portfolio, to showcase various project in one project  

Improvement is key to success , so upgrade all project day by day, by adding some functunaltiy to code, style some element, adding animation and many more

By following this road map you'll become a awesome front end developer 

Comments

Post a Comment

Popular posts from this blog

Simple increment program in Javascript with source code(using HTML, CSS, JAVASCRIPT)

-
 Hey folks, here is a simple javascript program to increment the value by one by clicking on a button, as a new programmer we face lots of delima like what to learn, where to learn what type of framework should i master and many more, so we should start from basic of the programming world like creating a incremental program which return +1 value when you hit the button.   So here is html code : <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <link rel="stylesheet" herf="count.css"> <script src="countjs.js"></script> <body>     <div class="heading">D CODER</div>     <div class="count">          <button id="dadd" onclick="inc()">+</button>          <input type="text" id="text">      </div> </body> </html> In this HTML code i created one div for my p...
Read more

Margin in CSS-Explained

-
Image
  MARGIN Margin is a external space given to a element, and those elements are images paragraph heading etc, and this margin is given to create good user interface and make content pleasing to our eyes. So here question arises, Where to give a margin: so we can give margin to :  TOP of element. BOTTOM of element. RIGHT of element. LEFT of element. Here is box model diagram to get better overview of margin: CSS Box Model this box model contain an element, whereas height and width is shown in picture then padding is written (top,bottom,right,left) which means inner space given between a border, then border field is their which is outer outline of a element, then external space shown is margin. Syntax of giving a Margin: let, i wrote a heading in html - <h4 id="head">You are reading my blog</h4> In CSS that's how we declare margin to every side  #head{ margin-right:50px; margin-left:75px; margin-top:100px; margin-bottom:125px; } In above example individual margi...
Read more