The best way to improve front-end development skills? That's practice! Building a website hands-on is the most effective way to learn. It would be better if you can get paid for it; even building a website for yourself or your family and friends can significantly improve your skills. Even creating projects just for practice can allow you to grow quickly, which is definitely much more effective than simply reading materials!

Here are some resources that encourage you to improve your skills by building projects:

Frontend Mentor

This platform has only been launched recently and is also the inspiration for the writing of this article. Providing front-end projects for developers is a successful business model in itself! Some projects are free, some projects are charged.

HackerRank

Many companies also build their businesses around a similar model. HackerRank focuses mainly on job hunting and has clear goals, but the skills tests (challenges) it provides can not only evaluate your abilities, but also a valuable learning resource.

Similar platforms include: Codewars, ChallengeRocket, Codesignal, and Topcoder (VCs must like this model very much).

Coderbyte

Coderbyte also offers paid plans designed to improve your interview skills through challenge questions.

Typical scenarios: Sometimes the website is a product, and you are a customer; sometimes the recruitment company is a customer, and you are a product.

Try to reproduce Dribbble's work

Classic Method: Find your favorite piece on Dribbble and try to reproduce it. @keyframers do this often. Tim Evko's practice site used to randomly select Dribbble works (as well as GitHub issues and coding challenges) for you, but the Dribbble section seems to be out of service and other features are still available!

Matt Delac has done similar exercises in the past. Indrek Lasn also shared similar articles on Medium.

Front-End Challenges Club

Andy Bell has run the Front-End Challenges Club, and although it is currently on hold, you can still view its archives.

CodePen Challenges

CodePen launches challenges every week, offering themes (as well as ideas and resources) that you can play freely. A relaxing and pleasant challenge.

100 Days of CSS Challenge

Matthias Martin created a 100-day CSS challenge. All challenges and entries are publicly visible – of course, the point is to try and complete the challenge yourself.

Daily UI

Daily UI Challenge provides a new challenge every day (free). Many people use code to complete these challenges.

Frontloops

Frontloops offers 30 challenges for $19, including information, suggestions, material and solutions.

CSSBattle

If you like to mimic designs with as little code as possible, then CSSBattle will be perfect for you.

Writing programs with as concise code as possible is often called "code golf" and there are also specialized challenge websites.

Ace Front End

The challenges Ace Front End offers focus on native HTML, CSS, and JavaScript.

I noticed that the first challenge was to drop down the navigation menu, but it didn't handle the aria-expanded property. I'm not sure how problematic this is, nor is it a criticism of Ace Front End - it's just a reminder that any challenge can be problematic. But that doesn't mean you can't learn from it.

Codier

Codier offers open challenges, including solutions published by other users.

rendezvous with cassidoo

Cassidy’s weekly newsletter includes a challenge in each issue.

Rina Diane Caballar quotes Tim Carry in "Extending the Limits of CSS":

Carry recommends starting with real-world objects—such as the interface of a game console or a calculator—and trying to reproduce it using CSS only. “A good way to push boundaries in a language is to create something that this language shouldn’t have done,” he said.

The above is the detailed content of Front-End Challenges. For more information, please follow other related articles on the PHP Chinese website!