Self Taught Web Developer Portfolio That Got Me Hired Over 4 Years

so just how good does your portfolio need to be to land your first job when you're a self-taught web developer in this video i'm going to show you what my portfolio looked like when i first created it what it looked like when i got my first job and what it looked like when i got my most recent job about a year ago also i'm gonna try to show a little bit of the progress along the way for those of you who are new here i'm dorian a self-taught programmer who's been working professionally as a developer for the last three years i created this channel to share my story of becoming a self-taught programmer in order to help motivate people who are teaching themselves how to code if that's something you're into please make sure to like this video and subscribe to my channel alright let's start with my very first portfolio so when i first thought about doing this video i you know was thinking about what my portfolio was going to look like visually i didn't think about what my code was going to look like and it's kind of funny because this was my right after my initial commit which i'll show you was uh right here in a hello world so this was basically my first real commit to my portfolio and you can see the date here it's uh it's definitely you know been a while since i've visited this stuff and it's just pretty cool to look at it but it's also cool to like just see how far i've come because i honestly i haven't looked at a commit of mine this old in a really really long time and you know i'm i'm looking in the formatting is awful and it's just it's just really sloppy and i'm kind of using like camel case for my naming which you know is it's a little unorthodox for the most part uh when it comes to you know naming classes in uh html and css and just you know just really really bad formatting and i just i didn't know what i was doing i i uh there's a good chance that i probably copy and pasted some of this stuff and like just try to like patch it together i you know i'm really trying to like remember where i was back then when i created this but it's just been so long ago that that you know i have a empty jquery you know function ready here and uh and then my css was terrible too and to see it and to think how uh how far i've come since since the first days of me creating my very first portfolio so you see the date here and this is what it looked like this was it this is what my first portfolio looked like i think i created this from the uh task on free code camp to you know create your own portfolio and that's what i did and it's terrible it's awful uh the the picture i chose is so uh cringy it's i was trying to look professional it's funny because i don't wear button-ups i honestly i have like two of them and they're mostly for job interviews i'm i'm a t-shirt and jeans kind of guy i don't it's it's just not really my thing but i was you know thinking that maybe you know just trying to look professional i think that's the same picture i put on my linkedin account and and that's it i had you know the stuff that's on here is just it's not even real stuff uh i deleted most of them but i guess the images and screenshots that i took to put on my portfolio are still here so it's kind of funny to look at but you know these were just kind of like mock sites that i was creating when i was practicing and that was the first rendition of my my father-in-law's uh handyman site when i just threw a template on it before i coded it out in html and css on my own and uh yeah it's just it's awful you know it's it's a really terrible looking contact form so a lot a lot of a lot of you out there are gonna are gonna like this is where you're gonna start this is what your stuff is gonna look like early on it's uh and it's fine it's it it's it's gonna look bad it should look bad you're new you're you're you're just learning things things are you know i i doubt this is responsive i'll i'll uh i'll shrink it down to see i think i might have been using uh bootstrap at the time so at least it's it's semi-responsive i really wasn't expecting it to be um but yeah i guess i was i was smart enough to be using bootstrap at that time apparently i i was a hobbyist web developer with a working proficiency in html css and uh jquery uh yeah well it's funny okay so let's let's just move on let's move to it to something a little bit newer than that um since that's that was so here's my initial commit that was this commit here that we were just looking at and you can see this goes back to uh 2016 as it's been it's been a while since i first started learning how to code go to something newer let's see uh let's see added parallax effect to head image let me get that that commit number real quick and let's go see what this look like copy and let me just i'll uh scroll down this real quick so we can look at the code so you guys uh and girls out there don't feel don't feel bad don't feel discouraged if your stuff just looks awful because uh it's supposed to you know you're just learning all right it seems like i was getting a little bit better here stuff's a little a little more properly formatted uh or or at least not as poorly formatted as that first initial commit was so it looks like i was i was getting a little bit better i was starting to learn i mean this is still oh i deleted that and this stuff came in a little bit better but still i i didn't know how to nest my uh my my stuff and i wasn't using a formatter like pretty or anything at that time so so yeah that's just what it looked like um all right i copied that let me let me go ahead and uh go to vs code real fast here and uh let's reload that and all right so a few months later um the first one we were looking at was november 2016. this commit was february 2017. okay so you can see i've improved a little bit i was uh i remember when i was working on this this is it's so cool to actually like go back and like jog back these memories uh i remember i had a hard time uh putting this to center it in the screen to kind of have it right where i wanted it and then i also had a hard time with it being responsive and i don't know if it's responsive at this point and it seems like it was fairly responsive but even then when i when i get down to the smaller screens it's it's pretty bad but uh i was starting to get a little bit more skills here i was starting to to actually like looking at this compared to what i first showed you after a few months you can tell i was learning i was working on my html and css skills i don't even know what i was trying to do here i was trying to make like a product page with bootstrap and and just a mock a mock page and that's what i did before i was able to really get any work i i think i talked about that in other videos but early early on before i could get any kind of work i just made fake pages to kind of see if i could get a little bit of practice and to just have stuff to put on my portfolio i have a resume here i i it's it's there i don't want to download it because it probably and show it because it probably has a lot of uh you know personal information on there but it's it's i don't know i it's fun going back and looking at this to be to be honest with you i wasn't expecting this to be as fun as it as it is so i was you know expecting it to just be a little bit uh a little bit boring but it's fun for me so it might be boring for you but let's see let's let's let's move to something else here let's move to something else what do we got complete site overhaul all right well let's see what it looked like right before my complete site overhaul and i don't remember that at all so this was right before the complete site overhaul commit and yes i did i did learn git early on um i suggest that everybody does it's great to have version control it's uh it's something that every employer is going to want you to have most places use git some places still use svn but for the most part learn some form of version control because it's very handy to have so let's see what this looks like oh all right what's this i got a little something's bouncing over here i was learning css animate oh so i had got critique from my portfolio at my first meetup that i attended and someone snapped a picture of me while i presented my portfolio at the first meetup i ever attended which was it was terrifying it was horrific and it was honestly one of the best things i could have done because after that meetup you know a lot of people came up to me they talked to me i actually got a a code challenge for a job which i never completed because i just i was not ready but it was a lot of fun and it opened up my eyes to realize that there was a lot of people that would be supportive even though when i felt like i was an outsider coming in and you know going into a room full of people who had experience and knew what they were doing and the i remember that the coordinator of the the meetup group basically signed me up he asked me are you going to show anything today and i was like i was thinking about it he's like all right cool i'm putting your name down so i went up there and it and it was very beneficial to go but after that feedback this is what my portfolio looked like i put the picture up there i spruced it up a little bit um you know like i said i would always go back and try to try to add stuff to this all alright this is terrible i don't recommend anyone doing something like this it's a terrible way to try to represent your skills if this is something i saw at the time while i was learning and i thought it'd be a cool way to display it but the truth is there's no way to truly gauge your skills and what are you comparing them to what is 85 percent of what you know it doesn't represent how long you've been working in anything it really it's not anything that that's going to bring value to your portfolio um unless you can make it look amazing because i have seen some top-notch front-end devs on those you know world's greatest portfolio websites that you see and they make it look good this looking at this now does not look good and if i was looking at a junior developer that you know might be applying for a job and they had this i i would tell them to get rid of that and i hope i got rid of it um on the next iteration from my complete site overhaul as i called that commit message but but yeah i guess i remember all right i remember i was breaking up i was breaking up my my portfolio by you know learning projects that i was doing because i felt i felt that i was kind of lying to people if i just threw every tutorial that i was doing on my portfolio so i limited it to things that i was actually creating for instance these projects were projects from a free code camp and i remember the wiki viewer where you use the wikipedia api to create a website and the weather widget to create a weather api widget and a random quote generator so these were really good to show on here because i had code in github that i can show it was stuff that i actually coded myself what you want to stay away from is don't try not to list any tutorials where you really didn't code it on your own and i actually did that in my portfolio and i don't i don't think i had it um in my portfolio when i got hired but i guess we'll find out but try to limit the things on your portfolio to things that you actually coded yourself if you can or been you know part of a team that that coded it so yeah i had my learning projects up here and then i i had my sites i've made and there's the uh my my father-in-law's uh handyman site my buddy's uh my buddy's sister's hairdresser site uh a little wordpress uh niche website that i was you know making at the time to learn wordpress my wordpress blog at the time that i was uh making to uh again try to work learn wordpress and have that as something i can put down as experience some of those other you know fake uh mock websites that i created i made a little like landing page website for my my friend that was a rapper that i worked with and that was his site there and then the little site that i was volunteering on over there so so that that was it and then i had my my uh updated and nicer looking contact which honestly i think i kept the same contact form i don't think i ever changed it after this except for maybe the colors so it's kind of funny and then yeah i was going crazy with css animate don't don't have too much stuff on your on your page that moves around i did that later on too which uh can get obnoxious you have to you have to have that you know just right you can't overdo that kind of stuff so all right let's let's move on to another commit here the complete site overhaul where was that where am i all right complete site overhaul let's look at this real quick all right let's get this commit copy let's look see the code all right it's still you know still it's a little a little sloppy in the formatting i don't know what was going on there that's a big commit i'm not gonna i'm not gonna go down that whole file but uh let's uh let's see what it looks like i copied that oh man i wasn't lying that was a complete site overhaul oh yeah so when i uh when i applied for my first job this you know i i kept the site looking a lot like this and this was the the the hero image that you would land on and the the lead front-end developer there when he opened up my portfolio in front of me just you know he let out like the biggest laugh because he was like oh that's an awesome picture you know so make sure you try to like show your personality in your portfolio have something that'll make you stand out a little bit more than the next person you know um it can be something subtle you know this was a picture i i took i told my wife i needed a good picture to try to try to take it was actually one of the first pictures we took and i was like you know what that's perfect that engulfs everything i stand for i'm a chill dude i i just like to code so i'm like on a hammock in my shorts and flip-flops just coding you know and that's kind of what what i wanted to present i i'm not a suit and tie person most devs aren't and i don't know why i ever thought i should have that kind of head shot and some people can pull it off i didn't i didn't like having the professional head shot there so this was more up my alley and then yeah so let's look at the rest of it let's look at the rest of it look at that the nitty gritty uh i don't know at the time i i i remember um when i got feedback on my resume i ended up taking taking out a lot of this stuff and seeing seeing this now is is pretty funny because uh i i was mentioning like the text editor i use and the operating system that i use and just stuff that people don't really care about um personal personal information you know it's good to have a sprinkle of that so i kept this short with one line but i don't know these things are always really hard to to get your message across and keep it a little bit personable and you know and capture everything that you want to say in a short you know couple paragraphs it's hard to do and apparently i didn't believe in putting that in a container because it is stretching clear across the page and that looks awful uh oh accessibility issues right there that hurts my eyes it still i can still read it but those colors are just yeesh i don't know i was going for loud colors i think what the the date what was that 2017 i think the thing was uh at this time was like these bright colors and web design was like big big letters and bright colors and and i don't know it it stood out it seemed a little different than than everything else and yeah and honestly that's it i think it was mostly just a color change from the previous one so that was my complete site overhaul on that so let's uh let's let's move forward a little bit let's get to let's get to the the first one that landed me my first job all right let's see what else i added there oh i got that little drop in there not bad not bad it actually looks a little better i got i got rid of some of those loud loud yellows that that were in there i put i put a container on this thing and changed some of the text oh yeah i remember i had i had these things here try to break that section up a little bit and uh you know i i felt like this was a better way of describing my skills at the time and then i had my courseware section so this is where i kind of fibbed a little bit and again i had projects in here that i coded 100 of my own like these here um but the fibbing came in where and i guess it wasn't fibbing i put the courseware projects that i've completed the truth is a lot of these other ones i just followed along with and i don't know if i was trying to fluff my portfolio i think at the time i was just trying to show people that i was eager and that i was building stuff that i was working on stuff and and i think that's why i put that up there i really don't know i i was just trying to i felt more was better at the time and honestly more is not always better so uh and then here we go we got the couple websites that i did honestly it's all the same stuff i just kind of changed the layout around and you know this is just a an html css and a javascript file and honestly there's not pretty much you know maybe maybe this might be the only bit of javascript that i'm that i'm doing in there and i might that might just be an anchor honestly so i i don't know it was it was really just an html and css website with the little you know css animate for that bouncing there and that was that's pretty much it you know that that was my first um portfolio that got me my first job right there um because yeah i started shortly after that here and let me see i don't even know why i kept adding to this portfolio afterwards because most people i guess you can see there there there it goes yeah most people when they get a job they tend to not touch their portfolio for a long time and uh so i'm curious as to why i felt that i kept needing to to add to it so yeah i'm not sure i i think this may be my my most recent yeah so you know honestly i guess i didn't add to it too much more after i i got my first job because then i i stopped this was this was it this was my last commit as an html css portfolio i ended up my next portfolio i built it in gatsby js which is a static site generator for react so i ported over like all the styles that i had but i started a brand new um clean you know from scratch gatsby app and ported over the styles and kind of built it in react just because it was extreme overkill to make it a react uh project but i really wanted to show that i was learning react and i wanted to show people that i was capable of of at least you know styling stuff in react i was using uh uh styled components at the time to that was really popular and i just really wanted to get into react so when i started looking for my my uh my next job i started coding it in react and that's kind of why i moved it over to gatsby just i figured if i'm going to be applying for react jobs i might as well make my portfolio and react but the funny thing is i ended up getting an angular job so all of that for nothing i could have just left it as an html and css portfolio and it would have made no difference so you know you live and you learn but it was good i learned a lot about gatsby i learned a lot about react just moving it over even though it's still kind of just a static you know single page website that wasn't really doing much but showing a couple images and some text again overkill but i i was doing it to learn and i figured it'd be good to update it and move it over to something that was more current and show that i knew how to use framework so yeah and you know we're gonna be showing that one next so here we go all right so i actually had to install gatsby and get all of this running because i'm actually on a newer machine and i haven't worked in react and gatsby in a really long time so i forgot i didn't even have it set up on uh my current macbook so yeah i got that all running and i was able to find uh the most uh the best commit to start showing everyone uh after i ported my styles over from my old portfolio that was html and css and then i moved everything over to gatsby and got that all running and set up i didn't want to show everyone that because it i was looking through the commits and it was boring stuff and and it was just kind of just moving all the styles over and nobody really wants to see that i'll show you more finished product and this is more finished products so this is um probably one of the you know first big updates after i had already been working for a while at my first real developer job and i decided that i wanted to kind of update my portfolio a little bit and touch it up to make it reflect what i knew and honestly i was testing the waters too to see if if maybe i was ready for another job because everyone knows the best way to get a raise as a developer is to get another job seriously though um i'm gonna make a video on that too in some other time and maybe i'll link it here anyways so here we have it i'm gonna reload this real quick to show the sweet animations that you know i added earlier i was telling everyone uh you know keep it keep it light with the animations because less is more sometimes and i was really proud of myself when i got this working you know my name coming in little arrow dropping down i believe i had that working in my html and css site but i didn't see it on when i was showing everyone so i'm not sure and here we go uh scroll into reveal i think is what it was called it's a react library plug it in definitely got better at trying to express my skills and how to lay them out you can also tell just by what this looks like after about this is probably about a year let's check this was so yeah this was about a year after i had already been working as a developer um just a little over a year because i started in june of 2017 uh at my first job so this was yeah this this was almost a year year uh as a dev so you can see how much how much better everything looks how much cleaner everything looks although there's a lot of stuff moving around on the screen i was able to lay it out and talk about it better i had more skills that i could talk about more things that i can kind of put on my portfolio and and yeah i'm actually looking at this and i'm i'm like all right this this is when i started getting good i i was you know i spent almost a year learning and i spent a year doing it professionally and you can see i kind of kept a lot of the same thing this was my first little attempt of being a graphic designer i found like the png with the uh the transparent backgrounds for the monitor screens and then i i took screenshots of some of the pages that i had built and put them put them on there to display this like this i was really proud of myself when i did this i'll be honest with you i was i'm not a graphic designer uh being a front-end developer i get to scratch that itch sometimes a little bit and this was one of my you know big big you know graphic design achievements whoa look at that uh that was pretty that was i i wasn't expecting that but yeah so there you have it that's the update when when i ported all the styles over and decided to make everything scroll a bit so let's just let's just try to get a little bit more current and see when i change a lot of the styles overall on there see real quick look at the code all right now you can tell i'm using formatters everything's a lot cleaner my code looks clean honestly there's not enough comments in this code that'd probably be one of the things that i would critique just looking at it but there's really not much to have the comment honestly it's just a little bit of css and whatnot but i remember i didn't comment as much as i should have and if you're if you're starting to teach yourself how to code make good use of comments make sure to comment as much as possible you'll thank yourself in the long run uh even if you use very good clean coding practices yes self-documenting code is good but good comments are very helpful and just use comments as much as possible if you feel that you're commenting enough you're probably not and you should comment some more and if you're not commenting then you really need to step it up and start commenting more on your code but all right so let's see this copy that let's go back to vs code real fast uh forgot gatsby running now and go over into here make sure i don't have any compile errors after because i might have a library that it's not supported or something but it doesn't seem like i have any issues unless the live reload oh look at that all right i changed it to be along the palette of uh the miami knights theme it's a like a sneaker color theme i'm from miami and i don't know i like i like these bright colors i see i i dimmed dimmed my background image a bit maybe it was making the letters hard to read so i put a little uh opaque overlay on there oh look at that i'm using a i think this is a a slick slider plug-in yeah that's a that's a that's a cool little plug-in that i think we were using at my job and i was like oh man maybe i can put that on my portfolio oh yeah another another library and that's what's cool if you're using like react or something there's a lot of libraries that you can use to make your portfolio look better uh you know i didn't code any of this from scratch i just figured out how to use that library there's you know there's no real magic here everything's a library i i'm not a 10x developer i'm just an average dev but average is good enough to get a job and honestly most developers are average there are some outstanding devs out there but most of them have been doing it for a really long time and if you've done something for most of your life you're going to be really good at it too but most of us are pretty average at least that's what i've i've noticed oh that same contact form like i said i just change i just change uh some borders and some colors and man that's that pink on white is really hard uh yeah i don't know why my my colors were my color choice was this but i like them and i think they stood out a lot but since these all kind of look the same i'm gonna just show my most recent portfolio because that was the big overhaul that i did from this style that you're seeing here to actually what it is now if you went to my live url um to see it let me see uh oh yeah so this is my most recent commit probably just around the time that i got hired at my most current job or was applying at my most current job seems the dates are lining up so let's check this commit real fast and i'll show you what it looked like um i updated it i really put a lot of effort into making it look as good as possible one of the designers i worked with at my previous job while i was applying for work he you know gave me a lot of feedback on my portfolio he helped me out with a little bit of the design on it and helped me make it look really good so let me just reload this because i don't know if i had the images dropping or anything i got rid of a lot of the scrolling a lot of the extra effects it was loud it uh it was jarring at times and it i i just i didn't like it the feedback i was getting from it from other developers that i knew um they kind of were just telling me to to tone it down a little bit for lack of better words so yeah this is uh my most recent portfolio if you if you go to my uh my my portfolio's url this is what you're gonna see there it says a little bit about where i was working what i was doing and here i i put everything i was using grid when i i did this with you know grid and flexbox so this is all mobile responsive uh using grid which of course i highlighted and talked about i talked about also everything that i worked on and i highlighted all my my skills in these um cool little you know images that i created again i was really proud of these i moved them over to to be a laptop rather than the old uh bulky uh mac monitor i thought it looked a little better and and it it seemed to add a good touch to it i added a uh nice svg background and just cleaned it up a bit it looks it looks way more professional it looks it looks a lot more clean and this is my most recent uh portfolio this is what uh i got my most current job with after about two years of experience almost two years of experience i was at my first job for about a year and nine months or a year and 10 months or so and so yeah this is what my portfolio looked like after being a professional developer for two years and what it looked like when i got my most recent job for a front-end developer job where i'm working at now um it's nothing too fancy i i think it looks good i'm i'm proud of it i know there's people out there that have portfolios that blow mine out of the water i i think i did a good job getting uh you know my point across into what i was capable of and showing some of my work and also i worked a lot on my resume which is huge i'll do a video on resume advice and how to seek it how to lay out your resume what what people look for in a resume i did a ton of research and work on my resume and i went through so many iterations that i'll make sure to make a video on that to to you know try to help people out who are trying to build their resume so if you stuck around this long and you watched all of this thank you this is probably going to be one of my longest videos i really wanted to show everyone kind of raw and uncut some of the progress and a real portfolio that got someone a job this this was my stuff this is what i worked on this is this is it um i don't work at facebook i don't work at google i i am not i'm you know i'm not the best developer but i'm also self-taught i've also been doing this for a short amount of time and i'd make pretty good money doing it i'm happy where i'm at i have a great job and it was all worth it i struggled it was it was a lot of hard work and it's going to be a lot of hard work for you but keep it up and just just keep at it alright i hope this video was helpful to anyone who is learning how to code and is doubtful that they'll be able to get a job trust me if you keep it up you'll do it you'll get a job the more you build the more you'll improve you saw it i showed you my crappy little portfolio from the start all the way up until my most recent portfolio which was just less than a year ago and it got me my current position so don't be doubtful when you're first starting out and you feel that you may never actually be able to accomplish this just persevere push through and trust me just keep working at it and you'll get good enough to get a job because i felt that way and i just kept going and i just kept going and i was able to get the job so if i did it you can do it too trust me with all that said if you enjoyed this video please make sure to like and subscribe to my channel for more videos like this oh one last thing i almost forgot make sure to check out this video here and this video here for more content that you might like

Channel: Dorian Develops

Views: 21,975

Rating: 4.9729958 out of 5

Keywords: web developer, programmer, software developer, software engineer, self-taught, developer, coder, engineer, portfolio, learn to code, learntocode, freecodecamp, free code camp, codenewbie, code newbie, code, web design, web designer

Id: DTI-OW1NuUE

Length: 36min 42sec (2202 seconds)

Published: Sat May 02 2020