The front-end web development stack is made up of a number of tools that help you build the front-end of your application. This is what your end users see and interact with, and what they’ll (more often than not) judge you the harshest on. We’ll look at what (some of) these tools are, how they work together, and what you can expect to need as a front-end developer.
Your stack is defined by what you need from a framework (or frameworks) and what your developers use. The world of web development today is complex and ever-changing, as technologies come and go like the wind. As a front-end developer, you rely heavily on a handful of tools and libraries and trade them out over time.
Some technologies are swapped out, others just evolve. Some of the technologies are destined to last for generations, others might disappear before the weekend. Let’s go from the most fundamental parts of the front-end stack to the more abstract.
HTML and CSS
HTML stands for Hyper-Text Markup Language. HTML is a core technology (if not the core technology) which is integral to web technologies and development. It has a lot in common with XML. HTML is the structure of a website (rather than the specific appearance) which impacts the actual content and how it is organized.
The structure behind HTML is split into elements which tell a browser what an item is and how it should be displayed (though not necessarily styled). The following is a small sample of an HTML page:
<!DOCTYPE html>
<html>
<head><title>My Site</title></head>
<body><h1>My Site</h1>
<p>Lorem ipsum.</p></body>
</html>CSS stands for Cascading Style Sheets. While HTML divides a page into elements and helps a browser display content based on what it is, CSS affects how each element appears. A paragraph is a paragraph to HTML, but CSS allows one to have different fonts, options, etc. depending on what is necessary to show off to end users. HTML is what you have to present, CSS is how to present it. Here’s an example of a CSS file:
body {
font-family: arial, sans-serif;
font-size: 14px;
}
.myclass {
font-size: 12px;
color: red;
}
#myid {
color: blue;
font-weight: normal;
}There are multiple versions of each of these, but only HTML5 and CSS3 are of any concern to a modern developer (as of writing). While learning CSS2.1 won’t hurt anything (though you do lose out on a lot of control on style), older versions of HTML are completely obsolete for modern applications. You need HTML5 (or whatever the next, newest, stable standard is), but CSS is a little more flexible (though newer is more friendly).
See here to learn more about HTML, and here to learn more about CSS. These are the most essential technologies to web development and the most important to learn and master.
JavaScript
JavaScript (JS for short) is the most important programming language for front-end development. It’s an object-oriented language, which is dynamically typed. JavaScript is run from the browser and can help an application communicate between the front-end and the back-end via the Document Object Model (DOM), or do a multitude of other functions. Whole browser applications are possible with just client-based JavaScript.
JavaScript is a relatively simple language which is flexible and extensible. Multiple frameworks such as Node.js and React are built on JavaScript. JavaScript also has a lot of different frameworks which provide different benefits and use cases.
Learn JavaScript from something like Code Academy or this (affiliate sponsored) search. It’s best to have a bit of HTML and CSS under your belt before delving into JavaScript. While JavaScript is capable of standing alone, it also works best to learn with it as a front-end language first.
JavaScript Technologies
JavaScript by itself is important, but there are countless technologies which you may need to actually make JavaScript convenient. One of the most fundamental concepts of modern development comes from Ajax. While Ajax is a bit dated, the concept and needs which led to its creation are the principles from which most JavaScript frameworks build off of. Traditional Ajax is basically dead, but the concept and the methodology affects newer frameworks. They all try to fill the gap which led to Ajax.
jQuery is an extremely widespread and efficient JavaScript framework for front-end development. It makes Ajax simple, it abstracts out browser issues, and it makes traditional JavaScript tasks easier. It’s small and makes common coding scenarios take substantially less work. For instance, on a front-end project, we turned a couple hundred lines of plain JavaScript into a few lines of jQuery.
Bootstrap is similar to jQuery, but it includes things to make aspects of web development easier. It handles CSS tasks and makes aesthetic front-end work much easier. ASP.NET Core uses Bootstrap to make development substantially easier. Bootstrap’s grid method makes nicely formatted web forms, tables, etc. trivial.
JSON stands for JavaScript Object Notation and is one of the most important data types to use with modern web development. REST APIs use it, as do websites. JSON is used by virtually any framework which is going to pass information to or from JavaScript, or most consumable, modern web services. An example of JSON looks like:
{ "inbox":"realuser@example.com",
"display":"John Doe",
"settings":{
"date":"us",
"time":"UTC",
"theme":"dark"
},
"emails":[
{"to":"realuser@example.com", "from":"otheruser@example.com", "subject":"RE:", "body":"Yes" },
{"to":"realuser@example.com", "from":"otheruser@example.com", "subject":"RE: RE:", "body":"How are you?" },
{"to":"realuser@example.com", "from":"otheruser@example.com", "subject":"RE: RE: RE:", "body":"I'm running out of ideas for emails." }
],
"inboxsize":5000
}What are you developing for and what does what you need? jQuery and Bootstrap fill similar roles, but are more efficient with different niches, and have varying resource requirements. If you don’t know where to go, start with what’s most common and go from there. JSON is always going to matter, Ajax principles are important, and jQuery and/or Bootstrap are common. That said, there are plenty of other great frameworks to learn depending on what you’re doing.
Graphics
While not every web developer is expected to be a graphical designer, every good front-end developer should at least know the basics. You may not need to create images or assets from scratch, but you do need some degree of understanding for the basics. Learning the basics of Photoshop or GIMP for basic touch-ups, color corrections, etc. can make web development a lot easier and smoother. Basically any raster graphics tool is a value-add for a web developer.
Vector graphics are also important for web development. Icons, logos, etc. should all be done with vector graphics (and exported to raster if necessary). You can use something like Inkscape to work with vector graphics.
Graphics are important to a web developer, but there’s more than just asset creation and management. You need to learn tools which allow you to find and match colors, convert image types, etc. An eye for color and detail is essential for properly shaping and forming pages to match their intention. The wrong color can make a logo pop in a good way or a bad way, and the wrong font colors can make or break an intended flow for a web-app.
Learn the basics of both vector and raster graphics and how to work with them and you’ll be ahead of most developers. No one necessarily expects a front-end developer to create assets, but being able to shape them or work with them at some level without requiring an artist at every step is essential to success.
UI/UX
User interface (UI) and user experience (UX) are both good skills for any developer to have. The way data is organized can impact a user experience. How you present options or imagine a workflow can make a website intuitive or a nightmare.
A front-end developer which can help make the UI and UX experience more intuitive is infinitely more valuable than someone who can just hobble together HTML, CSS, and JS. There’s a lot which goes into learning UI and UX, but it pays to approach it with an actual methodical approach. How can you make a site flow? What are users going to use your app for and what can make it easier?
There isn’t really a “right” answer for UI and UX, but there are methodologies that will make things easier. Focus on what can help make the interface simple and consistent. Make inputs intuitive and flow in a way which doesn’t require guessing or backtracking. Follow design principles and don’t get left in the dust.
Templating/Markup Languages
Different frameworks will have different options to template a site. This can be an addition to HTML to allow inline code produced on the back-end, or even additional tags or options which do similar. ASP.NET Core has its own templating system which is different from that in Lapis.
An example of etlua:
<form action="/" method="post">
<textarea id="sql" name="sql" rows="30" cols="50"><% if input ~= nil then %><%= input %><% end %></textarea>
<textarea id="output" name="output" rows="30" cols="50" ><% for i, line in ipairs(output) do line = line .. "\n"%><%= line %><% end %></textarea><br />
<input type="submit" value="Convert">
</form>An example of Razor markup:
<label>Import Type:</label>
<select asp-for="@Model.importtype" data-val="true" class="form-control">
<option value="0">--Select Option--</option>
@foreach (var item in Model.ImportType.OrderBy(m => m.DisplayName))
{
<option value="@item.ReportName">@Html.DisplayFor(m => item.DisplayName)</option>
}
</select>
</div>Almost every large web framework is going to have some kind of markup. JavaScript based technologies may just build with JavaScript, but most other languages will have a custom templating or markup language. It’s rare to expect a front-end developer to just make the site and have someone else port the framework specific pieces in. You need to learn the template or markup language for the framework you are working with or plan to work with.
If you’re looking to write code for Lapis, you want to learn etlua or similar. If you’re looking to work with ASP.NET Core, you need to work with Razor or similar markup. There are all sorts of solutions, some of which are supported by multiple frameworks, and many of which are not. Learn what matters to your job or your career path.
Conclusion
There are countless web technologies which matter for front-end development, but some are going to matter more than others. Focus on the fundamentals with HTML, CSS, and JavaScript.
Branch out into the various JavaScript libraries, graphical art and editing, and UI/UX as you can. These skills can put you ahead or behind competition. Learn how to work with the back-end and template what they need without having to waste development hours. Development is a collaborative process and not a competition. Work towards success without forgetting that the application is a joint effort between people and schools of thought.
Image by Fabrizio Van Marciano from Pixabay