Roadmap to build your frontend portfolio with example projects

hey there everyone daish here back again with another video and welcome to this amazing video so in the recent live session we had a lot of discussion and I found out that a lot of you want to become a front-end developer now some of you are learning on their own some of you are learning from some courses and tutorials and paid boot camps and whatever you are learning the goal is really simple you want to become front-end developer and you want to showcase your skills in such a way that somebody can hire you or somebody can get really really impressed that I do have an amazing portfolio of websites and this proves that I am a really seasoned front-end developer now when you want to become a front-end developer there are two important things that you really need to know the first one being what is my portfolio and is my portfolio really impressing somebody and second part is am I able to handle the apis these are the two things which no matter where what country you are looking forward is they need these two skills portfolio good amazing designs that you can build something and second is can you handle your apis now there are two parts of it in the second part this is all about handling the apis and all of that we are not here to discuss about that probably if you request enough in the comment section I'll discuss the part two of that that how you can showcase your skill for part two which is I can handle any API just give me a back end and I know how to handle apis I can recommend you some projects for that as well this video is more about impressing somebody with your portfolio of the web design now when you want to work with the web designs the problem is how to get inspiration from where to get designs yes there are a lot of designs available on Triple and all of that and you can take inspiration from that but we are developers we are not designers designer can make the website absolutely beautiful first and as a developer it's our job to just convert them into the code so the problem of the design is going to be solved in this video in this video I'll give you like 9 or 10 example portfolios that you can include as a sample project that hey I built these and these are no ordinary website from boot camps or tutorials or like that these are real world highly inspirational websites that you can actually use as a reference that hey I got inspired from this website and I build this into my own flavor and this is my project work so these are not really something which you can build just like in a two days or three days as a project this will take you probably a week or sometimes weeks to figure out how to do all of this but once you do this I'm pretty sure you will be an absolute master of front-end developer and there is nobody who can deny you that hey I don't want to hire you these are such good showcase skills so let's go ahead and get started on the screen first so first website a little bit out of the blue which is react navigation I've been wandering around on this website quite a lot and I found this really interesting project to Showcase that this is how I got started this is my step one you don't want to really show all your cards in the day one because who learns day everything on the day one so this is more about it so react navigation really basic website has nothing too much but it will just give somebody an idea that hey there was some learning point this is how you got started and now this is what you're doing so this is all responsive as well so as expected here so this is all responsive and going nice the second website is little bit more challenging and now we're going to be taking the challenge all really on to the next level so there is this website known as eat Dash curious.com and let me just reload this this has some amazing thing that comes up so you can see uh meet free your mind all big fonts some icons some logos like that and look at the color scheme how basic it is but the theme the things we cannot do it as a developer this is all in a great work by designer but we can take inspiration from it and can design and now if you scroll this notice here how the elements are popping in from left and right there is some animations going on so Parallax effect is nice and this website has one of the best Palace effect that you are going to see around colors are nice we don't have to worry about that icons definitely you can change icons here write some of your own font and these are just inspiration that we are taking to showcase our portfolio and once you reach at the end then you can keep on scrolling and this portion of the website comes up as a menu I think you can use it as a a personal portfolio website as well this is pretty impressive section overall so look at this the color scheme and everything great great insane kind of a design work so yeah this is the first one I'll just zoom it up here so this is eat curious.com in case you want to just take another one which is from the famous Mr Beast how can we forget that this has some retro look and this obviously is going to take a lot of eyes retro look is not easy to pull in but the designers of Mr Beast of course I'm going to pull this on so this is what the Mr Beast website is I can close this one and notice how the cursor actually changes the Mr Beast style but this is all really really nice this is relatively easy to pull if you just take a remove like this hovering effect of this rays that are coming up this is comparatively an easy website to pull in uh but the look The feel that it is giving and let me show you one more thing this website actually looks crazy on the mobile screen as well so notice here when you go into the Mobile screen there is nothing extraordinary on this website but still the look and feel of course it's Mr Beast it's simplicity at its best but this goes like really really crazy so go ahead and try this out obviously interviewer will be super impressive that not only just you watch YouTube you actually go onto their websites and take inspiration from there on the website this is little bit onto the crazy side it will require a lot of CSS skills a lot of JavaScript skills as well this is actually a pays a deck lacks so I'm a Avid traveler I love to travel a lot and this is the website which is basically on France basis France tours and all of that and I'll just give you a closer look on the URL you can just take a screenshot or save it as a bookmark or something and once you actually go onto this website and you try to scroll it that's where the magic actually comes up this is not the magical portion once you scroll this notice this card Effect this is one hell of an impressive work notice this how the cards are actually traveling this is good after that that's basic after that that's basic all of this is basic there is nothing too much going on but this card Effect uh that is on another level so you really want to just try to mimic this card level and you can definitely impress anybody next up that we have is warp.com this is a classic example you'll notice a lot of templates and everything being designed in a similar manner similar fashion this is like go to showing that I know unders I know the trend I understand the trend what is happening latest in the market so these kinds of things you might have noticed these kinds of similar thing on the dev UI as well that we are building uh really basic there is not too much fanciness but yes this shows that I understand the latest Trend latest and Modern Trend and all this is going on so really basic you can pull this off relatively faster but this is just to Showcase that I understand the trend I understand the color theme and I've been working on recent project not the outdated projects that I have so that's why I've included this into the list uh next one is this I found some blinking animation very very eye-catching especially this nft take a close look on this nft animation once the eye animation is done then it actually pops up and it pops up twice so this is something you really want to catch up notice the fonts and everything after that there is nothing too much on the website it's just the basic block and everything but I found this first section really really impressive this is all just you can pull this off I know I understand but this whole section has a landing page crazy good crazy good and look at this when I just shrink this onto a smaller scale this still actually maintains everything like that so notice here nft notice this here so scaling part how you scale down the fonts to a lower side and all of that this is something worth taking a look next up is the zelt now when you start on this website assault.app so here is the zelt.app notice here how minimalistic this is until you start scrolling once you start scrolling this website ah this explodes like anything and these are all images just like apple does it these are all set of images you can just check their Network Tab and you'll find that there is a lot of work hard work that designers have done but this is on to another level this can impress anybody again for building such kind of things you need heavy heavy input from the designer but if we have this website we can inspect it check out the network check out the images and at least can try to build an educational replica I'm not telling you to rip off this website but hey there's a lot of inspiration around and a lot of things that you can do one more which is Eclipse very bold color it is almost next to impossible to pull off this much of red on the website but look at this this is how it looks pretty decent and pretty basic you can turn this up so there's a lot of things going on a lot of elements move around on different paces and there's a lot going on relatively very simple but there's a lot that you can learn and do in this there are two modes the first one is Adeno Bros I like this website side because it gives again the Retro look and style and all of that so notice here really basic and I like this one so I have never seen on any website that this is how they actually moves their navigation bar this is a hell of an impressive work and a new thinking out of the box that it doesn't really need to say all the names in the menu you can just have it like this and all the navigation bar can go like this I found this really cool and interesting that hey there is something new that they are doing their cards are really nice once you reach at this point you cannot scroll further all that Scrolls after this ER these cards so this is one interesting take and then you can scroll further so really card glossy design and all of that one thing that impressed me a lot is this this menu navigation system I haven't seen anything like this in the past and imagine if your portfolio has this kinds of emojis as navigation for contact us home and all of that how cool it would look so that would be really nice then after that we have this Chronicle HQ I like this website because there's a lot of lot of designer work into this one and if you just pull this off it will hell of an impressive work that anybody will say notice here this is all that do immediately you can actually take this video and gifs and all of that you can try this but as you scroll this notice this effect this is on different level once you move up here notice here there is a lot of animation on the cards different speed of scrolling that is going on so obviously a lot of JavaScript is involved in this one this is one of my favorite sections so far as you scroll this gets highlighted So based on the scrolling it keeps on highlighting this so this is one hell of an impressive you can not only just work on this you can take segments from these website and build your own portfolio around it that's how a lot of people does there's no shame in that a lot of people take inspiration from around so every website is going to give you something or another thing to work on test out your skills that are we good enough as a front-end developer once you build these kinds of things I'm pretty sure there is nobody who is going to tell you that you can build this design or you cannot do this of our work they will be hell of an impressive that's part one of how to impress as a front-end developer now there is a part two as well where you can impress them based on what kind of apis you have handled and I can give you a list of that as well that would be impressive work but for that I need a comment section that hey all of that we need that and we need to set some targets so probably like 5000 likes on this video and I'll roll out another video for that make sure you share this on LinkedIn Instagram Twitter wherever you like if you think that this value is this video is adding some value and this effort that we are taking here is actually getting noticed by you and you appreciate that so that's it for this one hit that subscribe and I'll surely catch you up in the next video

Channel: Hitesh Choudhary

Views: 112,031

Keywords: Programming, python, javascript, devops, cloud

Id: wpfE9XQuMBI

Length: 11min 37sec (697 seconds)

Published: Thu Apr 27 2023