9 Resources to help you practice your front-end skills

Поділитися
Вставка
  • Опубліковано 25 лис 2024

КОМЕНТАРІ • 118

  • @FlorinPop
    @FlorinPop Рік тому +167

    Thank you for mentioning our platform! Very grateful for it! 🙏

    • @vardump_
      @vardump_ Рік тому +3

      iCodeThis & FEM are awesome. You know both of them are the reasons why I am rising early everyday in the first place. It's my cup of coffee every morning. Thank you for building those @FlorinPop

    • @andreineacsu5866
      @andreineacsu5866 Рік тому +2

      Thank you for regional prices on FEM

    • @Deb_deCoder
      @Deb_deCoder Рік тому +3

      you asked Kevin to make a video about the website for money.. now thanking him for making a video about that website 😅

    • @duskairable
      @duskairable Рік тому

      ​@@Deb_deCoderhaha that's how the business works

  • @ryangallardo3027
    @ryangallardo3027 Рік тому +4

    I really want the back-end stuff more than the front-end, however as a beginner with no experience yet, I decided to take the full-stack route so that I can have more options in landing a job. This is very helpful since as a kind of person that is not into front-end and still need to practice his front-end skills. Thank you for this, Kevin!

  • @muhamadsarhad6566
    @muhamadsarhad6566 Рік тому +7

    Perfect timing. Just finished a very long Javascript course, and now it is time for practice

  • @thadioustackbar
    @thadioustackbar Рік тому +15

    I love Frontend Mentor. Highly recommend if you struggle with needing ideas to practice.

    • @GabrielAfonso-jk4md
      @GabrielAfonso-jk4md Рік тому

      They are one of the few resources I've ever paid online and it was worth it. Some of their premium challenges are amazing as portfolio pieces even for experienced devs.

  • @1spandexer
    @1spandexer Рік тому +18

    Oh my god! I wanted to learn FrontEnd web development for years now and nothing gets through. I started and stopped for years and these websites can really help me trudge through the sometimes aimless and unintuitive html & css designing. Thank you Kevin! I know that I would definitely go back to this video again and again and again for sometime, and I promise to givee update each time I rewatch this!

    • @jorgearpi
      @jorgearpi 2 місяці тому

      How are you doing, buddy? I started and stopped too, mainly because I JS didn't clicked on me but i'm on my second attempt now... :)

  • @LaydyDivine
    @LaydyDivine Рік тому +4

    I came across this at perfect timing! Thank you so much. It’s so hard to find places to learn while practicing instead of tutorial hell.

  • @dorcasintech
    @dorcasintech Рік тому +9

    Thank you for this list, Kevin. I just submitted my first Frontend Mentor challenge and I really enjoyed it, and the lessons I learned along the way. Flexbox Zombies helped improve my understanding of flexbox. Looking forward to trying out the other games to practice the Grid.

  • @hologram4118
    @hologram4118 Рік тому +3

    Thank you! Ive been in a slump as I just finished my first internship, and Ive been burnt out a bit. This brought me back to feeling inspired

    • @KevinPowell
      @KevinPowell  Рік тому +2

      Awesome! It's easy for everything to turn into a bit of a slog, sometimes a fun little project that's not even much of a challenge can be a nice way to just have some fun with this stuff again :)

  • @treyrader
    @treyrader Рік тому +6

    Love ya Kevin. Been puttting the programmming aside recently to study layouts and overall design. Your channel is my go to when i wind down at night! I am determined to become a css fellow wizard lol

  • @romankovbasniuk1826
    @romankovbasniuk1826 Рік тому +3

    Thank you for making this video! I’m currently in a coding bootcamp, and I’ve been looking for ways to practice my front-end skills that are more engaging.

  • @petrvalenta8835
    @petrvalenta8835 Рік тому +1

    Something old, but also something completelly NEW! Thanks Kevin!!! iCodeThis looks really good. It's like CodeWars for FrontEnd.

  • @edwinschutjes8878
    @edwinschutjes8878 Рік тому +21

    Personally I do really like the benefits of frontendmentor pro. Getting different values from a Figma file really speeds up my development process. With just a jpeg you are doing a lot of guess work on dimensions, font sizes and so on. Or you have to measure out stuff in like Photoshop or simular.

    • @sujit_webdev
      @sujit_webdev Рік тому +3

      True! When working in a real environment, we do get a figma file to refer to

    • @edwinschutjes8878
      @edwinschutjes8878 Рік тому +3

      @@sujit_webdev yes that's absolutely the way of working in any professional company.
      Although I do enjoy the very occasional client handing in a fuzzy sketch on like a napkin. Can you build this? :')

    • @sujit_webdev
      @sujit_webdev Рік тому

      @@edwinschutjes8878 😅👌

  • @TheThirdWorldCitizen
    @TheThirdWorldCitizen Рік тому +7

    Would be fun to watch you do one of those non-websites once a month or similar, building unrealistic things is still engaging from time to time.

    • @KevinPowell
      @KevinPowell  Рік тому +3

      I do them from time to time, but it has been awhile now!

    • @Omar-vi1vu
      @Omar-vi1vu Рік тому +1

      @@KevinPowell yes, please upload another, i found it highly informative!

  • @chrisicotec7652
    @chrisicotec7652 Рік тому +2

    another excellent set of resources i would never have known about if it wasnt for this channel

  • @pablobarrientos2071
    @pablobarrientos2071 Рік тому +1

    This is exactly what I am looking for! Thanks

  • @Eldorbek-Yokubjonov
    @Eldorbek-Yokubjonov Рік тому +2

    thank you bro
    I learned a lot of css stuff from your videos thanks one more time !

  • @okshoo
    @okshoo Рік тому +1

    Thanks for sharing Frontend Practice alongside all of these great resources Kevin! 🙌🙌

    • @KevinPowell
      @KevinPowell  Рік тому

      My pleasure! Thanks for putting it together :D

  • @aungminhtut1430
    @aungminhtut1430 Рік тому

    You are the best mentoring for me

  • @draxisreborn
    @draxisreborn Рік тому

    Dude, You are awesome. Thank you so much for your videos.

  • @MatthaisUK
    @MatthaisUK Рік тому +1

    As "Grid Critters" is (understandably) behind a paywall, I tend to point newbies to "CSS Grid Attack" for a more in depth Grid gamified tutorial than what Grid Garden offers.

    • @KevinPowell
      @KevinPowell  Рік тому +1

      Thanks, I'll add it to the list!

  • @hardinrami8500
    @hardinrami8500 Рік тому

    Thank you for sharing this with us!

  • @stdioepic
    @stdioepic Рік тому

    Wonder full video and very helpful fro the front-end developers. I really appreciate your effort.

  • @maws33
    @maws33 Рік тому +1

    great video! thanks for sharing all of those resources. I would love to have something like that for JS

  • @YunisRajab
    @YunisRajab Рік тому

    grid garden and flex box froggy are a must for everyone

  • @falcon4359
    @falcon4359 Рік тому +1

    Another really good one is codedamn projects. They have a lot of projects and offer a framer-specific sandbox too

  • @snailedlt
    @snailedlt Рік тому

    css-diner is so nice!
    I'm gonna try to fork and work on it since it hasn't been updated in 5 years

  • @952a259
    @952a259 Рік тому

    Thank you for a great review! 👍👍👍

  • @lukas.webdev
    @lukas.webdev Рік тому +1

    Very valuable! 🔥

  • @omarinsurriaga1123
    @omarinsurriaga1123 Рік тому +2

    I like to use Flexbox Zombies for practicing and reviewing Flexbox techniques; it's fun to shoot the zombies!🧟‍♀🧟‍♂

  • @Mario-zg1tr
    @Mario-zg1tr Рік тому +1

    Always great content 🎉

  • @victoriaazola6409
    @victoriaazola6409 Рік тому

    Really helpful video, thanks!

  • @mommyelevate4253
    @mommyelevate4253 Рік тому

    This is sooooo helpful!

  • @kostiantynkarzhanov9216
    @kostiantynkarzhanov9216 Рік тому

    Thank you! Very helpfull resources 💛

  • @renataregina8154
    @renataregina8154 Рік тому

    wow, thanks for recomendation. i just find new exercise for learn about front end

  • @yousadisadisa3091
    @yousadisadisa3091 Рік тому

    thank you so much what a great video for me this is will be the way to learn i like challenging

  • @NikhilVerma-jk9ng
    @NikhilVerma-jk9ng Рік тому

    This is why i am subscribed to you

  • @ItsThankK
    @ItsThankK Рік тому

    Awesome video! ❤

  • @meleseberehannu2861
    @meleseberehannu2861 Рік тому

    1. Icodethis
    2. Frontendmentor
    3. Frontendpractice
    4. CssBattle
    5. Flexboxfroggy
    6. Flexboxzombies

  • @IamPetrus
    @IamPetrus Рік тому

    gracias Kevin!

  • @MrBrady95
    @MrBrady95 Рік тому +1

    Thanks, are there any resources that don't have a subscription model?

    • @KevinPowell
      @KevinPowell  Рік тому +3

      Frontend mentor is the only one that is, and half of their challenges are free.
      Icodethis is free for the daily challenges, but the full back catalog and other features are a one time purchase.
      Frontend practice is free.
      All the games, other than one of the grid ones are free, and Grid Critters is a one-time purchase.

  • @salehabuhussein5229
    @salehabuhussein5229 Рік тому

    Kevin I like Your content it's amazing❤❤
    It would be great to deep dive into css print media and customization of print no one talks about in the internet

    • @KevinPowell
      @KevinPowell  Рік тому

      the print stuff has some issues and I generally try my best to avoid it 😆. You aren't the first to ask though, so maybe one day!

  • @omotehinseelvis9845
    @omotehinseelvis9845 Рік тому

    Thanks Kevin

  • @ethernaelis
    @ethernaelis Рік тому

    Thank you !

  • @Dev-cc3ni
    @Dev-cc3ni Рік тому

    Hi Kevin, can you recommend something similar for practicing specifically React?

  • @hoda67286
    @hoda67286 Рік тому

    Thanks so much ❤

  • @ppchan1
    @ppchan1 Рік тому

    Thank you so much !!!

  • @batoolalarmala1975
    @batoolalarmala1975 Рік тому

    You're the best
    Thanks alot

  • @wintorez6649
    @wintorez6649 Рік тому +1

    Thank you sir for providing this type of information ❤❤

  • @GEBO_888
    @GEBO_888 Рік тому

    Sir kevin, how about a game for javascript? like froggie, zombies and other games. thank you!

  • @GR_BackingTracks
    @GR_BackingTracks Рік тому

    An interesting project I want to do is to make UA-cam from scratch...
    Also, make a blog from scratch. That would probably be easier.
    Yes i am a noob.

  • @raviiirathore9984
    @raviiirathore9984 Рік тому

    Does frontend means only html,css ? Why you didn't include React or Angular?

  • @zeffali
    @zeffali Рік тому

    I think finding out cool websites online and trying to copy some sections of the website is also not a bad idea?

    • @swallowedinthesea11
      @swallowedinthesea11 Рік тому

      No, it's not a bad idea. It actually helps you gain experience. It helped me when I tried to replicate Netflix and Steam.

  • @Dylancer829
    @Dylancer829 Рік тому

    What about backend

  • @gangasai_kumar_G
    @gangasai_kumar_G Рік тому

    Hi sir, can you make a video for visual studio like scroll bar wider preview. Visual studio have a right side wider scroll bar with active code line preview position, can you make that it is possible in css with js
    Can you please give me a solution for that , it's my humble request,
    Thank you sir.

  • @NaveenKumar-nq8mh
    @NaveenKumar-nq8mh Рік тому

    I'm 25, completed a Certified course on Angular web developer , still looking for a job....
    Is there any possibility of getting a job in this field

  • @slimyelow
    @slimyelow Рік тому +1

    Are you the same guy as on Fireship?

  • @oladimejitaiwo8489
    @oladimejitaiwo8489 Рік тому

    Thank you powell for this .. which css framework you think i can learn powelll please help me and should i learn it bfore i go javascript

    • @KevinPowell
      @KevinPowell  Рік тому

      I'd probably just dive into javascript to be honest :)

  • @gangasai_kumar_G
    @gangasai_kumar_G Рік тому

    hi sir, can you make video on creating a vscode like scroll bar,
    in vscode right side have a zoom scrollbar., can you re-create that with css

    • @KevinPowell
      @KevinPowell  Рік тому

      CSS only? Dont think it's possible

    • @gangasai_kumar_G
      @gangasai_kumar_G Рік тому

      @@KevinPowell yes sir, include js also, can make video on that

  • @bahmanabadi.developer
    @bahmanabadi.developer Рік тому +1

    great

  • @letanthanh9866
    @letanthanh9866 Рік тому

    Thank you for sharing this. These things will keep me awake while practicing CSS.

  • @mamasiddiqove
    @mamasiddiqove Рік тому

    Good day mr. Kevin, is it possible to make a heart shape using CSS clip-path, I've searched, but found only SVG shaped, if possible can you make a tutorial on it?

    • @KevinPowell
      @KevinPowell  Рік тому +1

      Easiest way is an SVG in my opinion, and if not that, then a div rotated 45deg, and then two psuedo-elements that are circles that make the round bits... You can use a clip-path too though, using a clip-path: path(), and the path that you put in is just an SVG string. Here's more info on it: developer.mozilla.org/en-US/docs/Web/CSS/path

    • @mamasiddiqove
      @mamasiddiqove Рік тому

      @@KevinPowell Okay, thanks mr. Kevin. By the way, I've finished CRL course by you. And it was really awesome, thanks for that also

  • @mahmoudsheleil562
    @mahmoudsheleil562 Рік тому

    Hi kevin,
    I had an idea and i managed to acheive it but i think you can make it better so if we can communicate to tell it to you i would be so happy
    Thanks in advance

  • @noahibrahim3364
    @noahibrahim3364 Рік тому

    Nope no way you will fall in love with css it is not a choice. I just started using tailwind and felt it was boring thanks Kevin

  • @Alexffire4808
    @Alexffire4808 11 місяців тому

    Can you recomend resource that are free sir?

  • @MrTomro
    @MrTomro Рік тому

    css diner is abandoned, quite a few mistakes and last commit was 5 years ago.

    • @KevinPowell
      @KevinPowell  Рік тому +2

      Thanks for pointing that out, I'll leave a note next to the link

    • @MatthaisUK
      @MatthaisUK Рік тому

      Am I being dense? I went through it a while ago (as someone already confident with selectors) and cannot recall anything odd. Could you give some specific examples?

    • @MrTomro
      @MrTomro Рік тому +1

      @@MatthaisUK just check the repo and it's issues.

  • @dankierson
    @dankierson Рік тому

    🎶 📯🎺
    _And they will help you too_
    _But not half as much as you do_
    🎷 🎶

  • @walidhaoud1914
    @walidhaoud1914 Рік тому

    hope you this , the site for the CSS Demystified course , I think it's broken , it take so much time to load + it only html there (site looked with no style) !!

    • @KevinPowell
      @KevinPowell  Рік тому +1

      Working for me now, and didn't see any issues with it yesterday 🤔
      Could you give it another try?

    • @walidhaoud1914
      @walidhaoud1914 Рік тому

      @@KevinPowell yes now it work just fine .

  • @iamafnanhussain
    @iamafnanhussain Рік тому

    You are looking like "Tony Stark" ❤

  • @jaredkeown
    @jaredkeown Рік тому

    Do you know of any resources to practice container queries?

    • @KevinPowell
      @KevinPowell  Рік тому

      Could easily be used for some of the icodethis or frontend mentor challenges :)

    • @jaredkeown
      @jaredkeown Рік тому

      @@KevinPowell Thanks for the reply Kevin! I should have been more specific. I was looking for something similar to grid garden but for containers

  • @pandyazi
    @pandyazi 7 місяців тому

    👏

  • @lavroxofficial
    @lavroxofficial Рік тому

    Can I get job as frontend developer by solving these challenges? @Kevin

    • @KevinPowell
      @KevinPowell  Рік тому

      They can help you have the right skills to be hired. You might want to have some unique personal projects too, though

  • @VivekYadav-up7uu
    @VivekYadav-up7uu Рік тому

    nice video

  • @CamaguNcoso
    @CamaguNcoso 7 місяців тому

    CSS is frustrated and so is JavaScript

  • @Coding_DreamR
    @Coding_DreamR Рік тому

    If you are interested in Web development Tutorials 😜

  • @CodeForFuture-b8s
    @CodeForFuture-b8s Рік тому

    are chacha konsi train pakadni hai

  • @gangasai_kumar_G
    @gangasai_kumar_G Рік тому

    hi sir, can you make video on creating a vscode like scroll bar,
    in vscode right side have a zoom scrollbar., can you re-create that with css

  • @amit67739
    @amit67739 Рік тому

    nice video