Getting into Frontend

Photo by Trent Erwin on Unsplash

Getting into Frontend

Dreams need commitment to become reality

When I started my Web Development journey, I knew I wanted to go the self-taught route. I like being able to learn on my own, solve problems and have that spark or eureka moment.

I planned my curriculum with free courses from freeCodeCamp, sololearn, web development books, MDN and related documentation and videos on Youtube that go deep into topics one needs to visualize(like Git).

I'm still learning, currently grazing through React at the moment. My self-taught route is as follows -

  1. Roadmap

  2. Courses

  3. Being Productive

  4. Mini-Projects

  5. Revision

Let's go through each of these points.

ROADMAP

A lot of people have different takes on what to learn first and although everyone is different I do believe the best roadmap to take would be from the grassroots, HTML, CSS and JavaScript. This path blends well together as learning each after the other makes the former more accessible in very interesting ways.

A basic roadmap outlined on Roadmap.sh for front-end development is a good start.

Tutorial-Pic

Don't be intimidated, this will all become easier with time, I promise.

As the roadmap above shows, the fundamentals are HTML, CSS and JavaScript. The rest are either derivatives, preprocessors, superscripts of these or ways of writing them for a unique purpose.

Now you'll need to follow a curriculum.

I followed the freeCodeCamps curriculum.

I'm currently at the Frontend Development Libraries Certification course after completing the Responsive Web Design Certification and JavaScript Algorithms and Data Structures Course.

One thing to note is to take things, one at a time and learn what you need to be productive.

If you're learning HTML, learn how to structure your content semantically, for CSS, you'll get to learn the display level of the elements you use and how to use the Box model to style your content to whatever design you desire.

Courses

A lot of courses exist for free on the internet that teaches one web development and there is no shortage of written, visual and audio content to consume and learn, but one needs to be careful.

There is what is known as "tutorial hell" or what I'll call the forever student.

Tutorial hell is when you can sit and consume as much content as you like and then when it comes time to start your own project you don't know what to do, you are mentally frozen and cannot even start anything productive.

Naturally, this is not what should be your desired outcome. I'll outline the ways to avoid this problem before listing any courses.

  1. Be active.

  2. Fail, test and break things.

  3. Write and read.

  4. Try out new things.

  5. Seek more things to learn.

Lets go through each of them.

Be active

Sounds cliche but it is true. Don't be the silent observer watching 8-hour, 4-hour, or 12-hour tutorials and thinking you're absorbing knowledge because that may not be the case.

You see, the human mind learns in a whole lot of ways, not just reading and watching but what's more important to note is that your mind doesn't like holding onto things it sees as not important for too long.

This is why being an observer is unproductive. Your mind won't learn what you don't find relevant enough to practice and instead would be overwhelmed by all the content you consume.

Fail, test and break things

You are better off failing to print out "hello world", googling your errors and finding out why your console command did not work than getting it correctly and not knowing anything beyond the fact that it works.

Take the time to go out on your own, try new things and write down your ideas. This approach makes you a practical developer as you don't need a tutorial before figuring things out.

Write and read

The fact that you're committing your learning to writing will make things stick easier and as a bonus, you have a reference to go to instead of going to the internet to understand something(nothing bad in googling things but you'll understand better if you saw the answer in your writing).

Try out new things

This reminds me of the time I watched a tutorial on why background and background-color are not the same and there was no explanation as to why.

Don't consume content without going further, look for official sources, read more on things and find different ways of doing things.

Seek more things to learn

This is where you try out different sources, MDN, freeCodeCamp, sololearn, books, youtube etc.

Here are a few courses I believe are beginner friendly for web development.

  1. Angela Yu

  2. Andrei Neagoie

  3. Andy Vickler

We're keeping it simple here, just 3 sources that are great for beginners and will get your feet wet and up and running when it comes to web development.

Angela Yu's 2022-2023 Web Development Bootcamp

Angela Yu's course on Udemy is a great starting point for anyone looking to try out web development, asides from her teaching, she coaches you through the thought process of how to think like a developer. The course is fun and will open up one's mind to thinking about a career in web development.

Andrei Neagoies' The Complete Web Developer in 2023: Zero to Mastery

Andrei teaches well and simply walks you through complicated concepts so you can understand them, he is great for getting into technical aspects of programming and has a good intro to JavaScript.

Andy Vicklers' Web Development: 3 books in 1

This book, by Andy Vickler, is a great foundation for web development, a lot of concepts are explained well.

Being productive

With the resources above, one then needs to be productive. This is by getting an IDE(Integrated Development Environment), installing extensions to take out writing boiler-plate code(repetitive code) and starting mini-projects based on the things you've learned so far.

This could be a word-guessing game. A random number generator. A love statistics program etc.

Make sure you are doing something that ties what you've learned together.

Mini-projects

Going more into the projects to do, the general idea of mini-projects is for you to be up and running with whatever technology you've learned, if you learned jQuery, try complex DOM manipulation, animations, calculators etc with jQuery.

These projects as long as they aren't a part of your main portfolio shouldn't be too time-consuming unless you're building something to show to an employer.

Revision

This last point will keep your skills sharp. Revision is what sets you apart from a hobbyist, this I believe is what also makes you job ready. You need to go back to previous concepts you learned and try to think about them in a whole new light.

Here's a programming question I had when I was first learning JavaScript.

If variable a, is 3 and variable b is 2, change the values so they have the opposite values. Naturally, this is easily solved by initializing a third variable c and using it as a container. As I learned more, I got to know this could be solved with destructing as well.

You will always learn new things and the whole process will get easier, no matter how complicated what you're doing is, learn to break things down and look at things from the fundamentals.