Percy Grunwald  โ€”

Last updated:

Share this Post

what is fron end web developmentLooking 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 2020.

I wanted to keep things simple here... (When I first started, it was hard to find guides for complete n00bs.) As a last note: Beginning 2020, 1.5 billion websites were clocked, so, there’s no work-shortage for new developers... You just need training-info. No worries, ๐Ÿ‘‡ I’ve got you covered.

Skip Ahead? โญ๏ธ

  1. TL;DRs (Quick Summaries)
  2. Front-End Development Explained
  3. Front-End vs. Backend
  4. How to Become a Front-End Developer
  5. Required Front-End Dev Programming Languages/Skills
  6. Front-End Developer Interview Questions (Answers + Questions to Ask)
  7. Front-End Developer Jobs / Most Common Job Titles
  8. Coding-Camp Breakdowns (By Continent/City)
  9. Resources List (Online Courses, YouTube Channels, Fun Tools, ect)

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

You’ll mostly use Basic CSS and Basic HTML/HTML5… Maybe also JavaScript. Also needed is a good understanding of design principles (which any good training resource will teach you). Here's the complete languages breakdown.

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

Front end developers create CSS, HTML and JavaScript codes, in order to develop websites or web applications. (Works with some drag-and-drop website builders like Squarespace, using the custom code section, for maximal efficiency).

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:

Headdress Browsers ๐Ÿคฏ

These encompass things such as scraping, where you search pre-existing web pages and retrieve specific bits of information.

Example environments:

  • Zombie 
  • Slimerjs
  • Headless Chromium 
Webviews ๐Ÿ•ธ๏ธ

Which you can think of it as a tab in a web browser - and these are used for running web pages inside of applications.

Example environments:

  • 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.

Example environments:

  • React Native
  • Flutter

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.

front-end-back-end-differences

 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.

Coding Specialisms ๐ŸฅŠ

Frontend developers specialise in different coding languages to backends (though there will be crossovers). They will focus on HTML, JavaScript, and CSS. Nowadays, frontend devs are also increasingly expected to have intermediate-to-advanced level JavaScript knowledge. You may also need to get some experience with a framework - like React - and command-line tools.

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

how to become a developerDon’t worry about choosing your specialty yet. The basics are the same for pretty much any front-end speciality. 

… To get the hang of front-end web development, you need to learn HTML and CSS, as a basis. (More-and-more frontenders are expected to know some JavaScript, too). 

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.

Starting Out ๐Ÿšถ‍โ™€๏ธ

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:

  1. A curriculum ๐Ÿ“š - You can use this as your primary plan-of-attack. Step-by-step, fill it in.
  2. Mini-exercises ๐Ÿ’ช๐Ÿฟ - Coding is a problem-solving challenge. Choose specific problems that have specific solutions, to test your understanding.
  3. Project-work ๐ŸŽ›๏ธ - by the end of each chapter you will have built five projects. Once you are done, you will be certified. 
  4. 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

CSS Flexbox ๐Ÿ‘ฏ‍โ™€๏ธ

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).

CSS Grid ๐ŸŒ

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 codingPractice makes perfect. Hayloft Hue tips to start to play around with your new coding skills, learning as you go:

  1. Set up a code editor on your machine, so  you can begin to figure out how it works
  2. Set up an account with Codepen. They let you build-out projects, run tests and practice frontend development skills - in a great interface 
  3. 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.

Basic HTML ๐Ÿ–ฅ๏ธ

basic html structure

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 ๐Ÿ€:

  1. An opening tag, which sets up the beginning of your chosen element, such as italicizing, emboldening, or creating hyperlinks.
  2. 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)
  3. The content that is being manipulated by the element, which might be an image or a text -  or something else.
  4. And finally, the element itself. This describes what the opening tag, the closing tag and the content are creating when working together, e.g. a bold element. 

HTML5 ๐Ÿ’ป

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 development guide - PRO TIP:  Start with the three basic programming languages before looking at JavaScript... It will probably be a heck of a lot easier, after. ๐ŸŒŸ


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 ๐Ÿ—จ๏ธ:
  1. What is the DOM?
  2. What is a closure?
  3. What is Big O notation / why is Big O notation useful?
  4. What is REST and why is it used? 
  5. What is system design?
  6. Take us through the process of full stack implementation of an autocomplete widget.
  7. Describe what event bubbling is and how it works.
  8. How do I fix a slow website? (A top-tier VPS host may be a common fix - front end devs are responsible for things like web hosting)
  9. What frameworks are you familiar with? Also describe the benefits and drawbacks of each
  10. Why are frameworks important? Describe the kinds of problems that frameworks solve
  11. Break down how prototypal inheritance works (and how this is not the same thing as classical inheritance)
