The problem with Frontend Mentor and other similar sites


Sorry this is late! I thought that I'd scheduled it, but when I logged in to ConvertKit today, I saw it as a draft 🤦.

Also, my video for this week ended up having a big issue and I wanted to put out something quick so I've used this newsletter as a script for my Wednesday video... so when it comes out, it might look familiar 🙂.


Hello Reader,

One of the hardest things to do as a student, hobbyist, or beginner, is figuring out what to build next.

I love websites like Frontend Mentor and iCodeThis for helping people, especially beginners, get past that block.

The problem is, you probably don’t want a bunch of Frontend Mentor projects in your portfolio, because everyone else is also doing those.

Take them to the next level

One option is to take these to the next level.

Even if you take a relatively simple challenge on Frontend Mentor, you can level that up quite a lot.

For example, with the one I linked to there, you could:

  • Add a dropdown menu that allows for different color themes.
  • Make the color themes more dynamic by adding a color picker to the page, to allow the user to update the accent color.
  • Create multiple versions of the card that account for different situations, like having no image at the top, multiple tags, and how it might handle long titles or descriptions.
  • Create a form that you could fill out, and then add new cards that are populated by the form data.

And that’s just a few ideas of what you can do with a very simple challenge!

Just remember, if you’re going to put a free challenge you found online in your portfolio, anyone reviewing your portfolio has seen the exact same thing thousands of times.

Those challenges are great for getting in practice of building out things based on a design, but don’t limit yourself to the scope of the challenge.

Use them for inspiration

If you start pushing those types of challenges and building more on top of them, you’ll start learning a lot more, both in terms of technical skill, but you’ll also get to flex your creative muscles in thinking outside of the box/scope of the project.

That alone can lead to you creating something pretty cool that you want to show off, or better yet, it might even inspire you to build out something else that’s a more complete project, and that’s not based on a challenge a lot of people have already completed.

And if you struggle to come up with ideas for personal projects that are more than a standard to-do app, I’ll be talking more about those next week 🙂.

📊 Poll results

In my last email, I asked people how they'd rate their CSS skills, and over 51% of people voted for intermediate.

I was expecting the results to be a little more even than that, with the beginner and advanced getting ~20% and ~25% respectively, with the rest going to just starting to learn it.

🙋‍♂️ What I’ve been up to this week

No, Flexbox isn’t “good enough”

video preview

You might have noticed I’ve had a lot of Flexbox and Grid content lately, and this will be the last of it for a little while 😅.

The reason I made this video is because in all of those other videos, when I’d mention using Grid over Flexbox for certain layouts, in the comments and on social media I’d get enough “eh, Flexbox is good enough for everything” comments.

They annoyed me enough that I had to make a video about it!

I also still get comments from people telling me that they avoid Grid because of browser support, so I also bring that up near the end too, because I have a feeling a lot of people avoiding Grid are using gap with Flexbox, and other common features that have worse support than Grid.

An easy fix for an annoying CSS transition issue

video preview

If you’ve ever transitioned the scale of an element and run into z-index issues, where the element will jump back behind other elements, I look at a very easy fix for it in this video.

🏁

Have a fantastic week!
Kevin


Are you looking to step up your CSS? I've got both free and premium courses to help with that! They cover a range of skill levels too 👇

Beginner friendly (and free)

Conquering Responsive Layout

A free course to help you approach responsive layouts with the right mindset.

Enroll →

Intermediate

CSS Demystified

For those who've been writing CSS for a little bit now, but want to step up their game and start writing CSS with confidence!

Enroll →

Advanced

Beyond CSS

An advanced course that dives into project architecture, theming, design systems, and more.

Enroll →

Unsubscribe · Preferences
113 Cherry St #92768, Seattle, WA 98104-2205

Hi! I'm Kevin

Weekly newsletter, where I talk about tangentially-related front-end development topics and share what I've been up to in the last week, plus any cool/fun/interesting/useful links I come across as well.

Read more from Hi! I'm Kevin

View this email in your browser (or share it with a friend!) The State of HTML survey is now opened! Hello Reader, This week, we’re taking a break from the shorter summer versions of the newsletter. We’ll be back to the shorter summer version next week. Last week I asked about whether or not you use em units… and I do apologize for the survey being closed for a lot of you, I hit my limit much faster than I’d anticipated, and probably should have just used a simple Google form for that one…...

View this email in your browser (or share it with a friend!) Hello Reader, The summer edition of this newsletter is in full force, meaning it’s much shorter than normal. If you’d like to pause receiving this newsletter until they return to normal (sometime around mid-August), you can click here to update your preferences. Also, a big thank you to everyone who answered my survey on using em units, and sorry if it was closed when you submitted it, I hit my limits much faster than I'd...

View this email in your browser (or share it with a friend!) Hello Reader, 💭 General musings Quick one this week as I’m enjoying some time with my family. 🙋♂️ What I’ve been up to this week :has() is more than a parent selector The :has() selector is the selector that keeps on giving, and in this video I explore some of the creative ways we can use it to select elements that come before other elements, all the siblings of an element, and when an element contains a specific number of children,...