Guide to becoming a front-end web developer

Guide to becoming a front-end web developer

Front-end web development. You’ve heard a lot about it and if you’re reading this, you’re probably interested in software development.

Recently, a friend who wants to get into front-end web development asked me how they could become a front-end web developer. First off, the role of a front-end web developer means different things to different people. You could stumble on an article or a YouTube video with a checklist list of skills you need to have to be considered a front-end web developer. The list is usually quite long and scary, containing multiple front-end frameworks you must know and it just leads beginners to into tutorial purgatory. But you don’t have to go into that dark place, this article will help you jump right into front-end web development as early as possible.

Before I begin with the skills required, I’ll just quickly describe the roles of a front-end web developer and what a front-end web developer may typically do daily. Front-end web developers are usually responsible for implementing visual elements that users see and interact with in an application. They serve as an intermediary between designers and back-end web developers hence work closely with both. The core arsenal of front-end web developers is HTML, CSS and JavaScript.

Here are a few tips to take note of as you begin your journey to amazing front-end web development;

  1. Learn HTML & CSS - and get very strong fundamental understanding

    A common mistake many beginners make is that they to learn HTML & CSS in a rush and then plunge right into a front-end framework. You must take time to understand the structure of web pages and building them using pure HTML and CSS. Some great resources to begin with are https://www.freecodecamp.org and https://www.w3schools.com and they’re free!

  2. Build a lot of full-fledged pages and UI elements

    The first project I worked on when I began front-end was to replicate the Facebook sign-up page. It took me almost two weeks to build but I learnt a lot over the two week period like how to build layouts and how specificity worked. Building projects from scratch help solidify the concepts learned and makes things more practical, so try to work on replicating as many websites as you can.

  3. Read about user interfaces and user experience

    There is no workaround this one. You have to read to know. So read! Read as many articles you can on UI and UX and developing user-centred designs. Reading tutorials on building layouts, using grids and flexbox, in web pages. Read about building responsive websites.

  4. Learn JavaScript

    It’s important to grasp a good understanding of JavaScript although you may not rely heavily on it to build webpages. A decent knowledge of JavaScript will greatly enhance your web pages interactivity, especially if you intend to build Progressive Web Apps, you’d need knowledge in JavaScript. https://www.freecodecamp.org is still a valuable resource. A book I’d recommend is JavaScript: The Definitive Guide by David Flanagan. It is a very good book for those without prior programming experience.

  5. Learn Version Control

    As you progress in your journey as a front-end web developer, one invaluable tool you’ll need in your arsenal is version control.

    Version control systems are a group of tools used to track changes to source code over time. Integrating the use of version control into your workflow is very vital as it can serve as a backup for your source code. It also makes collaborating with other developers very easy. If you plan on contributing to open source projects you need to understand version control systems. The most common version control tool is git and the most common git-repository hosting service is GitHub.

  6. Build your portfolio

    As an entry-level front-end web developer, you won’t really have any working experience but prospective employers or clients would like to see some of your work.So, building a portfolio is the next logical step to take. You can set up your website with GitHub pages or host your site on Netify. Ensure any project that you work on is publicly available in your GitHub account.

    Here are some portfolio ideas you can use as a guide :

    • https://www.codingdojo.com/blog/building-developer-portfolio
    • https://www.lifewire.com/web-design-profile-no-experience-3469205
    • https://medium.freecodecamp.org/15-web-developer-portfolios-to-inspire-you-137fb1743cae
  7. Next steps

    At this point, you can now dive deep into some frameworks if you want to. You can also learn to use prototyping tools like Adobe XD and Figma to design your own user interfaces from scratch.

If you want to start learning, need help with resources or you have a couple of questions about front-end web development, send me a DM on Twitter @wadederby.

comments powered by Disqus