DEV Community

Cover image for The ultimate guide for junior frontend developers
Nikolina Ljubičić for Lloyds digital

Posted on • Edited on

The ultimate guide for junior frontend developers

How hard is it to become a developer? Can I do that? The answer is yes, you can. First of all, it should be noted that this path is not easy; there will undoubtedly be frustration and a desire to give up. If you want to be a good frontend developer, you have to realize that you will never finish learning. I have been through all of this, and I can tell you if you are persistent in achieving your goals, I can guarantee you that you will succeed.

But how to get to the desired position of junior frontend developer? I believe that most of the students graduating from college are interested in that. Many employers look for people with work experience in their profession, but how do you gain experience if no one provides you a job opportunity?

Sit tight, and let me share my story.

How to start?

One solution is to look for a professional internship. Keep in mind that even if you do it pro bono, believe me, it will pay off. Be grateful for the opportunity and try to use that time to learn as much as possible. You’ll have a chance to experience the real work environment, and that’s exactly what you need after college. Try to prove yourself, show the desire to learn, and progress. Don't come to an internship for the formality and signature that you have to take to college; you are making a big mistake that you will only be aware of later. Make the most of that time: ask questions, research, work hard, code, and learn. Perseverance will pay off. It always does.

However, if you don't have the opportunity to start with an internship, there are other alternatives, such as courses on Udemy, Udacity, Coursera, etc. You can find various courses for less than 15€. And here is a tip for you: the prices of the courses should be researched in the Incognito window, only in this way you will find out the real price. When you take a course, finish it completely and write the code in parallel with the lecturer. In addition, you should regularly take notes on paper or laptop, write comments in the code, and additionally follow official documentation as you discover new things. At that moment, you think you will remember it, but trust me, you probably won’t so you will be grateful when you see that you have something written down. It has been proven that we remember faster while writing. After finishing the course, there is no need to immediately take a new one. You should rather set yourself your own project that needs to be done, and you will be able to apply your knowledge there. To sharpen your skills, it is necessary to complete as many projects as possible and invest a lot of effort in the exercises. This is a guaranteed path to success, no mistake.

Consistently invest in your knowledge. If you focus on working on yourself, the results will definitely come. That’s guaranteed! Depending on how you want to feel or what you want more in your path to success, choose one book or online program - and get started. Just start somewhere and do it as soon as possible. Yes, it's never too late, but if you can start learning earlier and possibly create something, why not do it?

Alt Text

Top tech skills you need to know

First of all, it's important to point out a few significant facts. If you want to become a frontend developer, needless to say, you must know HTML and CSS, because these are the basics. If you are asked at a job interview which programming languages you know, do not say HTML and CSS because they are not programming languages. HTML is a markup language, while CSS is a style language. Five years ago, it was completely normal to say at job interviews that you have knowledge of HTML or CSS, and they would be thrilled. Today is different and much more is expected from you. There is no need for fear; if you have the desire to learn, you will master other programming languages with ease.

What we need to know now when we talk about the position of a frontend developer are JavaScript and/or TypeScript. Today, it's good to know Sass or Less - both are CSS preprocessors that script superset of CSS that makes writing CSS code easier. Knowing the rules for responsive web design is a crucial thing you need to know today. One of the things that have made my life a lot easier is the CSS flex property. The number of internet users who access and use the web through smartphones and other mobile devices is constantly increasing at an alarming rate. This means that websites should be even more optimized than before, especially the customization of web design for different types of screen sizes is necessary. If you fail to do that, then you will end up losing customers. Based on Statista research, 54,8% of websites are viewed from a mobile device - use that information wisely.

Another thing to know are software version control platforms - which allow users to track changes in projects and collaboration between teams during and after software development. There are some free platforms such as GitLab, GitHub, or BitBucket. Realistically, working on it isn’t that abstract at all; it’s quick to learn, and it can make your life so much easier. Trust me, you will sleep more peacefully when you know that everything is stored on your Git.

It is a big plus for a frontend developer if you know the basics of DNS, HTTP, and HTTPS (read: you have to know it).

The soft skills you need to know as a junior frontend developer

Now we came to the point that developers don’t really like, but these skills are just as important as tech skills. These skills do not include programming, but if you stick to them, they can make you a more skilled and better programmer as well as a team player.

