This is a fun front-end challenge for beginners to try (using React)

you don't need to use react, you can try vanilla js, the challenge is more about the html and css anyway.
💬 Discord / discord
🔔 Newsletter newsletter.webdevcody.com/
📁 GitHub github.com/webdevcody
📺 Twitch / webdevcody
🤖 Website webdevcody.com
🐦 Twitter / webdevcody

[@fakhrulradzi8536]

More frontend mentor challenges please! Love watching how other people solve the challenge.

[@Callumkloos]

Really glad I found this channel recently, keep up the great work. Beginner friendly content like this is the perfect level for me right now :)

[@iamtharunraj]

It was really interesting to see how others break down and solve a challenge. Expecting more of these videos from you!

[@franinja080]

This channel has been great lately, good job!

[@WebDevCody]

Glad you enjoy it!

[@Ayoubased]

beautiful, hope you do more of these videos where you are going through everything, the longer the better. ty

[@ichiroutakashima4503]

Agree with the majority of the comments here. This actually is one of my first challenges and this honestly give me more pain that Front-End Mentor's Accordion FAQ challenge. Love that you're using React on this video. This honestly gave me an idea that I should refactor all my challenges using React so I could practice my skills. So, thanks for that.

[@mamoutif1573]

I can't believe this, I literally just finished the challenge after so much struggle and here I see you upload a video about it. Such a coincidence.

[@WebDevCody]

coincidence? I think not

[@shakapaker]

Nice video! Enjoyed watching :) Really interesting how others solve such challenges and I want more challenges from front-end mentor, pretty awesome platform

[@bugamarian]

This is so good! Please do more! ❤

[@amershboul9107]

Finally challenge series is back! keep going with more challenging things

[@WebDevCody]

I’ll make some more

[@eren1514]

This kind of videos really good. Even it is for beginners, I watch it like it is a Netflix movie :D A series from Frontend challenge web would be good to see

[@WebDevCody]

I might do more of these, it was fun!

[@haze4828]

Frontend Mentor is really cool, I've done quite a few of the challenges (mainly the easier ones 😅) But it's such fantastic way to practice frontend skills and there are so many free challenges

[@WebDevCody]

I agree it has good stuff that you'd see on a real application you might need to build

[@xbsidesx]

Great stuff! The only thing, I think it’s weird to name the event functions in the past since when you trigger them they don’t do the action itself (hi preventDefault). I would call it just handleSubmit. Besides that, loved to see how you think and how you teach. Thanks!

[@TheSourLemonz]

nice brodie, u should do more of these challenges like you used to

[@VKD007]

It was fun seeing you doing something which you don't do on daily basis . Due to less time you made it verbose which one will do in a live coding challenge . Realistic

[@krismatic_]

This is seriously good content.

[@ChrisHenke]

Great video! I think instead of buttons you could've used a radio buttons and styled the label. You could then style the checked + label selector instead of having to create a function to add an active class.

[@WebDevCody]

yeah that's a good idea

[@yongfengye]

it's one way if this is just for show ，but if you need to know what to choose later, you still need to add variables

[@SeibertSwirl]

Good job babe!!!!

[@ocarrott8664]

Looks pretty good, one thing you missed though is that :focussed won't accurately display the selected rating. Instead you would do something with checking if the idx (+ 1) of the map aligns with the selected rating.

[@WebDevCody]

good catch, yeah I totally forgot to dynamically add a .active class on the button you click. I just jumped ahead to the next panel without making sure I had everything covered.

[@tedjenkler604]

This was very good to look after doing the projekt, took me 2.5 h and for u 30 mins tho but prob wasted an hour fixing props and states, Colorpicker was a good trick also

[@ludanjubara]

More advanced challenges would be welcome :)

[@rdefazio]

Great video! I noticed you use an extension that provides additional information while you're coding. Is that Quokka, or something else?

[@MrStresnes]

