DEV Community

loading...
Cover image for How to start a career as a frontend developer??🚀Look no further.💁

How to start a career as a frontend developer??🚀Look no further.💁

drealmaster profile image Okere Chibuike Updated on ・5 min read

Salut(its hello in French😇)👋

To start a career you need to learn the skills of that career.
There are many ways and resources that can help you in picking up these skills but the path isn't always clear with so many options available for learning and for someone just starting out it can be really overwhelming.😑😭 Trust me i have been there.

My aim of writing this is to literally hold your hands🤝 and walk you through the process/path that would give you an edge over other newbies. Are you ready? OK Allons-y🕺(let's go)....

Who is a front-end developer

Have you ever looked at a website and wonder how/what made it worked? How the website layout looks different on different screen sizes or how a button acted when clicked? All these and more are done by a Frontend Developer.

Skills required

  • The internet
  • HTML
  • CSS3
  • CSS Framework
  • Javascript
  • Javascript Framework
  • Version Control System

The Internet

An HTTP error message😫

Learning about how the internet works can be boring🙊(please don't tell anyone I said that😂). I just narrowed it down for you to 3 important/neccessary aspect🤗.

  1. Learn about HTTP.
  2. Learn about DNS.
  3. Learn about domain names(how to get a domain name,etc) and web hosting(both free & paid).⁣

HTML(Hypertext Markup Language)

I see HTML as the foundation of web development. I want you to see it as that too.😇

To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form,etc cool right?😎

what html looks like

Here is my learning path for you🤗

  1. Learn the fundamentals(very important)
  2. Conventions and best practices
  3. Semantic HTML
    • Semantic HTML elements are those that clearly describe their meaning in a human- and machine-readable way.

      Elements such as header , footer and article are all considered semantic because they accurately describe the purpose of the element and the type of content that is inside them.

  4. Forms and validation
  5. SEO basics as well as accessibility.⁣

CSS

CSS(Cascading Style Sheets), is a style sheet language. How HTML is responsible for the content and structure of the web page,CSS determines how this content should be presented visually.

You can use css to add colours, change fonts, insert background color and to some elements, as well as to style forms.

Once you know a good amount of HTML you should start learning these:

  1. Learn the fundamentals
  2. Css Grid
  3. Positioning
  4. Display
  5. Box Model
  6. Flexbox
  7. Responsive design and Media Queries

CSS is also used to make web pages responsive(ie making the structure of the page fit perfectly into various screen sizes like smartphones, tablets,etc).

Responsive design

CSS Frameworks

css frameworks image

CSS frameworks are tools used by developers to make their job easier.A framework contains ready-made components and tools that enable the developer to write code faster.

Frameworks give developers the tools to quickly spin-up user interfaces that can be tweaked and iterated on throughout a project instead of trying to reinvent the wheels everytime.

Some css frameworks🤗:

  • Bootstrap(my personal favorite)
  • Tailwind css
  • Bulma
  • Materialize Css
  • Foundation etc

I can't say which is the "best". I believe personal interest differs.
My suggestion is to check out all of them and know the one that resonates with you better.😜

JavaScript😈

I hope i didn't scare you with the emoji? Don't worry javascript is not hard(coughs😂)

What is JavaScript?

JavaScript is a programming language that adds interactivity to your website.

From my experience javascript is a very beautiful language. I am always intrigued by every new thing i learn.

However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. I hope you are still with me? Ok let's continue💯

Now that you know some CSS start learning some javascript. Learn the fundamentals before trying anything else.⁣

  1. Learn the fundamentals
  2. Syntax & constructs
  3. DOM manipulation
  4. Fetch API/AJAX
  5. ES6 & Modular JS etc

Javascript Frameworks

JS frameworks are collections of JavaScript code libraries that provide developers with pre-written JS code to use for routine programming features and tasks.

Same with css frameworks, js frameworks are used instead of trying to reinvent the wheels every time.

The Big 3 JavaScript Frameworks

The three JavaScript frameworks that currently dominate the market in terms of popularity and usage are:

• React

• Vue

• Angular

Again i can't tell you which to choose. Check all three out and stick to anyone that resonates with you better.

They each have large communities. When you want to start your new project on front-end technologies, these three are your best bets.

Js Frameworks

Version Control System

Now at this point, you could stop here and you'd have your first website, but when working with large teams on projects you want to know about version-control systems like git.

Git is a content tracker. So Git can be used to store content — it is mostly used to store code.

Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. Version control helps in handling the codes in git.

You should learn these:

  1. Learn basic git commands
  2. Terminal
  3. Repository hosting system

Git cheatsheet👇
Git cheatsheet

Wrap Up

• I believe that with the detailed information above, nothing can stop you💪 from becoming a frontend developer except you

• Please don't make learning a framework a substitute for learning vanilla Css and/or Js. You really don't want to do that.

• Believe me when I say the path to becoming a developer isn't all red as roses. A period would come and you'd feel like giving up(i got those thoughts😪)

I believe you can do it. Feel free to share your struggles/progress with me on twitter.🐦

🙌I'm rooting for you❤&💡

Discussion (17)

pic
Editor guide
Collapse
ukaegbugreatjnr profile image
Ukaegbu Great Jnr

Just read your tweet and came here ! This is cool! Thanks ,am.just starting my journey to front end

Collapse
vitalcog profile image
Chad Windham

Awesome to hear, keep it up!

Collapse
drealmaster profile image
Okere Chibuike Author

Sorry I'm just seeing this now. Glad that you enjoyed it.

I believe you can do it 💪

Collapse
abiolaesther_ profile image
Abiola Esther

Love the way you broke down the different concepts
♥️& 💡 To you too

Collapse
drealmaster profile image
Okere Chibuike Author

😊😊Thank you and I'm glad that you liked it. Hopefully you would like my next one.

Collapse
oooluki profile image
oooluki

THANKS for sharing. Not finding Javascript easy.

Collapse
drealmaster profile image
Okere Chibuike Author

You're welcome. It's always difficult for everyone. Me included.

In my next article I will be sharing how I approach JS tutorials and how best it helps me. Maybe it will be of help to you too.

Collapse
oooluki profile image
oooluki

Aww That would be great.

Thread Thread
drealmaster profile image
Okere Chibuike Author

OK good to know. Will surely let you know when I write it.

Collapse
rajissctrl profile image
Collapse
drealmaster profile image
Okere Chibuike Author

You're welcome

Collapse
jomefavourite profile image
jomefavourite

Detailed career path 👍

Collapse
drealmaster profile image
Okere Chibuike Author

Glad that you think so.

Collapse
padreno profile image
padreno

great article, keep it up

Collapse
drealmaster profile image
Collapse
andresguerrero profile image
Andres Guerrero

Great post, I would add to the list Deployment, as someone who is trying to catch up on front end development, this is an important aspect of putting everything together.

Collapse
drealmaster profile image
Okere Chibuike Author

I'm glad that you saw value in it. Will be glad if you read my upcoming article too.