Tutorial hell is a problem you may run into when starting to learn HTML and CSS. Drowning in a sea of tutorials can put you off and potentially hinder your web development progress. The easiest way to overcome it is to engage in practical application and project development based on anything you learn.
The websites on this list offer real-world HTML and CSS projects. They provide design templates, source code, and assets to build projects using HTML and CSS.
1.Codewell
Codewell offers a range of challenges designed to help you practice and enhance your skills in HTML, CSS, JavaScript, and responsive web design. These challenges have two categories: free and premium.
Under the free option, you gain access to starter files containing assets, a Readme file containing information about the challenge, and PNG design files for desktop, tablet, and mobile view. Opting for the premium membership extends your benefits, including all the features of the free tier, as well as an additional Figma template.
When you complete the challenge and submit your solution, you can receive feedback on the website. To submit a solution, you’ll need to provide a link to its GitHub repo and live preview.Creating a GitHub repositoryand hosting your solution on GitHub pages are additional, valuable skills. You can also see solutions that other people have submitted.
Some challenges on Codewell include landing pages, sign-up pages, and dashboards. These are all beginner-friendly projects.
2.devChallenges
devChallenges helps you learn coding by practicing while preparing you for a day in life as a developer. It offers an array of challenges related to real-world projects open to beginners and experienced developers.
There are free and paid plans you’re able to choose from. The paid plan includes pro and premium. Using the free option, you get access to the basic features and some challenges. The latter option gives you perks like access to premium challenges, Figma design, and a challenge spacing guide.
The platform groups challenges into paths, each targeting different skills like HTML and CSS, with varying difficulty levels. Once you’ve completed the challenges in one path, you’ll get a certificate to include in your portfolio.
devChallenges has an editor page where you may view the specifics of the challenge including fonts, colors, viewport images, grid display, and assets downloads. The downloaded file only contains images you’ll need.
There’s also a leaderboard, so you may get competitive while you practice. The platform promotes community engagement, encouraging you to share your solutions. It offers assistance, and you can learn from other users through the solutions section.
Like Codewell, you’ll need to provide a link to your demo and repository to submit your solutions. The interface is friendly, so you’ll have no problem navigating it.
3.Frontend Mentor
Frontend Mentor stands out as the most popular choice among the platforms in this list, thanks to its many perks. It sets itself apart by offering a rich selection of front-end challenges paired with professional web designs. The platform also fosters a vibrant and supportive community of web developers.
Like other platforms, Frontend Mentor has both free and paid options. With the free version, you’ll have access to basic features and the majority of challenges, while the paid version gives you access to premium challenges, Figma design files, and more.
The challenges fall under three main groups including type, difficulty, and languages. Under languages, you can access challenges that only require HTML and CSS to complete.
Each challenge grants access to a starter file containing a wealth of resources, including HTML source code, a Readme file, a style guide, desktop and mobile layout images, and more. When submitting your solution, you’ll have the option to include questions for the community. Notably, you’re able to view other people’s solutions only after you’ve submitted your own.
Frontend Mentor uses a point system to encourage you to complete challenges. You can add all your finished projects to aportfolio to position yourself for job opportunities.
What truly sets Frontend Mentor apart is its resources page, which holds over 15 branches of web development materials. Each features a curated list of resources that you can choose from, so you can learn all you’ll ever need to practice.
Finally, Frontend Mentor drops challenges twice a month, meaning there’ll always be something to work on.
4.Frontend Practice
Frontend Practice differs from the other platforms in several ways. Firstly, it does not feature challenges; instead, it offers projects. These projects are real websites belonging to real companies that you’ll be recreating. You don’t need an account to attempt these projects, either.
To begin, there is no source code provided. Instead, the project description contains external links for photo assets and icons, a link to the live site, a reference image, color palettes, and a curated list of resources you’ll need to complete the project. Additionally, you receive a list of concepts you’ll learn through project completion and difficulty pointers you can use.
The platform offers a three-level difficulty tier but, as a beginner, your primary focus will be on level one. Here, you may practice HTML, CSS, responsiveness, animation, and more. Furthermore, you have permission to include the projects in your portfolio, provided you adhere to a single rule stated on the website.
Frontend Practice is an excellent choice if you want to enhance your skills by recreating existing websites, starting from scratch to practice your HTML skills.
All of these platforms combined will give you enough content to use whencreating your developer portfolio. While you practice, you’ll be able to make improvements and understand new concepts, boosting your confidence and helping you tackle tutorial hell.
Honing Your HTML and CSS Skills Through Practice
Tutorial hell will be a challenge, but you can overcome it with practice. The possibilities are truly endless, and it all begins with taking that first step. By taking on crafted challenges and real-world projects, you’ll be using your HTML and CSS knowledge and adding to it.
Regardless of the path you choose, you’re embarking on a journey of growth and development, enhancing your skills and boosting your confidence along the way, embrace the hands-on approach, create, learn, and flourish
