Share this Post
Looking to learn more about front-end development so you can start coding?
This article is a combination of tips, tricks, tutorials and a ton of great resources to help new developers learn the ropes.
Dev tools change constantly, so this list is as updated as possible for 2021.
I wanted to keep things simple here... (When I first started, it was hard to find guides for complete beginners.)
Note: 1.5 billion websites were created at the beginning of this year. There’s no work-shortage for new developers. You just need training-info. I’ve got you covered.
Front-End Dev Guide: N00b-Friendly Explanation
So, Put Basically? 🐥
Front end web development is anything on the internet users can interact with/explore. These elements are created through coding languages.
TL;DR: Front-End vs. Backend
Back-end developers basically create the things you don’t see, such as security systems (best VPN services). But front-end developers create what the user sees, like buttons, images, and fonts. (Detailed explanation)
TL;DR: How to Become a Front-End Dev
There’s a lot of information floating around on the internet. We recommend using a structured plan, and one chosen resource, rather than hopping from one to the other. (We give you a step-by-step curriculum you should use in the Main Section of this guide. Scroll down for more.)
TL;DR: Required Front-End Skills / Programming Languages
TL;DR: Free vs. Paid Front-End Courses
Assuming you want a Certificate of Completion, you probably need to pay for your course. Paid courses also often offer instructor Q&A sessions (plus direct messages to instructors). But there are excellent free alternatives that have community support, such as FreeCodeCamp.org.
Check out more resources.
TL;DR: Coding Camp Breakdowns
Click here or scroll further down for a breakdown by country, plus a great list of the best front-end dev resources.
TL;DR: Front-End Developer Interview Questions
Let’s put you through a TL;DR Front-End Developer Questions Interview (if the whole thing was summarized as a “top-three”):
- How do you ensure your websites/apps are user-friendly and accessible?
- What resources do you use to keep your skills sharp and updated?
- What are your favourite types of front-end web development projects to work on and why?
(Click here , for the full list of front-end developer interview questions.)
TL;DR: Front-End Developer Jobs Pages/Titles: Best Front-End Developer Jobs
The top three front end dev jobs: Upwork.com (International), Indeed.co.uk (UK) and Linkedin (International). The top three front end dev job titles:
- Developer (skilled in CSS, Java, DOM & HTML)
- Engineer (computer science/engineering background)
- Designer (also has Visual Design/Interaction Design skills)
Click here or scroll further down , for the full list of front-end developer jobs pages/job titles.
That’s it for the TL;DRs … now for a bit more detail.
Front-End Dev Guide (Beginners) 👶
Have a bit of a more detailed look at the above questions - as well as a resources page at the very bottom of this guide. Let’s get started with the basics...
Front-End Development Explained
This could be for a URL you are visiting. Or for a game/app you are downloading, in order to use on a tablet or mobile.
Front-end web developers deal with things that users can see and interact with directly on-screen. They need to be very in-tune with new developments and tools available.
It's important that the information presented is user-friendly and effectively-placed. Front end developers need to factor in the wide-variety of devices now available to view the same website/apps.
Today, Google and other search engines also heavily prefer websites that are mobile-optimized. Mobile-First Indexing rewards websites that look really good on various mobile devices - as well as desktops.
What Will Your Coding Be Used For?
The most common coding that web developers create will be for running inside of web browsers, environments such as Google Chrome Firefox. or Internet Explorer.
But, your coding could also be used inside other settings/environments. You will come across these three other scenarios as you get more training:
These encompass things such as scraping, where you search pre-existing web pages and retrieve specific bits of information.
- Headless Chromium
Which you can think of it as a tab in a web browser - and these are used for running web pages inside of applications.
- Electron (desktop apps)
- NW.js (desktop apps)
- Cordova (phone/tablet apps)
Native From Web Tech
Web development without the use of web browsers, directly inside of native applications.
- React Native
Front-End Vs Backend
Back to the Basics 🔙
A front end developer deals with things to do with what servers visually see and interact with, such as buttons, images, colors, layouts, and fonts.
A back-end web developer deals with behind a curtain functionalities, such as networking and security.
Basically, anything that the user does not see is to do with back-end web development. In many ways, front-end web development is more exciting, as you get to deal with things that users actually love to interact with.
What Should I Choose?
One way of thinking about it is what do you find more interesting?
If you want to explore how to build a website that looks great, then become a front end developer.
Do you want to build a website that works amazingly - and do you want to understand how websites work, from the inside-out - then become a back-end developer.
To give you a bit more of an example, let's say that you wanted to create a WordPress website for a business (grab the best WordPress host first). The frontender would be responsible for sorting out of the presentation, including the images and overall atmosphere of the website.
By contrast, the back-end developer will be responsible for managing the website’s performance-issues, organizing how users can do things like logging-in, and the security of the website.
Frontend developers specialise in different coding languages to backends (though there will be crossovers).
Backend devs use different programming languages. They rely on “server-side” programming languages. But the most common ones are Ruby, Python, PHP, Java and Node.js.
You won't be expected to be a master at every one of these languages (only one), but you should have enough experience to code in two other programming languages.
On top of this, backend developers need to know how to work in databases such as Oracle, SQL Server, and MySQL.
Who Is More Skilled?
Frontend developers are more focused on the appearance and user-interface of a website. So they have visual visual skills to do with design, such as with programs like Sketch, Figma, and Photoshop.
They also need to know about getting domain names, the best web hosting plans, and buying the various theme templates.
Back-end developers are abstract thinkers. They need to have critical-thinking skills that let them debug codes and figure out how to make a website function in a particular way.
They need to know about how information is stored, how it can be stored securely, how SEO can be improved, how to stop the website from crashing, and how to design specific new features - that will not destroy the functionality of pre-existing ones.
They do a lot of testing, working to make sure that as few errors occur as possible. It’s the reason why sites like YouTube and Amazon work so well.
Who Gets Paid More?
Back-end developers need to master more coding languages, while connecting it with a ground-level study of how websites function.
Whether you want to do back-end or front-end development, you should start by learning CSS and HTML. These programming languages are not too difficult to learn and possess extreme power regarding web developments of all kinds.
Frontend guys also deal with practical site-functionality stuff, like making sure the best web host possible is being used for a client’s site. (Siteground review).
That said, backend devs earn more than frontenders. On average, a frontend developer will get about 70,000 American dollars.
(Backenders will get $117,000...)
The average hourly rate of a frontend developer is $50 per hour, while a backend dev earns $65 per hour. Of course, this depends on your level of experience and your specialissm. If you are very good, you may charge three-times as much - or more.
How to Become a Front-End Dev
Don’t worry about choosing your specialty yet. The basics are the same for pretty much any front-end speciality.
You also need to learn Applied Visual Design, Responsive Web Design, and Applied Accessibility principles.
These will cement the basics of writing good website code. This should be taken slowly, as they are foundational to building-up your knowledge.
After that, you should go ahead and learn layout techniques, such as CSS Grid and CSS Flexbox. Then, you can actually start creating projects.
You first need to choose a plan-of-attack. Web development is an enormous endeavour, with limitless possibilities.
There is a massive amount of information floating around on the internet. So, structure your strategy (the best way of doing this is to choose one resource to focus on).
When you focus on one resource - one training tool - you get a uniformly-structured education. For example, with FreeCodeCamp, you get these resources - all for free:
- A curriculum - You can use this as your primary plan-of-attack. Step-by-step, fill it in.
- Mini-exercises - Coding is a problem-solving challenge.
- Project-work - by the end of each chapter you will have built five projects. Once done, you will be certified.
- Community resources - Talk to real people and share information in blogs, a YouTube channel, and a forum. Talk to people who are at various levels.
There are advantages to paying for a course. See the Resources section, for more… That said, here are some things you are likely to cover - in any top, frontend dev course:
Responsive Web Design
This covers the basics of how to build static websites,which the best free website builders use. Another aspect of this is how to apply styles to these websites.
Also known as RWD - for short - this is an approach to designing websites so that they render optimally on a wide-variety of devices, or window-sizes.
This is very important for user-satisfaction and user-experience. RWD also adapts layouts so that viewing is optimally-proportionate to “proportion-based grids.”
Due to the importance of mobile traffic, responsive web design has never been more important. Mobile traffic accounts for over 50% of all internet traffic... One of the easiest ways to boost SEO-scores is to have a mobile-friendly website.
- Flexible images that do not expand outside of the containing element
- Responsive layouts that automatically set the screen size to match whatever device is being used
- Media queries (like CSS3) that lets the page wield different CSS styles, depending on the nature of the device that is viewing the website, e.g. such as adjusting the width of the browser
This is a very simple yet extremely powerful technology that lets you manage how information is laid out and aligned inside a particular amount of space or environment.
You can think of this as an algorithm that lets a layout automatically adjust itself to best fit the available space, allowing for the best experience on any device.
For example, a Flexbox container could expand itself to better till the available free-space, or shrink itself to avoid overflow from occurring (when information spills outside of the containment box).
The CSS grid is a more advanced version of the CSS Flexbox. You may have even come across this, if you have tried to create your own website using a WordPress theme template.
Also known as the CSS grid layout, this technology uses Cascading Style Sheets, so that websites layouts can be even more responsive and consistent, regardless of the browser being used.
Most major browsers use this already. You can think of it as an advanced alternative to the CSS flexbox (also written as CSS flex box).
Try To Make Stuff!
Practice makes perfect. Hayloft Hue tips to start to play around with your new coding skills, learning as you go:
- Set up a code editor on your machine, so you can begin to figure out how it works
- Set up an account with Codepen. They let you build-out projects, run tests and practice frontend
- Start to learn some of the basics of command-lines
Required Programming Skills/Languages
You Will Also Learn These Foundational Languages 🔺
Yes, you need to start to speak a new language. But, starting with the basics is best. Once you have this foundation, learning more advanced programming languages will be more second-nature.
HTML is not actually a programming language. It’s what we call a markup language, responsible for defining how your content is structured.
(Just think of your teacher noting where changes should be made on your essay, and you have the right idea of what a markup language is.)
There are a series of elements inside of any piece of functioning HTML code.
It's your responsibility to wrap up or enclose different sections of your content, so that your content acts or looks a specific way.
For example ... you can use <tags>, to make certain sections of your text hyperlink to another location on the internet. Tags can also be used to make fonts bigger, smaller, or formatted in other specific ways.
Every piece of HTML code has these four elements :
- An opening tag, which sets up the beginning of your chosen element, like emboldening, or creating hyperlinks.
- The content that is being manipulated by the element, which might be an image or a text - or something else.
- The element itself. This describes what the opening tag, the closing tag and the content are creating
- A closing tag, which always includes a slash before the element’s name... This signifies that the element has ended in that location. If you do not use a closing tag, the HTML code code will result in an error (... a rookie error)
HTML5 was new-stuff in 2017. And it’s still very important. It's simply the latest version of HTML, also known as Hypertext Markup Language.
We explained - above - that you should think of a markup language as the same thing as your teacher highlighting changes on an essay you submitted.
HTML talls your content what to do and how to look... HTML5 allows much more manipulation of content without requiring users to download browser plug-ins.
HTML5 is used in everything from music and movies, to animations and apps. It can also be used for building very complicated browser applications.
This technology is constantly evolving. Some very cool features include web apps, video and graphics, as well as geolocation technologies. It's already fully-integrated with the most popular browsers like Explorer, Edge, Chrome, Safari, Opera, and Firefox.
… In order to create HTML5 websites, you'll be using the same frontend dev tools you use to create basic HTML. Specific softwares like Adobe Dreamweaver can also be used, to automate some of this - even to a great extent.
Also look out for Adobe's Edge, which is a dedicated HTML5 animation tool. Edge makes it easy to make animations similar to Adobe Flash, for your websites.
CSS (HTML’s Version of Snape Head-Master)
CSS is short for Cascading Style Sheets. These are responsible for how your HTML elements are displayed on websites. on paper, and in various media forms.
They’re like a responsible-adult making sure kids don’t talk too much - while in class - that they get a failing grade.
CSS is very useful for doing heavy lifting, automatically. It manages your web page layouts, all in one go. For this reason, it is extremely powerful.
The native file types for external style sheets are CSS files. Different style sheets can display the same content in a massively-wide variety of ways.
This tool is important to use if you want to have more ability to stylize your web pages - working with HTML - including the overall layout, design, and design variations. Also, for varying screen-sizes on different devices.
CSS does what people think HTML was designed to do. HTML is just a mark-up tool. It was never meant to format a web page!
CSS fills that Gap, letting you apply advanced changes to font, color, and other attributes that are important for making a web page look awesome.
We’ve named other programming languages in this guide, but start with these three as your basics: Basic HTML, HTML5 and Basic CSS. (Once again, a good course will have this organized for you).
After this, learn about Applied Visual Design. Responsive Web Design, and Applied Accessibility. All of these are very important for creating mobile-responsive websites. And are as important, foundationally, as HTML, HTML5 and CSS.
Front-End Developer Interview Questions
Besides specific programming questions where you have to look at lines of code and figure out how to solve it, as though doing a math equations, these are conceptual questions you may be asked.
Most are useful questions (some are not), but all are commonly asked.
Common Dev Interview Questions :
- What is the DOM?
- What is a closure?
- What is Big O notation / why is Big O notation useful?
- What is REST and why is it used?
- What is system design?
- Take us through the process of full stack implementation of an autocomplete widget.
- Describe what event bubbling is and how it works.
- How do I fix a slow website? (A top-tier VPS host may be a common fix)
- What frameworks are you familiar with? Also describe the benefits and drawbacks of each
- Why are frameworks important? Describe the kinds of problems that frameworks solve
- Break down how prototypal inheritance works (and how this is not the same thing as classical inheritance)
Don’t forget the basics, like knowing what's a quality domain registrar.
Questions YOU Should Ask
Prospective employers like to know that candidates have a genuine interest in working in their company.
You should be aware of certain company-info while being interviewed, so that you seem sharp and enthusiastic.
Be sensible in choosing what questions to ask and when to ask them.
These questions will also give you a better understanding of if you want to work at a particular company:
Questions to Ask
- Why is this position being hired for?
- What will I be responsible for in my role?
- What programming languages will I be working in, day-to-day?
- Where exactly will I be working?
- How long is this contract for?
- What is the target-salary (as in, the range)?
- What is your team structure?
- How is work assigned?
- How are teams seated together?
- Are there isolated areas for people to work?
- How frequent are team meetings?
- How is work estimated?
- How is your workflow currently being managed?
- What time-zone does your company work inside?
- Who are the star role-models in your company?
- Is there a dress code?
Don't be afraid to ask specific questions about the various programming languages, and the specifics of what you expect to be doing in your role.
Front-End Developer Jobs / Job Titles
Where to Go for the Best Front-End Dev Jobs - and the Most Common Job Titles
Front End Developer
You might have come across these terms several times before, in your research. This job is exclusively for somebody with a computer science engineering background (typically).
There is actually some debate on whether front-end engineering will eventually replace front-end development, because web development is slowly becoming more complicated.
To prove that you have those skills, you would need to have a portfolio - of front-end applications you have built.
- “Full-stack” is sometimes also used by employers to request developers who have both front-end and back-end web/app experience, possibly also including design.
Front-End Web Designer
This means you need to be skilled at professionally-designing websites using Visual Design and Interaction Design. As well as having HTML and CSS skills - at the minimum.
Mobile Device/Tablet Front-End Developer
These sorts of developers have experience in creating front-end developments that are tablet and/or mobile-optimized. This can be for a native app or on a browser.
Front-End Expert At SEO
You should have advanced experience in creating front-end developments that can forward an individual’s or company's SEO-strategy.
As for where to find employment (which you won’t have a problem with, once you are skilled):
- Upwork is a major freelancer website where thousands of jobs are posted daily
- We also recommended LinkedIn/regular marketplaces such as Indeed.co.uk & Monster.com
Coding Camp Breakdowns (By Continent/City)
What Front-End Coding Camp is Best (And Where)? 🌐
Once upon a time, coding was reserved for the nerds. Also known as computer geeks. But these days, everyone knows it is a major way to boost your career.
Being a software developer - or a web developer - is possible within a matter of months, if you focus and use a great course.
“Coding schools” help you to learn more rapidly, in accelerated programs. And so they’ve popped up in every corner of the world… The number of coding schools is growing at an immense rate
There aren’t enough coders to fill the demand. Coding is a skill of tomorrow. Let's have a look at some of the best coding schools around, by location.
Before we jump in:
Front-End Dev Guide - MASSIVE PRO TIP: To get the most out of your coding camp, train yourself first, for a matter of weeks or months, so that you have a strong foundation.
If you're looking for a worldwide community that has a massive price-range of training courses, General Assembly is a good option. They have locations in London and Paris. You can find full-time, very immersive programs. Find courses, workshops, and classes.
Join programmes for design, business fundamentals, data science, web development, digital marketing, and project product management. You can find full-time and part-time courses, as well as on-site campus or online courses… Lots of cutting-edge options here.
- Cost: 700-14,000 Euros
- Availability: Paris, London
This bootcamp comes very recommended. It’s rather short, at only 9-weeks, so expect a very intense curriculum. It's very popular due to how well-rated it's full stack program is. You can find it in 44 campuses, in 22 cities, in 12 countries in Europe. It's been around since 2014, with over 5,000 graduates.
They've gone on to launch over 290 startups and more than 1,300 products…Very impressive stuff. It also has specialist programmes for getting work with big companies. They have specially-tailored executive programs for advancing your digital abilities to the necessary level.
- Cost: 6,000-7,000 Euros
- Availability: Lausanne, Lisbon, London, Madrid, Milan, Oslo, Rome, Barcelona, Berlin, Brussels, Copenhagen, Amsterdam
If you are very serious about coding, then train yourself for a number of weeks or months before applying for the school. They have very good connections for getting employment in the tech industry.
You can also find a software engineering apprenticeship, plus a fellowship for those looking to become software developers. Major companies use this training program to find employees, including Tesco, British gas, Google, Monzo, and Deliveroo.
- Cost: £8,000
- Availability: London
But, you can just get in any-old-how. The curriculum is very intensive, so you must come in already well-rooted in the basics of coding.
This bootcamp has a 100% hiring-rate for all of the students. Yep ... that's really something.
The curriculum takes place in three stages: a 4-week introductory training programming in the foundations (takes place remotely), then a pre-course, followed by a 12-week or 8-week full-time bootcamp curriculum, which takes place 6-days a week, 11 hours per day. Very intensive. Don't go into this until you are ready.
- Cost: 5,300-9,800 Euros
- Availability: London, Berlin, Barcelona, New York, Toronto, Austin
Founders and Coders
Bang in the middle of London, Founders and Coders is a non-profit that does not involve traditional tuition. This is a “peer-led” coding bootcamp, where others in the community help you to learn. Peer-led learning is a way to learn coding without the big overhead costs. This course is completely free. It runs for 18 weeks.
- Cost: Free
- Availability: London
Academia de Codigo
This coding academy is based in Lisbon, Portugal. They are focused on rapidly-upskilling unemployed people currently working in jobs that have no future. Get a massive boost in pay-grade by accessing expert-teachers, with an incredibly intensive and intuitive coding bootcamp…
Codigo is alternatively known as Code for All. No matter you current work, you won’t be judged. They’re here to upskill you. This 14-week coding course includes over 650 hours of intensive coding tuition. It's available in many Portuguese cities, Which happens to be one of the cheapest countries in Europe to live.
- Cost: 6,500 Euros
- Availability: Porto, Lisbon, Fundao, Dritts
America is home to some of the best coding bootcamps on Earth. Here are a few of the the most recommended:
There are a few locations around Europe, too, though not in London. Courses are taught by a teacher in-person, and you can choose full-time or part-time courses.
Training is focused around UI/UX design and development, full stack web development, and web design. They also have a massive global network and in-house career-paths that allow graduates to find well-paid work after course-completion.
- Cost: $11,000
- Availability: Miami, Amsterdam, Madrid, Lisbon, Berlin, Barcelona, Paris
AppAcademy (also available online)
- Cost: $17,000
- Availability: Online, New York, San Francisco
Bloc (also available online)
Once again, this gives you training in full stack development. You also get a focus on front-end web development training, development for Android and iOS, as well as UX design. This is a cool option for those who want to focus on front-end web development.
None of the training is done via video tutorials. Everything is hands-on and training is one-on-one. You get to actually build your own applications, providing you a very immersive experience. You can do this course in 12 weeks, 18 or 36.
- Cost: $8,500
- Availability: Online, San Francisco
Thinkful (available online)
A very interesting option. This company is focused on getting you work once you complete the course. If you go through the school successfully, you are guaranteed to find a job placement once you graduate. They offer data science and full stack development programs.
- Cost: $9,500
- Availability: Online and LOTS of locations around the US.
Updated Resources List (To Learn More)
(Youtube channels, Free Communities, Online Courses, FUN Vids) 😊
To start with, you have a massive advantage if you figure out how to get your brain in-line, so that it’s used to working “deeply.” Have a read/listen of this book: Deep Work, by Cal Newport.
(You won’t get away with multi-tasking, when it comes to coding).
That said, here is a curated list of sources where you can learn more, from YouTube channels and free communities to online courses. Use our links for the best resources in each area - as of 2021.
Staying #up-to-date is key for being a web developer. So make sure you have your go-to, latest info-sources!
Coding News Sources (newsletters, podcasts and news sites)
- Front-End Front
- Dev Tips
- Web Platform News Weekly
- Front End Happy Hour
- UX Design Newsletter
- The Web Platform Podcast
- ShopTalk Show
- Web Tools Weekly
- Web Development Reading List
- Pony Foo Weekly
- Fresh Brewed Front-end
Top Free Front-End Communities/Resources
- front-end (spectrum)
- JS Party
- ECMAScript Daily
- Echo JS
- JAMStack Radio
- ES.next News
- React Status
Best Online Frontend Dev Courses/Books
(AppAcademy, Bloc, and Thinkful are three of the best courses for learning web development - on the planet. All offer online courses.) Also recommended:
- ES6 for everyone! by Wes Bos
- Regular expressions (Scrimba).
Best-Ever Frontend YouTube Channels
More excited about learning code watching videos? We got you covered:
Extremely high-quality materials. Start hair, if you want to learn how to code from scratch. This is the best starting point in this whole list.
Length: 1 vid.
Web Dev Beginner Tutorial
Length: 29 vids.
Find ways to make your workflow much less of a migraine. You will learn about languages like Emmett, Jade, and SASS.
Length: 12 vids.
Beginner Bootstrap Tutorial
Learning Bootstrap is very useful. This playlist gives you a beginner breakdown.
Length: 14 vids.
Another framework related to Bootstrap. If you want to understand Bootstrap better, this framework will put it into better context. Bootstrap is a very popular way for doing front-end web development. (Not the only, though).
Length: 10 vids.
This guy can give you more quality instruction in how to use Bootcamp. You get a strong idea of what is possible when you use this programming language. This will also bring up the concept of verb tables.
Length: 3 vids.
Django Web Development (Intro)
Length: 12 vids.
Length: 4 vids.
CSS Flexbox Essentials
Very useful for getting down how space optimizations work with these Technologies.
Length: 2 vids.
Front-End Example Projects
Finally, this will give you a step-by-step guide to creating a website from scratch. There's nothing like seeing the whole process from a broad vantage.
Length: 9 vids.
Front-End Dev Guide - Last Tip/Reminder: Remember to be systematic and regular in your education and practice. Really understanding this stuff gives you an edge.
Done? Well … done. Leave your comments below:
Tell us how great Alex’s beard looks.