Great video. Thanks for the content. One thing, I guess you forgot to pass the "key" at the array button at 19:10.

[@parkersmith7522]

Love this. The question about combining classes from modules you can use “cx” from classnames and can combine multiple classes and can conditionally add them :)

[@WebDevCody]

nice thanks for pointing that out for me!

[@ludanjubara]

One simple way of doing it is through template literals like this: className={`${styles.foo} ${styles.otherFoo}`} or if you want conditional class you could do className={`${styles.foo} ${isTrue && styles.otherFoo}`} hope it helps.. I use it all the time 👍

[@nawazpasha3904]

Keep creating 👍, can you make some video on open ai apis some cool project

[@rand0mtv660]

No need to import vars css file if that css variable is defined globally. You first made a mistake of putting two colons when defining root in your css module file and later when moving color variable to root block you used a single hyphen instead of double hyphen. But overall nice to see the thought process when working on something.

[@WebDevCody]

Ahh nice catch

[@StrikerFeed]

what extension for icons in your sidebar are you using?

[@r4rbit]

Nice video, what's your theme and icon pack? Looks really good

[@WebDevCody]

Bearded theme stained blue

[@mordredee213]

Great content!!! Btw what is your vscode font? Your vscode fonts seems different from me.

[@WebDevCody]

I use the default font, probably whatever mac provides

[@mordredee213]

@@WebDevCody I actually get it now. I am using window lol.

[@flemingCT]

This is fantastic. How are you switching so effortlessly between vs code & chrome? thanks

[@WebDevCody]

Mac workspaces three finger swipe

[@poloiaish6281]

Hey bro. I really love these kinds of videos. I know this may be a newbie question but, it seems like you have too many shortcuts and tools that you are using. Do you have a separate tutorial mainly about those shortcuts and tools? Anyway thanks bro keep it up!

[@WebDevCody]

I have a video about vscode shortcuts

[@sumitmehra5119]

I had a session where I had to demonstrate react and i choose this components. TBH I used same approach 😇😇

[@neksbr1]

Hi! What extension are you using on your Vs Code? And what theme? I really liked it

[@WebDevCody]

bearded theme stained blue theme with breaded icons

[@saxprophet3602]

I love the fact that you were real👍

[@vanilla4064]

Awesome job n great video! Curious, what tool is that for measuring the pixels @6:54 ?

[@WebDevCody]

screen shot tool built into mac

[@vanilla4064]

@@WebDevCody oh, ok. Thank you!

[@rodbrowning]

Show 👏🏼👏🏼👏🏼

[@brettRaperhvactech]

5:40 what are you using to get the padding?

[@boymetevil5403]

how do turn your cursor in the "selecting tool" that you use to check the pixel size? is it a screenshot software?

[@WebDevCody]

build into mac, it's the screenshot tool

[@boymetevil5403]

@@WebDevCody oh okay thanks, didn’t know it also showed the pixels like that

[@nicolasmayorga8288]

Hi ! What do you use and how, to see the pixels from the elements in your screen ? that could really save me a lot of moments

[@WebDevCody]

Screenshot tool in mac

[@nicolasmayorga8288]

@@WebDevCody Thanks!!! Great video

[@lauris5275]

Is there a point to submit it after? Do they check it or what? Cause i probably wont use them as portfolio anway. Wanted to train my css and html skills.

[@WebDevCody]

Idk I doubt it, just get it looking good and you’ve solved the challenges

[@twismfamily]

How do you get your mouse to show the cross as you click and drag to see the width and size of your picture?

[@WebDevCody]

Mac screenshot tool

[@HollowsDarkness]

For Frontend Mentor, how do you make the preview, when you submitted the code, lineup with your submitted project? is there a way to ?

[@WebDevCody]

Not sure

[@voldemortvi4264]

when you said " i dont remember if its 50% border radius or 100% " , i was like this Man really didnt touch normal css for a looooong time 😂 Good video tho , as always very informative

[@WebDevCody]

