This is a fun front-end challenge for beginners to try (using React)
HTML-код
- Опубликовано: 23 авг 2024
- 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.web...
📁 GitHub github.com/web...
📺 Twitch / webdevcody
🤖 Website webdevcody.com
🐦 Twitter / webdevcody
More frontend mentor challenges please! Love watching how other people solve the challenge.
It was really interesting to see how others break down and solve a challenge. Expecting more of these videos from you!
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.
coincidence? I think not
beautiful, hope you do more of these videos where you are going through everything, the longer the better. ty
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
I might do more of these, it was fun!
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
I agree it has good stuff that you'd see on a real application you might need to build
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.
This channel has been great lately, good job!
Glad you enjoy it!
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 :)
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.
yeah that's a good idea
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
Finally challenge series is back! keep going with more challenging things
I’ll make some more
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.
Ahh nice catch
This is so good! Please do more! ❤
Nice video! Enjoyed watching :) Really interesting how others solve such challenges and I want more challenges from front-end mentor, pretty awesome platform
Good job babe!!!!
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.
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.
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!
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
nice brodie, u should do more of these challenges like you used to
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
This is seriously good content.
More advanced challenges would be welcome :)
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 :)
nice thanks for pointing that out for me!
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 👍
Great video. Thanks for the content. One thing, I guess you forgot to pass the "key" at the array button at 19:10.
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
The thing is both work to make a circle round 😂
@@WebDevCody yes ^^ , sometimes i use border-radius: 100vh; thats work too
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!
I have a video about vscode shortcuts
I love the fact that you were real👍
I had a session where I had to demonstrate react and i choose this components. TBH I used same approach 😇😇
Keep creating 👍, can you make some video on open ai apis some cool project
Great video! I noticed you use an extension that provides additional information while you're coding. Is that Quokka, or something else?
Can u make simple next13 typescript tailwind project ?
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.
Yeah I’m kind of hooked at it as well
Hello, why using 5 buttons when exist ?
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
Nice video, what's your theme and icon pack? Looks really good
Bearded theme stained blue
Is this pewdiepie's smart cousin?
Handsome man
Great content!!! Btw what is your vscode font? Your vscode fonts seems different from me.
I use the default font, probably whatever mac provides
@@WebDevCody I actually get it now. I am using window lol.
Damn how did you master front end cool.
This is fantastic. How are you switching so effortlessly between vs code & chrome? thanks
Mac workspaces three finger swipe
what mic did u use on this video? your voice are great.
Mxl 990
how do turn your cursor in the "selecting tool" that you use to check the pixel size? is it a screenshot software?
build into mac, it's the screenshot tool
@@WebDevCody oh okay thanks, didn’t know it also showed the pixels like that
Awesome job n great video! Curious, what tool is that for measuring the pixels @6:54 ?
screen shot tool built into mac
@@WebDevCody oh, ok. Thank you!
Hi!
What extension are you using on your Vs Code? And what theme? I really liked it
bearded theme stained blue theme with breaded icons
For Frontend Mentor, how do you make the preview, when you submitted the code, lineup with your submitted project? is there a way to ?
Not sure
what extension for icons in your sidebar are you using?
How do you get your mouse to show the cross as you click and drag to see the width and size of your picture?
Mac screenshot tool
Hey hey, wouldn’t it have been better to use radio button?
yes probably
@@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)
Hey what vs code theme are you using? It looks cool.
Bearded theme
@@WebDevCody but which variant?
@@sudoUser12 stained blue
Could you recommend me a course for complete front-end development, please!!
5:40 what are you using to get the padding?
I loved the file icons what's the name?
Bearded icons
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.
Idk I doubt it, just get it looking good and you’ve solved the challenges
Show 👏🏼👏🏼👏🏼
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
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
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
Screenshot tool in mac
@@WebDevCody Thanks!!! Great video
Lol I just flew through like 6 of these and im too scared to start applying
If you feel confident in building out uis, might as well try to apply somewhwre
@@WebDevCody yeah my last interview was such a bad experience that I legit have imposter syndrome now
@@LeagueJeffreyG what did they ask?
@@WebDevCody I was asked to-make a functioning version of wordlelol in 45 minutes
Hello what tool did you use to measure at 5:50 mins to get the pixel value both width & height
mac screenshot tool
What Color Picker App are you using?
The browser one
When to use module.css and just .css ??
module will scope the styles to you component, so if you only need styles for your particular component, you could use a module
What icon extension in VSCode do you use?
Bearded icons
what's the vs code theme that you are using ?
Bearded theme stained blue
what is the name of this measurment tool on 6:53
Screenshot tool build into mac
what is the tool you use to get the width and height
screen capture build into mac
@@WebDevCody ok thank you
how is this for begginers like you are using react bunch of json and stuff man dont bring newbies down
I’ve been publishing react challenges. So this is more geared towards people learning react
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!
I wish I found frontend more interesting but to me it's fking boring I dont know how you guys do