In this industry, things change very quickly, and only by learning can one keep up with new things and technologies. When learning, it is important to be humble and learn from your mistakes because that is one of the better ways to learn. And most important of all, show that you are always passionate and highly motivated for what you do.

Of course, in this position, the key skill is writing code, but there is much more behind it, and to progress, it is important to know other skills.

Here are some skills that are important to master:

1. Written communication. You can't escape it, you will use it every day in email. Try to write in a friendly way, always thank the person for contacting you, and most important of all - quickly get to the point without overcomplicating things.

2. Mentoring. You probably don't understand why a junior frontend developer needs this, but in fact, there is always something you know and some of your colleagues don’t. Also, after a while and after you master things, you find yourself in situations where you need to explain something to someone. Trust me, this is the best way to further solidify and validate your knowledge (and only then realize how much you have already learned!). In principle, as soon as you teach someone something new, you are on the right track, so just keep it up. I speak from my own experience when I say the combination of learning and mentoring is very effective.

3. Focus. In this industry, your focus should be on goals. For example, to achieve a goal which is developing a website, you have to be focused on details, especially on small ones, because the frontend is just that, what is seen on the user’s screen. The developer must be focused on how the website works and how it will look, although the look and feel are resolved with the designers.

4. Troubleshooting. This aspect is crucial in programming. It would be easiest to remember the commands to copy from StackOverflow and throw in the code. However it is crucial to know the problem, look at the bigger picture of the problem, and only then, with the help of Google and StackOverflow, solve the problem.

5. Teamwork. If you want to be a good programmer, it is also decisive that you are a team player. There is a lot of collaboration with designers, other developers, clients, and others in this work, so this skill is necessary.

Alt Text

What can you do to become a better programmer?

Frontend development is considered to be much harder to master than it was before. The difficulty has remained the same, but web development is evolving very quickly, which entails several new things in a very short time and in a much larger number. That way, you need to learn a lot more things in a shorter amount of time than previously. Documentation will save you in many situations, don't be repulsed by it, read it several times.

Here are some tips on how to quickly overcome all the difficulties of the programming process:

  • Learn to read someone else's code. You can find out a lot from it and see good ways to write code.

  • Always be informed - this is one of the ways to help you learn constantly. There is nothing better than listening to industry experts. This allows you to keep up with the dev trends so focus on things you need to master.

  • Attend technical meetings. The advice is to listen to podcasts, follow certain YT channels, join Facebook groups - a lot can be learned from the community.

  • Try to make your code clear and understandable from the beginning. However, once you start training as a programmer, you will certainly try to go back to some parts and prepare that source code. Make your code better for other developers that will work on its maintenance in the future.

  • It’s important to seek feedback, be it good or bad, it will surely help you see what you are doing wrong or which direction you have to follow.

Short tips and tricks

  • It’s important to understand the difference between image formats: PNG, SVG, and JPG. Whenever you need a transparent image, use PNG, when you use icons, use SVG, for full-color images (and whenever possible if you don't need one of the above.), use JPG.

  • For web optimization, it is necessary to compress images. There are free services available online such as TinyPNG.

  • If you have icons on the web that change color on hover or some other action, use the program for vector icons.

  • If you install some packages but end up not using them, please uninstall those unnecessary packages.

  • If the designer didn't prepare the final pictures for you, don't use some crazy gray squares, use placeholders.

  • Every time you finish a task on your project upload it on Git (git push) and every time you enter the project use git pull.

What you need to know as a junior frontend developer

  • Mandatory knowledge of HTML and CSS (CSS flex property)
  • Knowledge of JavaScript or Typescript
  • Basic knowledge of WordPress
  • Knowing some JS frameworks (e.g. Vue.js, Nuxt.js)
  • Basic understanding of SEO optimization
  • Knowledge of working on Git
  • Know how to use CSS preprocessors - Less or Sass

Basic things that you need to do on the web as a frontend developer

  • Set up SEO optimization
  • Enable Google Analytics
  • Turn on the Google Search Console
  • Turn on Sitemap
  • Enable REcaptcha if the website has forms
  • Set Error page
  • Set up a website favicon
  • Set an open graph image
  • Placing of lazy loading on images to reduce the initial load

To sum it up

I realized over time that the more we know, the clearer it is to us how much we still have to learn. The fact that you know how much you don't know is the best indicator that you already know a lot.
You have to be committed to the end goal, that’s the key that will guide you forward when it gets tough or tricky. The most important thing is to learn to think like a programmer. Once you have fully mastered one programming language, you can easily switch to new languages.

As long as you’re willing to invest your time learning the necessary skills for a developer, you’ll be at a huge advantage over others, so if you’re not embarking on doing new things, it’s time to do it today.

Keep on learning!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!

Top comments (26)

Collapse
 
tomyjusuf profile image
TomyJusuf

How deep I need know JavaScript? Can you tell that us please?
And what about react. js, its important know that, know basic, or..?
Thank you. Im on begining/beginner :)

