Step up your front-end skills with these 5 resources

it is so easy to get stuck following tutorial after tutorial after tutorial and not really making the progress you'd hope you'd be making in your front end journey you ask some people for advice on what to do to take that next step and they tell you to go build something but what are you supposed to build you know you're ready to take that next step and to really start upping your skills you just have no idea where to start you have no ideas of what to build now this sounds like i'm speaking directly to you then you're definitely in the right place because in this video we're gonna be looking at five different resources that can help you start taking those steps and start moving forward and stop worrying about what to build and just get into actually building it hello my friend and friends and welcome back to the channel if you're new here my name is kevin and here at my channel we learned how to make the web and how to make it look good with weekly tips tricks and tutorials it took me a really long time to realize that i wanted to be a front-end developer i mean i started making websites back in the 90s in high school for fun i did about a million other things got a whole bunch of degrees that i don't use at all now but all of the front-end stuff i did all on my own i'm completely self-taught so if you've been making this journey along the way and you're feeling stuck 100 can feel your pain luckily compared to back when i started this in the 90s when i was just playing around with it a lot there are so many more and amazing resources to help you get started and help you get past these roadblocks that are really common to run into it's one thing to just be following tutorials there's so many of them out there and you know you're watching my channel so you've probably seen a few of those as well but when it comes to taking that next step you really do need to be building projects and working on projects and often it's really hard just to get ideas for those or to find designs to build out so let's go and take a look at some resources that can help you get past that step and just get you coding and reinforcing all those skills you've been learning through your courses and your tutorials the first one of these resources that we're going to look at is front end mentor this is one of the ones that i recommend it to a lot of people because the really nice thing with this is it takes down that one major constraint that a lot of us have in that we don't want to have to necessarily design something along the way we just want to get into the code and start making it look the way it's supposed to look if you're not a designer it can be really hard to come up with something that looks good to even start with or you start trying to design in the browser and it's just it's not easy to do it doesn't look great you abandon the project we've all been there with front end mentor the wonderful thing is they give you really nice looking designs right from the beginning so you're not worried about that side you have exactly what you want to build and then you just have to make it happen the other thing that i really like about it is they organize all their different challenges by difficulty level so whether it's like they have a newbie challenge an intermediate one an advanced one they have guru runs so this isn't somewhere where you can just come and practice at the very basic level do some really simple stuff as you grow as a developer you can keep coming back here and reinforcing your skills as you learn new things the very basic challenges are just some simple layouts with html and css then you're also adding javascript to the mix you're having to interact with apis and do all sorts of really good things as you progress through some of the more advanced challenges they have so it's a really good way to take these things that you're hearing about and actually have to implement them into projects now one thing you might notice right off the bat is there's premium and free resources the free ones are still really really good so don't feel like you have to pay to get quality out of it you can get really amazing challenges for free and just jump in there and start doing stuff you can share your solution when you're done and that means other people can actually see it you can get feedback on your solutions it also gets you working with github to be able to do all of this which is all part of the workflow that you're going to need to know how to do when you have a job so a lot of really good things here as you're developing and working on your skill set that are going to apply to the real world if you do decide to look into or get the premium membership it does come with some extra stuff so you can get into the design files rather than just seeing jpegs of what the design and the finished version should look like so you get the actual design files uh you also get access to the design system so you get a little bit more information but if you're not ready for that or it's not in your budget that's cool you can still really take advantage of front end mentor even on the free tier it is a really really awesome resource the next resource that i want to look at that you can use is style stage which you can find at stylestage.dev it is by stephanie eckles and this one just makes me so happy as i said i started making websites way back in the late 90s and things were very different then one of the things that came up along the way was something called css zen garden and i have really really fond memories of css zen garden it was a way to show what css could do so you all started with the same html file and then you would just come in with your own css and style it however you wanted and every time i visited that i was blown away by the amazing stuff people would do well stephanie wanted to do a modern approach to that with style stage style stage is very similar to css zen garden in the sense that you are starting with all the same html file and it's up to you to do whatever you want with it with css there are some differences though in that she's up the game a little bit if you want to submit it you do have to do it through a github pull request so once again we're bringing in actual workflows that can help you out but there's some guidelines that must be followed you have to make sure that you're following accessibility best practices and making a site that isn't just looking good but that is accessible as well which is really really cool and the nice thing with it is steph will reply you put in your poll request she's going to let you know if everything is okay or if there are changes to be made you can have a bit of a back and forth through that until you make all the changes that are needed and once it passes everything you get your site is going to be live on style stage right there and everybody can check it out i have done a style stage i did it over several live streams over on twitch so it is a lot of content but i did bring it over to a playlist here on youtube so if you do want to check it out you can check that card there if you're in for a lot of content but it is a really fun project to work on and you actually have to this is really for developing your css skills because the the rule is the only thing you can do is play with your css file you're not allowed touching html there's no javascript it is css only but this really gets you first of all thinking in a little bit of a different way because you're only changing the css but this is also really realistic to a lot of real world situations where you might be working on a wordpress theme or some other cms you don't actually have access to go into the html and make changes there you're having to be creative with how you're doing your css to get everything done i had a lot of fun when i made mine but it also made me push how i was using css and think about things in really creative ways i think this is such a great initiative by stephanie to bring this up here and to put as much time and effort into it as she does and i'd really love to see if you do something with it so share with me on twitter if you do put in a submission and it does get published all right now this one is a little bit of a different approach and a different thing in terms of building actual projects we're taking a completely different road with looking at css battle if you don't know about css battle it is a really fun project where you just take little challenges where this is the opposite we're not doing real world situations we're taking things and we're building completely unrealistic things and once again this is if you want to up your css game specifically i'm a css channel so maybe a little bit of css preference going on here uh with this one so you really get to up your css game with css battle and do things that are out of the ordinary but what i really like about css battle is even though it's situations and things that you would never really encounter in the real world it really forces you to up your creativity and think about things in different ways and then those things that i've done in css battles i've actually taken those ideas and used them in actual projects later on because i had that idea like oh i did that cool thing and it worked and it's sort of similar to this i'm going to use it here and it was the perfect solution i'm going to group this one in the same sort of resource as a css battle and if you don't want to just be focused on css but there are other languages that you want to up your game with as well if you sort of want to gamify the experience while you're at it there is codewars.com unlike css battle it focuses only on css code wars opens up the door to a whole bunch of different languages it's a little bit different since we're not doing visual things we're doing you know you're trying to find solutions to coding problems but at the end of the day it's the same type of idea it is to have a bit of fun with it challenge yourself a little bit and build up your skills through that type of approach instead of building up your skills through actually building a project the next one up is a pretty new site called front end practice and this is by kyle shook and it's a really cool project where instead of taking these sort of fictional experiences to try and build them up like say something like friend and mentor who's building projects from scratch instead of doing something like that the idea is he went through and has curated a list of websites that do things really well they look really nice they would be really good practice to build and he encourages you to try and clone those sites instead of looking at the entire site which can be really overwhelming on some of the big sites that are out there he focuses in on specific pages with insights for you to clone and he also points out a lot of the good things that those pages are doing that you can focus on a little bit while you're working on it to help develop your skills some of them are easier than others so you want to look at it and sort of get an idea of what you'll be getting yourself into before you jump in there but the nice thing with these is you could actually reference the code that the professionals used afterward by using some inspect element diving in seeing how they did some of the things that are in there at the very least cloning sites is a fantastic way to learn when i was teaching in the classroom a lot of the time the students didn't always like it as an exercise because it would be a little bit boring but if when we were doing design work i'd give them a design and say just recreate this exactly and this is a little bit like an art student who has to practice by copying another painting exactly and you do it again and again and again it's not the most exciting thing because it's a little bit less creative in a sense and you're sort of just trying to do something somebody else has already done but you learn so much by doing something that somebody else has already done and another thing that's really nice about doing an actual site versus maybe something like print and mentor as you can see all the little interactions and the other things there's no guessing you can see exactly where the break points are you can sort of play around with the real site and try and match it exactly just like friend and mentor one of the reasons i really like this is because you're building out actual pages actual sites without worrying too much about how you know what the design looks like it's more about executing it and making it work or making that drop down work and other things and 100 you're gonna run into situations that you've never been you've never done before or you maybe did as a tutorial six months ago or three months ago or last week and you just completely forget how to do it or you're not sure how to implement it into a bigger project and this is where you're taking all those skills that you've been learning over time and concentrating them down and putting them to use and that's going to reinforce those skills so much and it's actually going to make you learn so much you're going to have to stop you're going to have to go look and read about things and follow tutorials to get things to happen but this is really how you're going to start upping your game and start really becoming a front-end developer and speaking of becoming an actual front-end developer and contributing to real projects maybe instead of these more fictional ones or cloning other people's sites or doing coding wars and practice stuff on css battle maybe you want to up your game by actually taking part in real projects and i would really really encourage you to do this even if you're really early on in your journey you're going well kevin how am i going to do that i'm new nobody wants to hire me it's not about being hired right now it's about contributing to open source contributing to an open source project first of all is a really nice way to only have to focus on one small thing instead of the entire project in one shot but it's also a really good way to get into workflow and seeing how git works and things like that along the way as well now it can definitely seem overwhelming when you want to get into and start doing this at first if you've never done it and you're not even sure what open source even means and all of that so what i would recommend to do is to go to firsttimersonly.com and read and research on there they link off to a whole bunch of really good resources for finding open source projects that have good things for first pull requests so i mean you don't want to be diving into the deep end and finding something that's too hard to do so they help you find your first pull request that you can be doing or find ways to look for something that could be your first pull request not only do they link to places that will help you find your first project to put a pull request in our first open source project to try and contribute toward but they also have resources on how this whole open source thing works and how you can find something and the steps that you have to take are the steps that you'd want to take in being able to contribute it they really break it down really nicely and this could be a really nice step to start taking so you're actually working with real people working on an actual project that's online this is something that could be included in your portfolio that you've done actual work on open source projects and you can list them out and show the contributions you made to them and you can see your changes happening on like actual real world projects and i think that is super exciting and can be really really awesome and empowering as well and as i said when you're working on any of these things you might get stuck along the way and need a little bit of help or tutorials along the way to get you through those problems so i put a custom playlist together right here that looks at some of those common things that people run into especially with css when they're working on actual projects and ways to overcome them and with that a really big thank you to both zach and randy who are my supporters of awesome over on patreon as well as a really big thank you to all of my patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 285,286

Keywords: Kevin Powell, css, html, tutorial

Id: QqDH5sYzDS8

Length: 12min 21sec (741 seconds)

Published: Thu May 06 2021

Reddit Comments

[u/fuchsia8805]

Recommended resources from the video:

• Frontend Mentor: https://www.frontendmentor.io
• Frontend Practice: https://www.frontendpractice.com/
• Style Stage: https://stylestage.dev
• CSS Battle: https://cssbattle.dev/
• CodeWars: https://www.codewars.com/
• First Timers Only: https://www.firsttimersonly.com/