Kamran Ahmed
5 years ago
parent
4c07ac509b
commit
c7589b8325
29 changed files with 172 additions and 145 deletions
@ -0,0 +1,15 @@ |
|||||||
|
#### What is a Frontend Developer? |
||||||
|
A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers. |
||||||
|
|
||||||
|
They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows |
||||||
|
|
||||||
|
> [According to Wikipedia](https://en.wikipedia.org/wiki/Front-end_web_development): |
||||||
|
> |
||||||
|
> Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. |
||||||
|
|
||||||
|
#### Key Components of a Website |
||||||
|
If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable. |
||||||
|
|
||||||
|
Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript. |
||||||
|
|
||||||
|
To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript. |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
#### Common Job Titles |
||||||
|
If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities |
||||||
|
|
||||||
|
* Frontend Developer / Engineer |
||||||
|
* JavaScript Developer |
||||||
|
* JavaScript Engineer |
||||||
|
* HTML / CSS Developer |
||||||
|
* UI Developer |
||||||
|
* Web Developer |
||||||
|
* FullStack Developer |
||||||
|
|
||||||
|
Having Web Developer or FullStack developer in the title would normally mean that you need to have some backend skills as well. Most of the small or service based companies require you to have backend and some UI designing skills as well so it is better to look at the job description also once you have shortlisted the jobs to apply to. |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
#### Technical Skills |
||||||
|
The sections below describe different steps required to become a frontend developer |
||||||
|
|
||||||
|
#### Learning How Things Work |
||||||
|
As a web developer, frontend, backend or fullstack, you should have a good understanding of how the internet works |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Learn the below listed in the order given below |
||||||
|
* What is Internet and how does it work? |
||||||
|
* What is HTTP, how it evolved and where is it now? |
||||||
|
* How do the browsers work? Engines behind different browsers |
||||||
|
* What is DNS? How a website is found on the internet? |
||||||
|
* What's in a domain name? What is an IP Address? |
||||||
|
* What is Web Hosting? |
||||||
|
|
||||||
|
#### Writing Some Code |
||||||
|
Now that you understand how things work, next step is getting your hands dirty and start actual coding |
||||||
@ -1,50 +0,0 @@ |
|||||||
#### What is a Frontend Developer? |
|
||||||
A frontend developer is someone who works on the side of the websites that the user interacts with i.e. front or the client side of the website. Whenever you visit a website, everything that you see is mainly developed by the frontend developers. |
|
||||||
|
|
||||||
They work with designers or UX teams to convert their mockups or wireframes to the actual website that the users can interact with. Also they work with [backend developers](/backend) who work with database and servers to get the data from and to display on the website. Wikipedia describes frontend development as follows |
|
||||||
|
|
||||||
> [According to Wikipedia](https://en.wikipedia.org/wiki/Front-end_web_development): |
|
||||||
> |
|
||||||
> Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. |
|
||||||
|
|
||||||
#### Key Components of a Website |
|
||||||
If we talk about the frontend, all the websites are mainly built with three key technologies – **HTML**, **CSS** and **JavaScript**. If you know just these three, you can start building websites and be employable. |
|
||||||
|
|
||||||
Before we proceed, let me give you a brief overview of how **HTML**, **CSS** and **JavaScript** are used on the website. **HTML** provides the structure to a website i.e. all the text, headings, paragraphs, images etc that you see on the website, they have been created with HTML. HTML provides you just the structure, you need to put another layer on top of it to make the website pretty - this next layer is CSS. **CSS** helps make your websites pretty - the colors, backgrounds, font size, borders, shadows etc are controlled using CSS. And finally, the third layer is **JavaScript** which helps make the website interactive e.g. controlling the actions like showing a popup, switching slider images upon click etc is all controlled by JavaScript. |
|
||||||
|
|
||||||
To understand it better, let me provide the analogy of a human body, the skeleton provides structure to our bodies so it can be equivalent to the HTML, the skin which hides the structure of our bodies and beautifies is like CSS and the muscles which help us perform different actions can be JavaScript. |
|
||||||
|
|
||||||
#### Common Job Titles |
|
||||||
If you know frontend development, there are jobs with different titles that you can apply to. Here is the list of different job titles with almost same responsibilities |
|
||||||
|
|
||||||
* Frontend Developer / Engineer |
|
||||||
* JavaScript Developer |
|
||||||
* JavaScript Engineer |
|
||||||
* HTML / CSS Developer |
|
||||||
* UI Developer |
|
||||||
* Web Developer |
|
||||||
* FullStack Developer |
|
||||||
|
|
||||||
Having Web Developer or FullStack developer in the title would normally mean that you need to have some backend skills as well. Most of the small or service based companies require you to have backend and some UI designing skills as well so it is better to look at the job description also once you have shortlisted the jobs to apply to. |
|
||||||
|
|
||||||
#### Skills Required |
|
||||||
In order to be a frontend developer, all you need is to learn HTML, CSS and JavaScript. Just learn these and you should be employable. I know a lot of developers who just know these and are working as frontend developers and are making decent money |
|
||||||
* HTML |
|
||||||
* CSS |
|
||||||
* JavaScript |
|
||||||
|
|
||||||
Frontend development is broad and there are further skills that are in play but those can be gained over time. All you need is to learn the above three and start making projects ...lots of them. This is how you will hone your skillset and continue to grow. Having said that, the skills and the relevant expertise in those skills varies from the job level, follow the links below to get an idea of the skills required for each of the role levels. |
|
||||||
|
|
||||||
* [Entry Level Developer](/frontend/junior-developer) |
|
||||||
* [Mid Level Developer](/frontend/mid-level-developer) |
|
||||||
* [Senior Developer](/frontend/senior-developer) |
|
||||||
|
|
||||||
#### Before you Start |
|
||||||
Before we start with the skills, there are few things that you should keep in mind which are going to help you a great deal when you are learning. They don't just apply to frontend development but to any other field as well |
|
||||||
|
|
||||||
* Do not let the huge list of skills scare you away. HTML / CSS and JavaScript are the key skills to start building. Once you have acquired these, rest of the skills can be acquired over time when you are doing projects. |
|
||||||
* Don't feel overwhelmed by looking at the "experts" in the field. They started at the same level as you are. With consistency, time and practice there is nothing stopping you to get there. |
|
||||||
* Do lots of projects, lots and lots of projects. Without practice, you will just be stuck in the tutorial hell, you will start to feel that the things you are doing aren't sticking. Only projects can help you escape that. |
|
||||||
* Even when you are learning, polish your experiments, publish them, share it with people. You will be surprised by the support you will be able to get. |
|
||||||
|
|
||||||
And with that said, head on to the [next section](/frontend/junior-developer) where we see the list of necessary skillset required. |
|
||||||
Loading…
Reference in new issue