Sharply

loading...
Cover image for Sharply Learning RoadMap for Frontend Developers

Sharply Learning RoadMap for Frontend Developers

Franklin Okolie
A Frontend Engineer focused on building aesthetically pleasing user interfaces with a focus on user experience and user interactions.
Updated on ・6 min read

Welcome to the Sharply learning roadmap for Frontend developers, this roadmap will act as a guide for people who are looking to start a career in Software Engineering and need a focus on Frontend development.

There are thousands of resources out there on the internet for Frontend developers and it is very easy to get overwhelmed trying to choose or pick the best resource out there, but with the Sharply learning roadmap you are assured on the best resource and also the best way to go about learning with the resources, challenges where you can pratice, a community with like minded people where you can ask questions, make new friends and connection.

This roadmap itself is crafted by careful minds who understand the neccessity of guidance and direction.

Who is this roadmap for?

This roadmap is for beginners who are just starting their career in Frontend Development or experienced developers in other fields that want to also learn Frontend development.

The focus of this roadmap is Direction, Dedication and Focus, anybody willing to follow it and put in the effort, solve the challenges, join the community is guaranteed to have a headway in his/her career.

What is Frontend Development?

Frontend Development is using modern tools to develop applications that run on the browser. Any application that is run on the browser are built by people called Frontend Developers, they make use of tools and technology like HTML, CSS, React e.t.c to build these applications.

Let take a look at this website on which you are currently reading this article, first you can tell you got here from your browser, either through chrome, safari e.t.c. Another thing you can notice are the colors, buttons, text e.t.c. Everything you can see here including this text you are reading are built by people called Frontend developers and the act is called Frontend development.

In a professional environment, Frontend developers work closely with designers as they convert designs into code to look and work as perfectly as possible.

But how do I know Frontend development is for me?

Well, you can never know until you try, there are many other path you can easily switch to if you don't fancy it, this includes; Backend development, UI/UX design, AI/ML, Blockchain development e.t.c.

But I must say you have to try first and see if it is for you or not, if you love colors, animations, designs e.t.c, you should give Frontend development a chance.

Anybody can be a Frontend developer, nobody was born with the skills, by dedication, practice and hardwork you can become very good in it and that is what Sharply is here to offer, that roadmap for you to follow and focus on your journey.

How do I start?

To start you need some set of tools that will aid you and make learning easier for you. Below are the basic tools you need:

  • A personal computer.
  • Download a browser (preferrably Chrome).
  • Download a code editor (VScode).
  • Open an account on Github (you will use this to store your codes).
  • Join the Sharply community.
  • Create an account on Sharply.
  • Make sure you have a strong internet connection.

These are the basic tools you will be needing to start.

Learning the Basic.

The basics are very important as this is a building block for every other thing you need to learn, by mastering the basics you can navigate through learning tougher tools because these tougher tools are built on the principles of the basic tools. Each guideline or step are links that that you to a resource that explains more of the topic, kindly read and learn.

HTML (HyperText Markup Language) & CSS (Cascading style sheet)

This is the basics of Frontend development, as every beginner must know this. There are thousands of resource on this but I will present the best to you.

JavaScript

JavaScript is very important for your journey as a Frontend developer, you will need to master it to make web applications interactive and come to live. Watch the playlist below to grab a better understanding but that should be after you have finished the HTML and CSS playlist above.

Git and GitHub

Next up is Git and Github, this part of the roadmap will broaden your understanding on Git and Github and how, why and the need to use it. Git is very important as much as JavaScript is and you will use it in all of your career as a developer.

Hosting with Github pages

The next step will be about building projects and showcasing your work and to do that you need to host your website on the internet for everyone to see but you can't do that yet so this section will teach you how to use Github pages to host your project.

Challenges

Now that you are here, before you move to the next step on the map, I want you to take a pause and build something, learning without building is like reading and studying without writing an examination, building project and challenges on your own will help re-enforce what you have learnt so far and take you out of the Tutorial hell.

So below are some challenges I want you to undergo and make sure to submit answer in the Sharply telegram group for reviews and feedback from mentors and your fellow peers.

Make sure to create a free account on Frontend Mentor as this will enable you get starters kit for each project.

That will be all for now, those are the recommended challenges from Sharply, but feel free to take on more on FrontendMentor to test your skills and do not forget to share your work in the community for review.

CSS Frameworks

Now it is time to learn some tools that will aid your work and make you write your code faster, and this will be a CSS Framework called TailwindCSS, a beautiful CSS Framework that enables you build large application without writing a single line of CSS.

Make sure you build with what you have learnt and below are some challenges you should build with TailwindCSS and JavaScript:

Take on these challenges and if you face any roadblock, do not forget to ask questions in the community as our ever ready mentors are there to assist you and answer your questions.

React

React is a JavaScript Framework that makes it faster to build modern frontend application, with React you can level up your skill set in Frontend development as well as your experience. Many web applications as of today make use of some JavaScript Framework like React, Vue or Angular.

Facebook Frontend is built using React, so React is worth learning. React is also officailly backed by Facebook.
Resources to learn React:

-NetNinja React PlayList

After learning React, I am sure you will need some few challenges to test your knowledge and I have some for you:

If you follow this map duly and consistently, by the end of it, you should be confident in building basic applications and yes kudos to you for reaching here so far.

So what next?

The next step is to announce your progress in the Sharply community, tag mentors, show your work from all the previous challenges you have done, you will be notified on the next step.

Discussion (0)