Bobate Olusegun

Posted on Jul 17, 2022 • Edited on Nov 12, 2022

Scaling up your skill and escaping Tutorial Hell as a Frontend Developer.

#javascript #beginners #frontend #webdev

If you are looking for some great tools and resources to enhance your front-end skills, read on for free websites, YouTube channels, and other resources that will help you become a better front-end developer.

Getting your path around front-end development with the tons of resources out there can be ‌a daunting task. Most people get stuck in a state called “Tutorial Hell”, which occurs when you’re excellently following along in a tutorial, but everything goes wrong when you tend to build your application from what you learned in the tutorial.

What is Tutorial Hell?

Tutorial Hell is a state where most beginners keep watching tutorial videos, reading several books and articles, feeling they are making progress in their development journey, but in the actual sense, they are static (no actual progress recorded).

Fortunately, there are two major ways to escape tutorial hell. These are:

By learning and understanding the basics of the needed concepts for the technology you learning, in this case, front-end web technologies (HTML, CSS, and JavaScript).
Practice what you are learning by building projects on your own.

Top resources for learning and understanding the basics of the front-end web technologies

Plenty of good front-end development learning resources are out there, but choosing the best and the ones that resonate with you from all the many options could sometimes be ‌daunting.

I’ve compiled a list of some of the best front-end development learning resources based on the following criteria:

The number of downloads and reviews.
How beginner-friendly is it?
Cost (paltry amount or free).

Note that it is perfectly okay and even recommended that you use over one resource to learn software development. That’s why I have divided the learning resources into three categories: Bootcamp, Websites, and YouTube.

You don’t necessarily need to use all the resources I have mentioned in this post in other not to get caught up in tutorial hell, I suggest you check through and select the one(s) that best suit your learning preferences.

Bootcamps - a complete tutorial guide to a particular technology.

The Complete Web Developer Zero to Mastery - learn to code and become a web developer using HTML, CSS, and JavaScript.
Modern HTML and CSS from the Beginning (including Sass) - learn how to build responsive websites and UIs with HTML5, CSS3 & Sass also get better at CSS Flex and Grid.
Modern JavaScript from Novice to Ninja - learn modern JavaScript from the very start (beginners) to ninja-level (expert) by building exceptional JavaScript applications.
Build your first Web Pages with HTML and CSS - become an HTML and CSS master as an absolute beginner.

Websites - platforms you can fall back on to quickly learn a concept.

Front-end web developer - MDN - learn all about Front-end development, HTML CSS JavaScript HTTPS Web APIs Web Technologies.
Front-end web developer - W3schools- learn about the dos and don'ts of Front-end development and the right way to get started.
Freecodecamp responsive web design- learn and understand the languages developers use to build web pages.
Scrimba - Frontend Development- learn about front-end development from HTML through front-end frameworks.
Learn Frontend Development Codecademy- learn beyond the necessary languages needed for front-end development and how to think like a front-end engineer.
Frontend Masters- As the name explains, this website helps developers master advanced concepts, and the fun part is that very experienced developers working in the big tech firms teach the courses.

YouTube Channels - the hub of a series of tutorial videos to learn and build-out projects.

I strongly believe that you could pick one resource listed above and get to understand the basics of the web technologies used for front-end development.

With that said, the next step is putting your gained knowledge to the test by building projects of varying complexities.

Knowledge gained and not put to the test is much like the knowledge that hasn’t been gained.

The top resources for generating designs and ideas for front-end development projects

If you’re thinking of developing a front-end project from scratch all by yourself, you must take into account the effort and time it will take you to come up with an impressive design. Thus, properly structured resources are a great help to guide you on your designs.

In no particular order, I have picked out some of the most useful resources that can help you get started with building exceptional front-end designs that would help your growth as a front-end developer.

Let the ideas ‌percolate…

Codewell.cc

Codewell.cc is one of the best platforms out there for enhancing your frontend skills. It is simple to use and very efficient in getting real design templates to practice your HTML and CSS skills. Codewell is a challenge-based platform that provides a series of technical challenges for practising HTML and CSS.

The challenges on this platform are free or premium. The free challenges are available to everyone who signs up on the platform, while the ones tagged premium are only available to those who subscribe to the pro version.

For the free challenges, you get access to the assets (icons, images) for that project, the README.md file, and the PNG design files for desktop, tablet, and mobile. The prosubscription, however, comes with an additional Figma file.

There is a community on slack that helps you to solve your impediments. In case you encounter any issues, while working on a challenge, ‌share it on slack and you will have people willing to help.

DevChallenges

DevChallenges is another great website to scale up your frontend skills. To get started on this resource, you just have to carry out the following three steps and you are ready:

