Front-End Development is the most straightforward path to what some would refer to as the IT proper. You are actually working with programming code using languages and frameworks. Contrary to the industry stereotype, Front-End Developers have their share of challenges at work as well.
As a Front-End developer, you are the person shaping how the website is rendered on your user’s screen. Backend developers set up the infrastructure, the copywriter works their text magic, the designer comes up with stunning visuals—but you are the one bringing them to life. This is where the name comes from: you are ultimately responsible for what is in front of the user.
Working with websites, you’ll be using the holy trifecta of Front-End development. HTML serves as the skeleton, communicating to the browser that this text is bold while I’m using italics here. Next comes CSS to make things more colorful and playful. Finally, Javascript is what you use to make the page react to what the user is doing on it.
These days, HyperText Markup Language is simply the initial part of a project that you want to get over with. Like I’ve mentioned, you use tags to communicate the very basics of how a website should look. <b></b> is used for bold text, <h2></h2> denotes a level 2 heading (commonly separating article sections), <img></img> helps you embed a photo of a borscht.
The key thing to understand is although HTML can and will give your website structure, it won’t make this structure particularly perceivable. The <ul></ul> lists look atrocious without properties defining indent, spacing, and list markers. A dropdown menu with nothing but <optgroup></optgroup>... Let’s not talk about that here.
This is not the type of color scheme, fonts, or layout that your company will be able to sell nice things. They will probably not even understand that the things you are selling are nice. This is where CSS comes into play.
Now, this where things get pretty (and challenging!). CSS (Cascading Style Sheets) allows you to prettify things that you outlined with HTML and add some unique stuff as well. In this decade, Websites without any CSS hardly see the light of day. Good thing mad enthusiasts like Design Lance put the effort to illustrate why.
CSS also allows you to add animations. They serve aesthetic purposes but also cover your friends in the backend development. Loading is less frustrating when Front-End Developer (and the creative!) spend the effort to make it fun!
As for challenges, CSS has the word Cascading for a reason. You would want the website to render appropriately relative to the size of a device (or a tab) that the website is displayed on. There are two key approaches to that, responsive and adaptive design. Responsive design is about elements created and coded to be potentially shrunk and expanded again. Adaptive websites present one of the predefined layouts depending on the screen estate. UX people explain it better.
Each option has its advantages but that's a topic for a different (and not necessarily Front-End) article. The key point here for us is that responsive designs require a lot of work to get everything right one time. Layouts for adaptive designs call for repetition: you’re coding more of the same. Oh, and adaptive designs need Javascript!
Javascript is what makes websites interactive. You use them to implement forms, pop up windows, chat boxes, and all other elements that react to user input or actions. Mobile apps and server-side apps utilize this language as well.
Nowadays, you could argue that no commercial website in the EU can function Javascript. Even if you wanted to omit all the fun stuff that keeps users engaged, there is no hiding from GDPR. Consent forms are mandatory and get increasingly complex if you are collecting more information and/or sharing it with multiple providers. Below is an example of a reasonable GDPR cookies&tracking form. You'll find websites with fewer buttons to click but there are plenty that would prove more tedious.
For a Front-End Developer, Javascript is the top block of the pyramide. You used HTML to give browser the general idea of the website, you utilized CSS to make it an eye candy, and Javascript makes the website useful beyond just reading the text and checking out the images.
After nailing the Javascript basics, you can start picking up Javascript frameworks to start executing projects at large. The most popular ones are Google’s Angular and Facebook’s React. Front-End development frameworks have the same core ideas behind them:
Alternatively, you can become a full-stack developer, wielding both Front-End and backend development tools. Yet another Javascript framework, Node.JS, is a popular option for powering online solutions. Mindset and thinking-wise, there will be a lot of catching up to learn the backend side of development, but your Front-End experience and Javascript knowledge go a long way here.
We at Beetroot Academy believe in starting fast and strong to progress from there. Our Front-End Development course introduced you to HTML, CSS, and Javascript over 4 months of classwork and self-studies. We’ve still got a couple of spots left on the group that starts in the middle of August.