Collapse
 
nikolina1 profile image
Nikolina Ljubičić

In my opinion for frontend development, Javascript is one of the three key elements when you are at the very beginning. The other two elements are HTML and CSS, but they have minimal impact on interactivity. The main role of JavaScript is to increase interactivity. For beginners, start with basic things, like events, objects, and functions. After that, you can try libraries and other frameworks. First of all, you can create one project in JavaScript and after that in other frameworks like React.js. For example, now I work in the Vue.js framework. If you start with React.js straight away you probably won't understand some things and you won't see how useful it is or if it really helps you. I think it's better to learn gradually and in detail.

Good luck and happy learning!

Collapse
 
tomyjusuf profile image
TomyJusuf

Thanks alot for answer. I keep it in brain.

Collapse
 
tanvirmahin24 profile image
Tanvir Mahin

I found this roadmap for web developer very useful. I hope this will answer all the questions.
roadmap.sh/backend

Collapse
 
tomyjusuf profile image
TomyJusuf

waw

Collapse
 
tomyjusuf profile image
TomyJusuf

omg that is what i looking fir so long time omg, yes. that will tell my what i realy need, ooh thank you alot man, realy, alot.

Collapse
 
nikolina1 profile image
Nikolina Ljubičić

This is very useful, thank you!

Collapse
 
markgiannelis profile image
Mark Giannelis

Is traditional website development being phased out with the advancements of content management systems such as WordPress and Joomla? There is a bit more info on this here

Collapse
 
icodecat profile image
iCode-Cat

Why WordPress why not Headless CMS?

Collapse
 
bigt1305 profile image
Anthony Hoss

This is just my opinion and guess, but I have noticed a lot of jobs for frontend development require knowledge of WordPress; a lot of businesses (not major ones necessarily but even some of them use Wordpress) use WordPress so it probably helps to know some basics of it (I've thought the same as you but yeah, like I said, I have seen quite a few jobs ask for knowledge/experience in WordPress so I can see why it's good to know some of it).

Hope that helps some, good luck!!

Collapse
 
icodecat profile image
iCode-Cat

Thanks for your response, good luck!

Collapse
 
dominique_phyall_721e26f8 profile image
Dominique Phyall

Omg, I need this. Thank you

Collapse
 
nikolina1 profile image
Nikolina Ljubičić

I hope it helped!

Collapse
 
bigt1305 profile image
Anthony Hoss

Thank you for the list; it was interesting and insightful, especially the basic things you do as a frontend developer section, keep up the good work!! 😁😎

Collapse
 
nikolina1 profile image
Nikolina Ljubičić • Edited

Thank you so much, glad to hear that! Good luck to you, too! :D

Collapse
 
bndissanayaka profile image
Bhagya

Why haven't you mentioned anything about Angular? I am starting to learn front-end and I thought I should start with Angular after learning basics of HTML,CSS and JavaScript. But I had a bit of confusion Is Angular becoming "old"?

Collapse
 
shijiezhou profile image
Shijie Zhou

If you start PHP first you will be successful

Collapse
 
nikolina1 profile image
Nikolina Ljubičić

In my opinion, it's best to start with what interests you the most. If you are very interested in something and you are constantly learning and upgrading your knowledge, you will surely be successful.

Collapse
 
bndissanayaka profile image
Bhagya

Why haven't you mentioned anything about Angular or AngularJS?

Collapse
 
vukas profile image
Aleksandar Vukasovic

Great article! A lot of useful tips.

Collapse
 
kannanspeed profile image
Kannan

cool love the article

Collapse
 
nikolina1 profile image
Nikolina Ljubičić

Thank you!