Frontend Web Development Projects that got me hired

a lot of folks have asked me about the front end projects that i did that got me hired so let's talk about those but more importantly why i chose them now if you intend to just watch this video to the end and walk away with a plan to just copy what i did so you can get a web development job then you've totally missed the point instead focus more on the progression of things and the why and then apply that to your own situation and interest hopefully this helps you come up with your own ideas for a web development portfolio so let's get started my very first project was a simple html web page no javascript and that's because i hadn't started learning javascript it was meant to be a silly page that was kind of a joke for example it had a menu bar and if you mouse over any of the buttons in the navigation the other buttons would shift apart so that you couldn't actually click on anything and stuff like that my goals for the site were to learn to structure a basic page with the headers basic navigation a sidebar content and footers and to learn some basic css as well as have some fun along the way keeping it simple enough that i could complete it quickly it was never my intention to turn that into anything serious i then started reading a book on javascript and once i got a little ways in i decided i wanted to apply some of the concepts that i was learning so i was trying to figure out a simple problem that i could work to solve with javascript and it just so happens that i was in a conversation with someone and they asked me how old i was i had a complete brain fart i was off by a year so i decided to make an age calculator that accepted a birth date and then returned your age my goal here was to learn how to use forms and some basic javascript to do the calculation and then update the dom on a button click the page itself was super simple it's basically a blank page with a little widget in the center and i tried to use some css that i just learned so i could make the borders round on the corners and things like that and i was introduced to handling different scenarios or use cases in javascript because the calculation had to be different depending on whether the birth date occurred before or after the current day well that was fun but what else could i do i decided to use the same basic widget structure and then make a countdown timer because i just read about set timeout and set interval and i wanted to do something with those now up to this point the projects were really pretty simple and trivial but they let me apply what i was learning and then that way i could get some quick successes that helped me to stay excited and motivated my next project was a little bit more involved one of the javascript books that i was reading talked about making a battleship game and about the same time that i finished reading this section my church announced a code challenge contest where they encouraged you to build some app or some game based on a gospel topic in a short amount of time challenge accepted i took some of the concepts i had learned from that battleship lesson and adapted it to a simple game i called cricket cruncher that i thought might be fun for my kids the basic concept was that there was a farm field with a bunch of different crops in it and there were crickets randomly hidden throughout the field you would pick a vegetable and if it was hiding a cricket you would be asked a gospel related question if you answered incorrectly the cricket would hop off and escape but if you answered it correctly a sequel would fly down and crunch it in its beak a nod to pioneer history in utah this ended up requiring a lot more effort than i originally thought and i barely finished in time by the deadline my kids liked it but it couldn't really compete with a lot of the other submissions my goal for this project was to incorporate concepts of prototypal inheritance learn how to work with sprite images and get some experience with css animations i hope you're seeing the pattern here i'm focusing on applying what i learned to something without just copying someone else's code by this point i'm also thinking about building a portfolio of projects that showcases a variety of concepts and if this is helpful don't forget to give it a thumbs up and consider subscribing thanks at this stage i was diving into deeper concepts in html like semantic html and different kinds of things that you could do with the dom like including audio and one of my hobbies happened to be metal detecting and i had tried out a metal detector called the technetix eurotech pro i thought it might be cool to create a simulator for this particular metal detector i grabbed one of the marketing images from the manufacturer's website to use as a background and then i dissected that image into a bunch of smaller sections and photoshop different versions of the sections to represent different states of the metal detector on the html page as building i position transparent buttons over the background image buttons and use javascript to make the melodector interactive so that you could click through the different settings and menu options i then used a handheld recorder to record the actual sounds of the real metal detector and then cut that up into smaller audio clips so that i could trigger audio that matched the different interactions of the metal detector and i was super excited about this picking projects like this that really excited me just helped keep me motivated each project could grow bigger and a little bit bigger in complexity without me getting super stuck since i kept building off of the stuff that i had just learned now it's time to get a little more strategic with my portfolio the age calculator and the timer they're somewhat run-of-the-mill and not that impressive my other stuff was more unique and tied into my interests and hobbies but that alone wouldn't likely sell a future employer on me as a potential hire and from this point on i'm not gonna be sharing pictures of the projects we'll be talking about because that's stuff that is owned by actual companies and i have not asked them permission to include the screenshots here but that shouldn't really matter since the value is in the concepts you see at this point i started looking for projects that could help my employer in the construction industry i built a handful of niche information microsites which are smaller websites maybe like five to ten pages of articles that could be used for marketing or as landing pages for ad campaigns i designed the look at fill of each page including the banners and the graphics and building these small sites allowed me to learn how to do navigation and i was also able to learn how to have reusable sections with php includes even though these are still simple static websites my goal is to build things with commercial intent build things similar to what real companies were paying to have built sure these were far from the complexities of a commerce site but it was a starting point for relevant job interview discussions best of all the efforts paid off since my microsites landed a big project which led to me doing a lot more stuff related to web development and computers for the company i kind of created my own position where i could start getting some relevant experience around this time i started attending local javascript meetups and i learned about single page applications they sounded really cool so then i started attending angularjs meetups after hearing some relatives talking about angular it was apparent that this was in hot demand and companies wanted devs with angular experience instead of backbone and jquery and some of that other stuff i had heard about i decided to ride that trend and jumped into some of the old school angularjs because i wanted to build something helpful that was way better than my static websites something that could really showcase what i could do it took some thinking but i decided that it's going to build a contact management application for my employer at the time because one of the problems was that when people would call in and leave messages they recorded on those little paper message slips that you would write on and tear it off and hand to whoever had received that call and they would just get lost if the boss asked for a phone number for someone who had called a few months back it may or may not be found so i started off with building a simple application there was just a table with a list of contacts with their name their company phone number and some notes about the call you could press a button and you're prompted to add a new contact you could also remove a contact from the table and i hooked this up to firebase so that that would handle the backend for me now i tried to think of some other features that would be both useful for this company as well as have some appeal to future employers i integrated the application with a tool called twilio so that on a click of a button the contact information was sent off to the boss's phone and then i worked on adding additional features including a field for how we were contacted and then from there i was able to add in some analytical charts so you could see where most of the calls were coming from and get some other useful insights and this worked out really well as then put over updating the company's main website and adding a blog for the company and then i took all that stuff that i had been building and i put it together in a portfolio site that i built using angularjs to showcase the projects with descriptions of the different concepts that were involved with those projects and then i even included some of the better design pieces that i had done for some of those micro sites i'll talk about how this portfolio evolved in a second but my first official software development job offer came because of these projects that i just talked about and the most impactful projects were the contact management application the blog and those micro sites i brought an ipad to the interview and i was able to show the different projects that i worked about and talk about the different aspects of web development i could demonstrate this visually because my portfolio showed that i had done something with all the core concepts of html css and javascript the company was looking for angular experience and even had a one hour section of the interview dedicated to angular and writing on that angularjs trend really helped me to land that job now after this first job i revised my personal web development portfolio and shifted to something that was more visual with lots of thumbnails of stuff that i had worked on including this first enterprise job a quick word of caution here some companies aren't going to want you to share screenshots of your project so be respectful of that i try to follow fair use principles and include only smaller partial screenshots rather than showing the entire app designs it's also super super important not to share private company information or customer data for any of the screenshots i would first edit the page to use names like fake person one or john doe and fake email one and phone numbers that were just all zeros to make it very clear that it was all fake data don't share real data or sensitive parts of applications okay when it came time to apply for my next job i put all that new work i had just done front and center followed up by the commercial stuff from my previous employer and then i back burnered the metal detector app and the game i dropped the timer and age widgets completely because they're just trivial in nature and the project seemed to distract more than help my messaging at this point eventually i had enough examples of professional stuff that i let that old stuff go and removed even the related code from github because it just no longer represented what i could do let's face it the early code just is not that great when you go back and look at it and there's no need to hang on to it as you get better now having a good dev portfolio is great and all but it's only part of getting a good programming job you should check out this video to learn the other things you must know if you want to land that first dev job thanks for watching and i'll see you in the next one late

Channel: James Cross

Views: 223,250

Keywords: devsmack, devsmak, web developer portfolio, web development, web developer portfolio projects, web developer, portfolio website, web development portfolio, web developer portfolio review, junior developer portfolio, developer portfolio, web dev portfolio, web development portfolio tips, junior web developer portfolio review, portfolio review web dev, web development portfolio review, web development portfolio tutorial, frontend developer projects, beginner developer project

Id: tCHSzNXbNq4

Length: 10min 37sec (637 seconds)

Published: Tue Jul 05 2022