Starting on the web with no prior experience can be intimidating. But with the right resources and a clear study plan you can learn a lot about front-end web development.
In this post, I’ll share tips across the board for every phase of the web development pipeline. It doesn’t matter what your prior experience is or what your background is for working on the web. You can start from anywhere with any experience level as long as you’re willing to practice and put in the work.
There is no single correct way to learn or practice web development. But these tips can get you thinking about what you need to study and how to progress as a frontend developer.
Modern HTML & CSS
A lot has changed in the past decade on the web. The landscape of frontend development is a lot more streamlined, yet also much more complicated with tons of open source tools and libraries.
It’s crucial to start at the beginning with HTML and CSS. These languages have been the foundation of the web dating back to the 1990s and this won’t be changing anytime soon.
But the modern era of web development relies on HTML5 and CSS3, the two current specs released by the W3C for developers.
I could prattle on about all the new features but these can all be found online in much greater detail.
Instead, let’s cover a modern workflow for frontend development. It’s pretty simple and I break it down like so:
- Code raw webpage in HTML
- Add CSS for structure & style
- Add extra features like responsive styles
- Full browser testing for support
You can find dozens of free open source HTML/CSS libraries to help you build sites faster. These free resources like 960gs offer pre-built grids and page templates so you can focus on building layouts without worrying about every piece of code.
If you’re a complete beginner and have no idea how to write HTML or CSS then you’ll need to start with practice projects first. The more you practice the more you’ll learn, and you really can’t move onto frontend frameworks without this existing knowledge.
Here are some basic resources to get started if you’re completely new to frontend development:
- Must-Know Tips To Become A Web Developer
- Learn CSS Layout
- /r/Frontend Community
- Coding An HTML 5 Layout From Scratch
Frontend Tooling
Just because every website needs raw HTML and CSS doesn’t mean you have to code it all from scratch. Once you understand the basics of CSS classes and positioning you can pick up tools that’ll improve your speed and precision.
The best place to start is with a CSS preprocessor. These are free tools like Sass and Less that come with options for automating CSS with variables, loops, functions, and similar features. This may seem scary but it’s a fundamental part of modern development.
Many developers agree that preprocessing is necessary is you want to get full-time work. This technology is only growing in popularity and it ties into the modern frontend workflow.
Another tool you might try is HTML templating. This is typically used in conjunction with a JS framework like Angular, but it can be used separately.
I personally do not use much HTML templating because I think it’s excessive for most projects. But something like Haml or Slim can save you time writing verbose HTML code by hand.
The good news is you can practice a lot of this stuff online for free.
Cloud IDEs like CodePen have built-in support for HTML/CSS preprocessing engines so you can write code and see how it compiles live on the web.
One thing to note is that you must fully understand the basics of HTML/CSS before moving onto preprocessing. If you don’t understand the basics then you’ll really struggle with these tools.
In fact, I’d recommend only writing basic HTML/CSS for a while until you feel incredibly comfortable with the languages. From there you might even try using a framework like Bootstrap or Foundation if you’re looking for a way to build layouts fast.
These frameworks do not force Sass or HTML templating into your workflow. They come packaged with grids, typography, and responsive CSS classes so you can focus on building the layout without worrying about the little details.
Even if you never plan to use frameworks professionally I’d still recommend studying Bootstrap or Foundation. Try building a sample project just to understand how they work and why people use them.
If you can work in Bootstrap comfortably then you likely have enough knowledge of HTML/CSS to move into more advanced challenges.
And remember that every developer is always trying to learn more. Nobody’s perfect and since the web is constantly changing there’s always new stuff to learn.
Open Source JavaScript
If you know the fundamentals of HTML and CSS then you know enough to build websites. But in the modern era, there’s one more language that can really up to your frontend game: JavaScript.
All modern browsers support JavaScript and the language has been a hit with open source projects. The most popular is jQuery which is a free open source library made to simplify JavaScript on the web.
But the newest ES6 code makes it even easier to write great JavaScript from scratch. You can use the TypeScript language for enhanced JavaScript that naturally compiles down to ES5 for compatibility.
You may be confused about all this terminology so let’s break it down.
- ES5 – the current version of JavaScript supported by all browsers
- ES6 – the newest version of JavaScript; includes many new features but must be compiled into ES5 to run in browsers
- TypeScript – a superset language of JavaScript very much like ES6; it also compiles down to ES5 so it can run in browsers
If you start by learning basic vanilla JavaScript then you’re learning ES5. They’re the same thing.
But the newest features in ES6 can help JS developers write better code that’s easier to sustain and debug. TypeScript is very similar and it’s basically JavaScript with extra features.
Since modern browsers only support ES5 web developers use compilers like Babel to convert their code for use on the web.
There’s a big push for TypeScript code over ES6 because it’s heavily supported by Angular. If you’re not sure about TypeScript then check out this post to learn what it is, how it works, and why it’s gaining traction.
But if all of these words sound confusing then I highly recommend learning the basics first. There’s a free book online called Eloquent JavaScript and it’s the go-to resource for anyone who wants to learn proper JS code from scratch.
Once you go through a few of those lessons I’d suggest moving onto jQuery. It’s a free open source library that runs in all browsers without any compiler. It just saves you time writing the same JS code repeatedly.
Beyond jQuery and ES6/TypeScript there’s a whole world of free open source JavaScript available. Most JS libraries solve very specific problems like file uploads or data visualization. But check out this huge list if you want to learn more.
When just getting started don’t worry much about these other libraries. Nobody can learn everything and you only need to learn a library if it solves a specific problem.
Instead focus on the basics of JavaScript first and make sure you feel comfortable with the syntax. Here are some further learning resources for beginners.
Getting Into JS Frameworks
I don’t want to go into too much detail here, but I can’t possibly avoid the surging popularity of frontend frameworks.
Modern frontend frameworks are different than the previous frameworks I mentioned like Bootstrap, primarily because they solve different problems. Frontend JS frameworks mostly work in the MVC or MVVM models which connect views on the frontend to data on the backend through a controller.
Normally data transfers occur with a backend language. But web development has been moving towards the single-page application structure and this seems to be growing quickly.
The most notable frontend library is React because it handles page components very differently than a full MVC framework. React mostly handles the frontend data which can then pass onto the backend through other libraries.
This primer is a great intro but it’s not for the faint of heart.
I would not recommend JS frameworks until you’re fully comfortable with JavaScript at all levels. You should be comfortable writing code, debugging code, and solving your own problems in Google.
But if you’re willing to get started brush up on MVC for JavaScript and spend time studying what this means.
Many of these frameworks go beyond frontend development so I don’t think every developer should worry about them. However, if you’re interested in the field of frontend development these libraries will only become more relevant as time goes on. If you’re willing to try then these resources will help you get started:
- Choosing A Front End Framework: Angular vs. Ember vs. React
- Top 7 JavaScript frameworks for efficient front-end-development
Node Package Manager
You may or may not know about Node.js but it’s taking the frontend world by storm.
Node is a free open source JS environment that can run on the frontend and backend of a server. Many devs now use Node for full stack web development. But frontend devs like it for the package manager which supports automation and quick versioning of frontend resources.
There are many package managers but few have captured as much attention as Node’s alternative.
The Node package manager goes by the name npm and it’s a very simple concept in theory. You can install npm on your computer once you install Node and from that, you get two big features:
- The npm repository of libraries, plugins, and projects
- The npm command line interface for running npm commands locally
Once you’re somewhat comfortable with vanilla JavaScript you really should look into npm. You don’t need to know about Node to use npm, just like you don’t need to know Ruby to use Sass.
The underlying language isn’t as important as the functionality.
Since npm runs in the terminal you will need to get comfortable in the command line.
For anyone without prior terminal/CLI experience, this can seem like a pain. But in modern frontend development, the command line is vital if you want to do this work professionally.
Node is just one example, not to mention all the extra tools like Sass and Git that run through a CLI interface.
I’ve also struggled with this and I know it can be challenging. Especially if you have absolutely no idea why you’re learning NPM or where to get started.
The answer lies in practice. Come up with cool projects and practice building them with the command line. Check out this beginner’s tutorial explaining the basics of NPM and how to use it on a web project.
Once you find a couple features that save time you’ll really grow to appreciate everything you can do with the terminal.
Grinding with Gulp
Task automation is perhaps the best emerging toolset you can learn for frontend development. Free tools like Gulp and Grunt allow you to automate mundane processes through the command line.
Both are great tools, although I personally recommend Gulp because of the larger fanbase. It also runs through npm which is a cornerstone of modern frontend development.
With Gulp you can write commands in JavaScript that run plugins or functions automatically. For example, you can automate your Sass->CSS workflow using Gulp Sass, a free plugin made for Gulp users.
Everything runs through the terminal so Mac, Windows, and Linux users all have access.
Getting started is much easier than you’d think, although mastering the Gulp workflow takes time.
Do some research and see what’s out there for Gulp tooling. Check communities like /r/WebDev and /r/JavaScript and be willing to ask questions. Most people are very friendly and they’ll be happy to help you along with advice & suggestions.
But don’t jump right into Gulp without knowledge of both JavaScript and NPM. If you already feel comfortable installing NPM and working in the terminal then you’ll have a much easier time automating tasks with Gulp.
If you’re more of a practical learner then try some of these tutorials:
A Typical Frontend Workflow
What exactly is a typical frontend development workflow?
This is a common question and unfortunately, there’s no right answer. Each developer has their own best workflow and you’ll need to find yours too.
But I can at least help you get on the right track with suggestions for a semi-typical workflow on a new dev project from start to finish.
Always start with HTML and CSS first. This can include Sass and/or an HTML shorthand like Haml. Both of these have Gulp plugins so you can automate your dev process via npm.
Every time you sit down to work fire up the same dev environment. Launch your Gulpfile and try setting up an automation routine ASAP. The folder structure can be anything you prefer, although there are some best practices you can follow.
Make sure your HTML/CSS layout works properly before adding any JavaScript.
Test all modern browsers and try resizing them to check the responsive layout too. This is a good routine for progressive enhancement which is a webdev technique that supports the least amount of features first, then slowly moves up.
If you’re willing to learn Git version control this can also be added to your workflow. And while there are some cool tutorials for learning Git, it can become just another confusing technology to study.
I’d suggest adding Git only once you’re comfortable building frontend projects from scratch. If you’re already using Sass and Gulp then you’re probably comfortable in the command line. And if you can build projects from scratch you’ll have a reason to add Git version control into the workflow.
My last suggestion is to consider emerging technologies and how they might fit into the workflow. It’s easy to start with HTML/CSS, create your automation, run browser tests, and finally add JavaScript into the mix.
But what if you want to start with a framework like Bootstrap? Or what if you want to try Web Components with a library like Polymer?
Be willing to attempt new practice projects and try adding new features each time. The best way to learn and improve your workflow is to push yourself to try new things. Keep what works & discard the rest.
Just make sure you’re comfortable with the basics of HTML/CSS, Sass, and Gulp/NPM before moving onto frontend frameworks and additional libraries.
Moving Forward
As I mentioned before there is no single right or wrong workflow. But there are certain tools that are almost mandatory for any serious frontend developer. I’ve covered all these tools in this post and I hope my tips can offer guidance to get you started.
The web industry changes rapidly so you’ll need to be on top of these changes to see real progress. The tools and tips in this post are the best resources for modern web dev. If you start here and gradually increase your skills you’ll have no problem building professional web projects from scratch.