Further Tips ๐Ÿ“

These are general, “concept” questions. You will be asked many specific questions relating to CSS, HTML, JavaScript, browsers, DOMs and linked lists. You can find lots of online questions about each. (There are a ton of questions that could be asked here). 

HTML is not very used these days, so it won't be explored as much. CSS questions will be used as warm-up questions if you are a JavaScript specialist. (And it will be used in any front-end dev questions interview.)

JavaScript is really where the big-money comes in. If you can master this area, you can get very highly-paid jobs. You should have a solid understanding of how it works, before going to an interview.

Some of JavaScripts features are intuitive and easy, but others can be a little bit tricky... Get a good grasp of the trickiest concepts like undefined, scope, closure, hoisting, cache, currying, null and chaining.

Don’t forget the basics, like knowing what's a quality domain registrar

Questions YOU Should Ask ๐Ÿ“œ

questions to ask at front-end job interviewProspective 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 ๐Ÿ—จ๏ธ
  1. Why is this position being hired for?
  2. What will I be responsible for in my role?
  3. What programming languages will I be working in, day-to-day?
  4. Where exactly will I be working?
  5. How long is this contract for?
  6. What is the target-salary (as in, the range)?
  7. What is your team structure?
  8. How is work assigned?
  9. How are teams seated together?
  10. Are there isolated areas for people to work?
  11. How frequent are team meetings?
  12. How is work estimated?
  13. How is your workflow currently being managed?
  14. What time-zone does your company work inside?
  15. Who are the star role-models in your company?
  16. 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 ๐Ÿ‘‹

If you are a Front-End Developer, you have proficiency in CSS, HTML, DOM and JavaScript. You know how to turn these technologies for the process of front-end web development.

Front-End Engineer โš™๏ธ

This is also known as a javaScript developer or “full stack” 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. 

They have to use computer science principles for front-end web development purposes. If “JavaScript Application” is in the job title, this means that advanced programming and software/app development skills are also needed.

To prove that you have those skills, you would need to have a portfolio - of front-end applications you have built. 

  1. “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. 
CSS/HTML Developer ๐ŸŽจ

For this, you need to be especially skilled at CSS and HTML. (But you won't be expected to have good JavaScript and Application knowledge.)

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. ๐ŸŒŸ

Europe ๐Ÿฅฏ (Land of Bagels)

General Assembly ๐Ÿค–

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
Le Wagon ๐ŸŽก

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
Makers ๐ŸŽ…

Based in London, this very-selective computer programming bootcamp runs for 12 weeks. It teaches you the following programming languages: JavaScript and JQuery, HTML5 and CSS3, Git, Ruby on Rails, and Heroku. This really is the elite-of-the-elite…

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
Codeworks ๐Ÿงจ

Experts in JavaScript bootcamp training. These are the premium people to go for in Europe. This very intensive coding bootcamp can be found in many cities around the world, including London, New York, and Barcelona... 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.

You go to an on-site location, where you will get to grips with CSS, JavaScript, HTML, Node.JS, as well as other foundational programming languages. They also teach you entrepreneurship and project management. Those behind the Founders and Coders are also responsible for Tech for Better - a nonprofit app. 

  • 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

US ๐Ÿฉ (Land of Donuts)

America is home to some of the best coding bootcamps on Earth. Here are a few of the the most recommended:

Ironhack ๐Ÿงฒ

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)

This is where you go if you want to get full stack developer tuition. This lasts 12 weeks, in a full-time curriculum. You don't need to have previous coding experience to join this course. All learning is done via practical projects, where you build JavaScript and Ruby on Rails applications.

As you build projects, you learn what web development is, in an immersive way. If you do not get work inside of one year of course-completion, you can defer your payment for the course. Programming languages learned/skills: HTML, CSS, JavaScript, Ruby, React.js, algorithms, advanced algorithms, design principles, jQuery, SQL, UX. 

  • 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.

