Loading...

0 %
Olsi Odobashi
Software Developer
  • Location
    Revere, MA
HTML & CSS
Javascript
Angular
React / React Native
Ionic / Electron
Cloud Architecture
  • React, React Native
  • Angular Material, Bootstrap
  • GCP, AWS, Azure
  • Sass, Less
  • Github, git
  • Node, Express, Firebase
  • Mentoring
English
Italian
Albanian

How to teach yourself Frontend Development and land a Junior position

March 22, 2023

In the world of software development, Frontend is the part of the process that takes care of the user interface and interactivity of a web application. It involves using HTML, CSS, and JavaScript to create the visual elements and interactions that users see and interact with.

This article attempts to give you some guidance on how to start learning Frontend development by yourself and become proficient enough to pass an interview and get hired for a junior position.

Getting started

Photo by Ian Schneider on Unsplash

As mentioned above, you’ll first need to learn HTML, CSS, and JavaScript. HTML is used to create the structure of a website, CSS is used to style the website and make it pretty, and JavaScript is used to create interactive elements. If you’re new to programming, it’s recommended that you start with HTML and CSS, as they are the easiest to learn.

The first thing ever is of course to pick one of the many code editors out there. In my time, NotePad++ was and still is the best choice for beginners. Download Notepad++.

Next, get right into it by learning how to create an html file that the browser recognizes as a website. Then start adding a few different HTML tags to it to see what they look like.

Congrats! You just created your very first website! After you have a basic understanding on how HTML works, you can start adding a few styles to it.

CSS can either be written inside your HTML file wrapped in <style></style> tags in the <head> section, or as a separate file. Normally you want to write it separately to keep your HTML clean and you connect it to your HTML file using the appropriate tag.

Once you get a good understanding on how to target HTML elements with your CSS, start exploring the many many CSS properties that are available today. Luckily, code editors nowadays will help you with autocompletion and suggestions.

A good place to start learning HTML & CSS is this Mozilla Developer page.


Next in line is JavaScript, which is used to add interactivity to your website. The link above contains some Javascript articles as well so it’s recommended that your go through those before moving on.

Once you have a good understanding of HTML, CSS, and JavaScript, you can start combining them to build your own interactive websites and web applications. There are many different tools and platforms available to help you get started, including CodePen, JSFiddle, and Glitch. CodePen is by far my favorite, as not only it gives you a live editor to work on but also offers a huge community of Frontend developers around the world. So not only you can practice and learn but you can also search how other devs have coded say a weather app or you can simply browse the trending submissions to get some inspiration.

Keep in mind that frontend development is a field that requires constant learning and updating your knowledge, the web development landscape is rapidly changing, new libraries, frameworks, and technologies are being introduced, and it’s a good idea to stay informed and updated by following blogs, podcasts, and attending meetups and conferences.


Effectively teaching yourself programming

Teaching yourself web development can be a challenging task; no one wants to watch endless Youtube videos of people who’s code is always perfect and never seem to encounter any errors while coding. However, with the right approach, it can be extremely rewarding and you can learn the skills you need to become a professional web developer. Here are a few effective methods for teaching yourself web development:

Always start with the basics: learn HTML, CSS first and then move on to JavaScript

As mentioned in the beginning, these are the building blocks of web development, and a solid understanding of them will be essential as you progress in your learning. Nowadays companies will generally test your algorithms knowledge, but if you’re applying as a junior developer there’s a chance that someone might throw a specific CSS question which is hard to guess unless you’ve previously read about it or used it in a project. This is especially true for Javascript: you don’t want to get to intermediate/advanced JS with knowledge gaps, because that will cause many headaches (mostly from banging your head against the wall).

Additionally, I see a lot of people who ask questions like “can I learn React Native if I don’t know React?”, or worse “can I learn React/Angular/other framework if I don’t know Javascript?”.. It’s understandable that people want to move fast and realistically not everyone can invest a year into this with no guarantees that they’ll find a job by the end of it. But as with every new skill you want to learn, you’ll need to start from 0.

Use online resources

There are countless resources available online, including tutorials, videos and documentation, that can help you learn web development. Websites such as Codecademy, FreeCodeCamp, and MDN Web Docs are great places to start.

You can find online whatever works for you, from an entire course that you can follow at your leisure to specific how-to videos/articles, there are plenty of professionals out there that are creating educational content for free.

Build projects

As a self-taught developer, this is the best way I can recommend to learn web development. This will give you hands-on experience and help you understand how the different technologies and languages you’re learning fit together.

The more you practice, the better you’ll get. In time you will start to notice how you now remember a lot of syntax that you didn’t know existed before. You will find new methods and solutions to problems that you were stuck on forever before.

Try to build something new and small-ish every day, start with basic components or landing pages, then move on to more complex stuff. Practice Javascript array methods, DOM manipulation, Promises, etc. There are plenty of articles online regarding these topics.

Join online communities

Joining online communities of like-minded individuals can be a great way to get help and support as you learn. Websites like Stack Overflow, GitHub and CodePen are great places to connect with other developers.

Also, if you’re still not part of our Learn Frontend community, you’re missing out! This is also a great place to start, so join our discord server for free and connect with a community of other people who are on the same journey as you, get live help from our mentors and help others when you can.

Find a mentor

Another personal recommendation. Having a mentor to guide you as you learn can be extremely beneficial. A mentor can provide a wealth of knowledge and experience, and can help you navigate the many challenges that come with learning a new skill. Aside from personalized guidance, a mentor can also provide encouragement which is very important on days when you feel like you’re not making any progress or you just want to give up! (And you will have those days!)

To get the most out of a mentorship, it’s important that you be proactive and communicate often and clearly with them. Share your goals, ask for feedback and be open to criticism.

Never stop learning

Frontend development is an ever-evolving field, with new technologies and trends constantly emerging. It’s important to stay current and continue learning throughout your career.

Ultimately, learning web development takes time, dedication, and patience. It won’t happen overnight, but with the right approach and mindset, you can teach yourself the skills you need to become a professional web developer.

dedication, and patience. It won’t happen overnight, but with the right approach and mindset, you can teach yourself the skills you need to become a professional web developer.

Posted in Uncategorized
Write a comment