The thing is both work to make a circle round 😂

[@voldemortvi4264]

@@WebDevCody yes ^^ , sometimes i use border-radius: 100vh; thats work too

[@pattaratornseeduang6407]

what mic did u use on this video? your voice are great.

[@WebDevCody]

Mxl 990

[@sambit7099]

Hey what vs code theme are you using? It looks cool.

[@WebDevCody]

Bearded theme

[@sudoUser12]

@@WebDevCody but which variant?

[@WebDevCody]

@@sudoUser12 stained blue

[@handsome_man69]

Handsome man

[@darelbvcr687]

Can u make simple next13 typescript tailwind project ?

[@chrismolina6483]

Hello what tool did you use to measure at 5:50 mins to get the pixel value both width & height

[@WebDevCody]

mac screenshot tool

[@kimbapslayer1995]

Man watching the process of normal css or scss and writing classes stresse some out. That’s probably not a good thing, but I’m so dead stuck on tailwind every sense I tried it.

[@WebDevCody]

Yeah I’m kind of hooked at it as well

[@GetushaHD]

I loved the file icons what's the name?

[@WebDevCody]

Bearded icons

[@siriusjaeger2823]

What Color Picker App are you using?

[@WebDevCody]

The browser one

[@johnmurphy7274]

Damn how did you master front end cool.

[@sardorchallenges]

What icon extension in VSCode do you use?

[@WebDevCody]

Bearded icons

[@KuroBayashi]

Hello, why using 5 buttons when exist ?

[@WebDevCody]

Idk I probably should have used a radio, I just know styling the radio takes a bit more css knowledge to do without looking it up

[@solowolf5304]

what's the vs code theme that you are using ?

[@WebDevCody]

Bearded theme stained blue

[@sharadtiwari6768]

Could you recommend me a course for complete front-end development, please!!

[@blank3211]

what is the tool you use to get the width and height

[@WebDevCody]

screen capture build into mac

[@blank3211]

@@WebDevCody ok thank you

[@MohamedElsayed02]

can you type jsx with typescript, what I mean not to make all your videos typescript if you don't mind cuz I didn't learn it yet

[@WebDevCody]

Sorry, I decided to always use ts for my videos. I’d recommend just learning a little bit about how you can add types to variables and you should be able to follow along

[@adi_trades99]

Is this pewdiepie's smart cousin?

[@Tijme]

Hey hey, wouldn’t it have been better to use radio button?

[@WebDevCody]

yes probably

[@Tijme]

@@WebDevCody it handles the active button for you. Just gotta change some styling. I was also wondering why you were using focus instead of active. When users use tab to navigate the site it would have looked like you selected it (because the button is orange)

[@sahadpop4135]

When to use module.css and just .css ??

[@WebDevCody]

module will scope the styles to you component, so if you only need styles for your particular component, you could use a module

[@milosh4851]

what is the name of this measurment tool on 6:53

[@WebDevCody]

Screenshot tool build into mac

[@LeagueJeffreyG]

Lol I just flew through like 6 of these and im too scared to start applying

[@WebDevCody]

If you feel confident in building out uis, might as well try to apply somewhwre

[@LeagueJeffreyG]

@@WebDevCody yeah my last interview was such a bad experience that I legit have imposter syndrome now

[@WebDevCody]

@@LeagueJeffreyG what did they ask?

[@LeagueJeffreyG]

@@WebDevCody I was asked to-make a functioning version of wordlelol in 45 minutes

[@TheMetalMag]

wow, the start is so fast it ain't for beginners! you need to know already react and be a good coder to understand what you are doing. I'm lost in two minutes!

[@-sY.Nuclear]

how is this for begginers like you are using react bunch of json and stuff man dont bring newbies down

[@WebDevCody]

I’ve been publishing react challenges. So this is more geared towards people learning react

[@DerAchte8]

I wish I found frontend more interesting but to me it's fking boring I dont know how you guys do