You work one-on-one with a mentor. And if you were not hired within 6 months as a web developer, you are refunded your tuition - in full - by Thinkful. They have loads of locations around the US, and this is also available online. Courses that are offered: engineering immersion, HTML CSS, JavaScript, NodeJS, Python, data science immersion. 

  • 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 2020. 

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)

Top Free Front-End Communities/Resources

  1. https://www.freecodecamp.org/
  2. https://frontendmasters.com/books/front-end-handbook/2019/
  3. front-end (spectrum)
  4. http://fedsonslack.com/
  5. https://skillcrush.com/blog/skills-to-become-a-front-end-developer/

JavaScript Latest News Sources, Info, Podcasts & Newsletters

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:

  1. ES6 for everyone! by Wes Bos 
  2. Regular expressions (Scrimba).
  3. JavaScript Basics Course by Beau Carnes
  4. Modern JavaScript by Beau Carnes.
  5. Object-Oriented JavaScript by NetNinja 

Best-Ever Frontend YouTube Channels

More excited about learning code watching videos? We got you covered:

LearnCode Academy ๐Ÿ’ป 

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. 

https://www.youtube.com/watch?v=pB0WvcxTbCA

Length: 1 vid.

Web Dev Beginner Tutorial #๏ธโƒฃ

Very very good, comprehensive place to begin learning web development. You won't find many better places to start. Here, you will get a look into the following programming languages: HTML, CSS, JavaScript, FTP, Bootstrap, GitHub, JQuery, Live Reload,  and more. 

https://www.youtube.com/watch?list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc&v=gQojMIhELvM

Length: 29 vids.

Front-end Workflow ๐Ÿคฝ‍โ™€๏ธ

Find ways to make your workflow much less of a migraine. You will learn about languages like Emmett, Jade, and SASS. 

https://www.youtube.com/watch?list=PLjFDgXT6JR1kYGaVPtLAl1uUZARUAVJK5&v=bo5MM2N_3tw

Length: 12 vids.

Beginner Bootstrap Tutorial ๐Ÿฅพ

Learning Bootstrap is very useful. This playlist gives you a beginner breakdown.

https://www.youtube.com/watch?list=PL6gx4Cwl9DGBPw1sFodruZUPheWVKchlM&v=qIULMnbH2-o

Length: 14 vids.

UIkit Framework ๐Ÿ—‘๏ธ

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). 

https://www.youtube.com/watch?list=PL2SfpsC7cy0gv9O7nNKyQZBrFjhi3LH-V&v=JxplDTY65oY

Length: 10 vids.

Derek Banas ๐Ÿ‘จ

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

https://www.youtube.com/watch?list=PLjFDgXT6JR1nm4sq_tH_fzXIW-_7VPL6P&v=gqOEoUR5RHg

Length: 3 vids.

Django Web Development (Intro) ๐Ÿ” 

Django is Python's web framework. You probably should not start her. Begin with HTML, CSS and JavaScript. When you are ready, you have a good idea of how Django and Ruby rails works, When it comes to creating HTML.

https://www.youtube.com/watch?list=PLQVvvaa0QuDeA05ZouE4OzDYLHY-XH-Nd&v=FNQxxpM1yOs

Length: 12 vids. 

Javascript Beginner Tutorial ๐Ÿค

There's no getting around Javascript, if you want to be the best-of-the-best. Here, you learn modular JavaScript and things related to DOM.

https://www.youtube.com/watch?list=PLoYCgNOIyGACnrXwo5HMCfOH9VT05znGv&v=fGdd9qNwQdQ

More Javascript: Understanding ‘This’ ๐Ÿ‘ˆ

‘This’ is a concept related to modular JavaScript. You may find that you need to get a grip on … well, this before you can continue with your training. 

https://www.youtube.com/watch?list=PLjFDgXT6JR1keOyG_nxTStFl7D6PQ-BFo&v=JduQUNn7L4w

Length: 4 vids.

CSS Flexbox Essentials ๐Ÿ’ƒ

Very useful for getting down how space optimizations work with these Technologies.

https://www.youtube.com/watch?v=G7EIAgfkhmg

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.

https://www.youtube.com/watch?list=PLjFDgXT6JR1llHsPSuGZlNf5w3KC5X7Nc&v=hExwnLlj2xk

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.