Getting Started in Front-End Web Development

With content creation tools like WordPress and Squarespace anyone can start a website or blog for little to no cost, but it takes a true coding professional to craft a beautiful blog, or a heavily customized website to represent a business.

I got into coding in my mid-thirties after years of procrastination. I had always been interested in blogging and designing websites, but I looked at the source code of even a basic website and was thoroughly overwhelmed. Javascript and CSS were everywhere and my basic HTML skills left me feeling totally inadequate. I was missing two things : confidence and a good teacher. After much some hands on learning, and lots of trial and error I built my fledgling front-end development skills and gained the confidence needed to launch my own business as a freelance web developer. You’ll be surprised by how quickly you can go from knowing no code to landing your first client.

Your Web Developer Roadmap

Front-end developer is the term for a web developer who focuses on code which is run by the web browser.  What helped me get started was the front-end developer roadmap below, which was created by Kamran Ahmed. When I first saw this roadmap I was completely overwhelmed by the sheer number of languages out there, but I started with the basics and quickly discovered that HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets)  are the true fundamentals and these skills alone allowed me to create beautiful websites, and served as a foundation for learning the more advanced stuff like Javascript and SASS.

Front-End Web Development Roadmap

Getting Started

Learn HTML, CSS, SASS and Javascript

I’ve posted before about Free & Premium web development courses, but below is a learning path that I know works because it worked for me, and it can be done incredibly cheaply.

Jonas Schmedtmann is creator of CodingHeroes  and he offers the three classes below through Udemy. While each of the courses below lists for $195 dollars I timed my purchases appropriately and bought them on sale for no more than $20 each. Udemy runs huge discount sales all the time, so while I believe the courses are worth full price I definitely recommend waiting for a deal (note : these are not affiliate links –  I’m recommending them because I truly believe in the program).

I took these self-study classes in my spare time and I can’t say enough good things about them. Jonas is an engaging instructor and you’ll code side by side with him while he walks you through HTML, CSS, and later Javascript. You’ll build beautiful websites that you can put in your portfolio right away. When I was stuck on a particularly tricky piece of code I would just pop over into the Q&A and see if anyone else had run into my problem.

If you’re serious about learning to code and you have minimal money to invest in web design classes my personal recommendation is to take all three of the courses below, in the order they’re listed below. There are many other excellent web development courses available on Udemy, but these are by far the best.

  1. Build Responsive Real World Websites with HTML5 and CSS
    What you’ll learn:

    • Easy-to-follow and hands-on web development with HTML5, CSS3 and some jQuery.
    • The proven 7 real-world steps from complete scratch to a fully functional and optimized website.
    • Simple-to-use web design guidelines and tips to make your website stand out from the crowd.
    • How to get and use images, fonts and icons to make your website shine — all for free.
    • Responsive web design: learn how to create websites that work beautifully on all screen sizes.
    • How to use jQuery for super cool effects like animations, scroll effects and “sticky” navigation.
    • How to optimize your website for good speed performance and for search engines (SEO).
    • How to launch your website for the world to see it.
  2. Advanced CSS and Sass: Take Your CSS to the Next Level! 
    what you’ll learn:

    • The most modern and advanced CSS properties and techniques;
    • Master the cutting-edge layout technologies Flexbox and CSS Grid;
    • Build responsive layouts for all kind of devices and situations;
    • How CSS works behind the scenes;
    • Architect large CSS codebases for reusability and maintainability using Sass.
  3. The Complete JavaScript Course
    what you’ll learn:

    • All the JavaScript and programming fundamentals: things like variables, data types, boolean logic, if/else statements, loops, functions, objects, arrays, and more.
    • Everything you need to know in order to gain a deep understanding of how JavaScript works behind the scenes: execution contexts, hoisting, scoping, the ‘this’ keyword, and more.
    • How to make JavaScript code interact with webpages: DOM manipulation. Learn how to select and change webpage elements, create new elements and handle DOM events.
    • Complex JavaScript features such as function constructors, prototypal inheritance, first-class functions, closures, the bind and apply methods, and more.
    • We are going to code two beautiful real-world apps to apply our knowledge and learn new concepts (I provide the starter HTML and CSS code for these projects).
    • Learn how to organize and structure your code using modules and functions, how to create data privacy and encapsulation, and why that’s so important.
    • What’s new in the most modern version of JavaScript: new features of ES6 / ES2015.

Gain experience while Learning

While you’re learning to code many experts suggest that you jump right into the industry to gain experience. Below are two free guides chock full of tips that’ll help you go from simply learning the business to actively earning an income in the industry. Take some of their promises with a grain of salt, but these are excellent resources for the newbie front-end designer.

Code your way to 1K: This free guide from Skillcrush provides you with a three part process to follow while learning to code so that you can maximize your ability to make money. They’ll help you find your first client, design a package, and price your work appropriately.

How to early $10,000 while learning to code: This free 77-page guide from Rob Percival walks you through how to rebrand yourself, get experience for your portfolio, bid on gigs, and find a profitable niche in the industry.