🚀Entering Tech #025: How to become a frontend engineer

Some trivia before we begin. Answers are at the bottom of this newsletter. 

In last week’s edition of #EnteringTech🚀, we spoke about software engineering as a whole.

There, we briefly broke down the four critical roles across the software engineering industry: frontend, backend, DevOps and Cloud engineering. These aren’t the only roles in software engineering, of course, but because we aren’t ChatGPT who apparently knows everything, let’s just stick to the basics. 

In today’s edition, we’ll talk a little bit more about frontend engineering. As we mentioned, frontend engineering basically deals with the “front” aspect of a website or an app. 

💡 Think about it this way. Your body has external and internal organs. Your skincare, pedicures and haircuts all make you look good and neat on the outside. That’s frontend! But the drugs you take, the food you eat, how you take care of your organs, that’s all internal. You can’t see it, but you know that your beating heart is the reason you spent all of Valentine’s Day crying. That’s backend.

Frontend has to do with all the visual aspects of digital products. 

💡 Here’s another quick example: When you visit Jumia and browse through the different products, you’re interacting with the work of a frontend engineer. But when you order a product, enter your address, and pay, you’re interacting with the work of a backend engineer. 

Frontend engineers develop the visual aspects—pages, menus, buttons, links, and graphics—that you see, use, and click. 

If you can directly interact with it, it’s frontend.

They do this using programming languages like HTML, CSS, and JavaScript so it’s still coding. For example, this newsletter uses HTML—which makes me a tech bro if you think about it 😅.

To become a frontend engineer, you’ll need to learn all three of the languages we listed above, as they’re the most critical—and don’t worry, it’s not as difficult as everyday languages. There are tags—basically the computer language for commands—that runs across all three like:

•  H1–H6: <h1> which deals with headers. [insert image of h1 compared to h2 from newsletter.]
• Or <a> which deals with hyperlinking a text.
• Or even <em> which italicises a word. 

Once you learn the different tags that call up buttons, bolden text, and make things move, you’ll be able to understand frontend engineering a bit better. 

👨🏾‍💻 Hardware

To excel at frontend, you’ll need a laptop. We scoured the web and many frontend developers advise newbies to get laptops with:

• a Core i5 processor 
• 8 GB RAM
• 256 GB SSD; and
• Screen resolution of 1366 X 768 pixels.

This should be the basest type of laptop that will give any newbie great performance for frontend. You don’t need a MacBook Pro just yet. You can check out the HP Notebook 15, for example, which costs $410 if you’re getting it new, and even less when you’re buying second-hand. 

If you can’t afford a new or optimum laptop, however, use what you have and learn when you can. Everyone starts from somewhere 😉.

🖥️ Software

The basic tool for frontend development is a good code editor and there are many code editors out there.

There’s Sublime Text, Atom, Visual Code Studio and Chrome Developer Tools which are some of the most popular.

There are also several other resources like Envato HTML Templates which has thousands of website templates ready, and GitHub which boasts a vibrant developer community.

The more you learn about frontend, the more you’ll discover which tools you need, and which are just nice to have—like work-life balance.

My Startup in 60 Seconds

In this edition of My Startup in 60 Seconds, Babatunde Akin Moses, the founder of Sycamore, talks about how the P2P lending platform is committed to creating a more seamless lending process for users by connecting them directly with their peers.

Watch the 1-minute YouTube Short here!