Navigate to the challenge paths, choose a challenge, and read the description of the challenge.
Swing into action by working on the projects either by yourself or with friends. After all, teamwork is what the work mode practice in the real world.
Completing the challenge and submitting your solution. If you complete all the challenges in a path, you will earn a certificate for it.

Within the context of this article, the challenge paths required are the Responsive Web Developer and the Front-end Developer. For each challenge chosen, you get a Figma file for the design and other resources needed to build out the project.

If you encounter any difficulty building a project and no one can help, all you need to do is navigate to the solution tab within the ‌challenge page and you get access to the source code of those who have submitted their solution to that project you are working on.

FrontendPractice

Front-end Practice is a great initiative created by Kyle Shook. The sole aim of this resource is to help frontend developers test their skills by creating a carefully curated list of web pages they can recreate.

This resource is really helpful because of its real-world application and use cases. Completing these challenges will make you more comfortable with your skills as a front-end developer.

After you sign in, navigate to the projects section and choose the website you wish to recreate. Kyle Shook went further to assist anyone who wants to take part in recreating any of the websites by providing resources that could assist you on a particular challenge, colors to use, and what you will learn to build the site.

FrontendMentor

Front-end Mentor is the platform I regard as the haven of projects to practice front-end development. This website is like codewell in terms of the structure of the challenge interfaces and tags of challenges as either free or premium.

It also tags every challenge with its corresponding level of difficulty. With this, you can easily navigate and choose the challenge that suits you according to the level of your experience or expertise.

After signing up on the website, navigate to the challenges section, then select the project you would like to work on and download the starter files. The platform provides you with assets (all the images you need for building out a project) and other resources like a Read.MD file to guide you on what is expected for a project.

You can also join the slack community where you can interact with other prominent developers and share ideas.

!00DaysCSS

As a frontend developer, you should know how important CSS is for every user interface created. Without CSS, websites will just be plain text with functionality (because of JavaScript) but it won’t be attractive. This led Matthias Martin to develop a 100-day of CSS practice challenge.

As illustrated in the snapshot above, you get a CSS challenge for 100 consecutive days. All you need to do is follow the provided template, and recreate the example by being creative (you can decide to change properties like color, font size, and other CSS properties).

To take part in this challenge-based learning, you must create a codepen account because that’s the platform needed to code out the challenge. Submit a link to your code on codepen for each challenge by copying and pasting it into the input field created for each challenge.

Acefrontend

Acefrontend, as the word implies, is a platform created to help frontend developers prepare for job interviews. The creator of this website being an interviewer at silicon valley has noticed how frontend developers fail their interviews due to minor mistakes. Therefore, Acefrontend was created. A platform where you practice minor projects, you might be asked to code out during an interview since some developers become rusty after a period.

Choose a challenge from the challenges page, click on it and start coding it out. If you get stuck during the challenge, you can request a hint or reveal the solution.

CSS Battle

CSSBattle with over 14000+ players is the first-ever code-golfing (code golf is a type of recreational computer programming competition where participants strive to achieve the shortest possible source code that solves a certain problem.) platform created by Kushagra Agarwal and Kushagra Gour.

This is a CSS gaming platform where you are presented with an image target you need to replicate using CSS and slight HTML.

Here is an example of an image target screen:

The secret to topping the leaderboard is by using fewer bytes to complete a challenge and a more visual match (i.e, the closer your solution is to the image target given).

FreeCodeCamp Challenge

FreeCodeCamp responsive web design projects are projects selected by FreeCodeCamp to help learners put their newly gained knowledge from the FreeCodeCamp Responsive Web Design Course to test. In this section, they provide you with five web programming projects ‌you should solve to learn the Responsive Web Design Certification.

To take part, you need an online editor because you will have to submit the link to your project for FreeCodeCamp to examine it.

Follow the instructions given for each project and build all five projects so you can earn yourself the certificate.

First Timers

Having an open-source project or contributing to an open-source project is one thing that attracts recruiters on a resume. But the question is, how does one get to contribute to an open-source project? This can be a daunting task.

First Timers is a hub of open-source resources that helps you with a curated list of resources to get started with open-source. These resources bridge the gap between those who have created projects and made them open-source with those willing to contribute as little as a line of code to make the project more efficient.

In addition, some other great resources to check out are:

Conclusion

Being an expert at what you do is a very important thing for anyone regardless of the profession. As a front-end developer, there are a lot of resources on the web to become an expert in this field.

Here, I picked out the best resources for you to get started with. There are lots of benefits attached to using these resources to understand concepts of front-end technologies, optimization of codes, and deployment of projects.