How to be a Better Frontend Developer

What to Learn to Excel at Frontend Development

Front-end developers catch a lot of slack, often the butt of many jokes, they are still in incredibly high demand across the software industry.

Frontend development as a field is constantly growing and changing. For example, the concept of Javascript frameworks like React or Vue didn’t event exist 10 years ago.

Photo by NASA on Unsplash

To stay on top of the game and be a great developer, regardless of the current hot technology stack, here’s some skills to master.

Responsive web design

The way people browse the internet today is 44% on mobile devices. This means that any implemented web design should take mobile into consideration just as much as desktop. Key features shouldn’t be falling off the screen on your phone, and horizontal scrollbars should be considered the enemy.

Mastering responsive web design is key to staying relevant in web development, and deeply understanding media queries, design limitations, and best-practices when developing responsive sites should be a priority.

Write proper HTML

Believe it or not, there is a “proper” way to write semantic HTML. Knowing HTML well is of course a requirement of any web developer, but writing clean, readable, and SEO compatible HTML will make you stand out.

For example, keeping HTML cleans means reducing the amount of wrapping elements, using section and ensuring that all your tags are used in the right place.

Accessibility is another skill that’s becoming more and more important. Accessible websites are designed so those who use screen readers can perfectly use. It’s essential so you can create websites that are usable for everyone.

Tools like ARIA come in handy here. ARIA is a set of attributes that make the web more accessible to those with disabilities, you can learn more here.

Don’t just write code, test it

Whether you’re a beginner or an expert, anyone can benefit from learning how to test their code. Using testing frameworks like Jest or Cyprus can make a huge different in your development efficiency and accuracy. Determining test coverage with tools like Coveralls will ensure that all of your code is being properly tested so you know when it works and when it breaks.

Most software developers hate building tests for their code. No surprise, it can be painful and doesn’t add any outwards facing value to your users. But good testing practices will make you stand out from the crowd.

Every development team is looking to automate as much as possible, and automating tests can save huge amounts of times, both in preventing bugs from being pushed in the first place, but also saving time by avoiding having to run manual tests.

Know the ins and outs of good software design

The way you write code matters just as much as the code you write. Following good practices in software development will not only make your code easier to read, edit, and maintain, but also makes it easier for your colleagues and others to work with.

This involves properly planning code before writing anything and always being reflective and thoughtful about the software development process. Following good development methadologies, like Agile software development and good Object Oriented Programming (OOP) practices can be really important.

Understand a framework well

Understanding one of the three most popular software frameworks, React, Angular, or Vue, is really important. Most front-end development jobs require experience with one of these software frameworks.

Although learning React, Angular, or Vue is incredibly important, it’s just as important to understand why these frameworks exist in the first place, and have a good handle on vanilla JS. Building projects with straight Javascript is important so you can understand what’s going on behind the scenes of these frameworks.

The tradeoff is this learning approach takes longer, but a proper understanding of the basics will give you an edge in the long run.

Master creativity

Working on frontend requires a unique combination of skills, not only do you have to known the engineering aspects of actually building the application, but also have a strong sense of design and creativity to build something that’s not just functional, but beautiful.

Even with a mockup or design before development, learning how to turn that into HTML, CSS, and JS still requires a lot of creativity.

Conclusion

Learning these concepts well won’t just help you with your software development this year, but will build a strong foundation that you can use to create anything.

Keep in Touch

There’s a lot of content out there and I appreciate you reading mine. I’m an undergraduate student at UC Berkeley in the MET program and a young entrepreneur. I write about software development, startups, and failure (something I’m quite adept at). You can signup for my newsletter here or check out what I’m working on at my website.

Feel free to reach out and connect with me on Linkedin or Twitter, I love hearing from people who read my articles :)

Passionate about building cool shit. First-year undergrad student studying EECS and Business @ UC Berkeley MET Software developer at Carline.