Frontend Web Development Projects that got me hired

Here are the coding projects I did when building my first web development portfolio that landed me a job as a fronted developer. More importantly, I'll share why I did what I did and how my dev portfolio changed over time. Hopefully this will inspire you to come up with some good web project ideas for your own portfolio.
Watch next:
How to pass web development job interviews: • Pass CODING INTERVIEWS...
What I wish I knew starting out: • Learn Web Development ...
Frontend developer learning path: • Frontend Developer Roa...
Affiliate Links
📖 How to crush code interviews → amzn.to/3JGRHWZ
📖 Learn React.js → amzn.to/3mSA6lV
⌨️ Favorite keyboard for programming → amzn.to/3mIGHzd
💻 Favorite laptop for frontend development → amzn.to/3YP0iuY
🖥 Other stuff I use as a programmer → jamescrossjr.com/programming/...
📷 Gear I use for making KZbin Videos: jamescrossjr.com/youtube/gear
💰 VidIQ → Tool I used to grow my channel faster: vidiq.com/jamescross
Disclosure → How I make money with affiliate / paid links: jamescrossjr.com/affiliate-di... For example, As an Amazon Associate I earn from qualifying purchases.

[@jamescross]

Why even new programmers should consider starting a youtube channel: kzbin.info/www/bejne/h3qvqaCApa1pra8

[@fantasticpirate5196]

You are a good guy and your videos are helpful but the thumbnails in your videos look like clickbait .. Find something else to replace the ^shocked face^

[@tabathia7633]

Yes, I agree, I'm new?

[@amanuelkassa2026]

would you send me a link of your portfolio so that I can learn some staffs to add to mine

[@sprtlife6261]

Just got my first front end job after learning online for the past 10 months :) Super stoked! Hope you are recovering well, devsmak! :)

[@jamescross]

On the up and up. Congrats on the job!

[@yaredhaile9322]

congrats man!

[@anirudhkadian7866]

can i have your linkedin or twitter? need to ask a few questions

[@Mecagothits]

congrats congrats

[@ieatcrayons3322]

Congrats!

[@Nemkeez]

It was just today, I found up about your channel, and through 4 video clips I'm all ears and hooked up. Detailed with good flow, asking questions - giving answers and I like how videos end with even more relative and interesting topic that is linked in another video, making transition smooth and making you to pay attention and keep going. So far so good, got already very nice inputs that I will work my way around them, as someone who has been studying HTML, CSS and JS for 4 months now. Thank you!

[@jamescross]

thanks! appreciate the feedback!

[@stevanblagojevic1362]

je l si nasao posao brate

[@David_Liu93]

Hands down this is one of the best yt channels on web development. Tons of practical information and real personal experience. Thanks a lot for the great content.

[@jamescross]

Wow, thanks!

[@WaAaAaAaW]

this this channel is invaluable when it comes to practical information no-nonsense

[@gavincoulson3900]

Glad to see you’re doing a lot better!

[@jamescross]

Improving a little each day. Thanks!

[@BucketHatMan1216]

This was amazing. Please continue to put out quality content.

[@jamescross]

thanks! will do.

[@Arinze1]

First time on this channel and I just subscribed. I'm just starting my journey in web development still learning html. This is a really helpful advice

[@pamelathompson6783]

Dude, you are so awesome!!! Thank you so much!! I am watching all your videos 🥹🙏 I decided I wanted to learn how code thanks to you! I am so motivated and excited for my new journey Thank you! Thank you! God bless you and your family ❤️

[@jamescross]

My pleasure! Best wishes on the new journey!

[@DustinJamesClark]

Thank you for your amazing advice, brother 🙏🏼

[@beatlejuice4915]

Thanks so much man, I struggle immensely with becoming creative and how I should stick out!

[@jamescross]

Happy to help!

[@classicmakersmusic6344]

But still able to explain each stage in a basic manner. Honestly thanks man!

[@jamescross]

Thanks for the feedback!

[@sp1n0x36]

Damn! Worked like a charm! Thank you soooo much!

[@hydra_is_dehydrated]

Good to see you mate !! you’re a motivator 🙌☺️

[@jamescross]

Thanks!

[@rootloop2641]

This is awesome advice. Thank you 🙏🏽

[@jamescross]

You're so welcome!

[@pedrooliveira-yu7yz]

Thank you for everything. Your motivating people to change lives.

[@jamescross]

You are so welcome!

[@pedrooliveira-yu7yz]

I Just started my journey here in Brasil after saving up to buy a decent nootbook studying HTML,CSS, Java and React. Main Focus is front end stuff. Learning ALL in KZbin. I learn english and watch everything in english. Im so Glad i found your Channel.

[@Gabriel-pj6dx]

@@pedrooliveira-yu7yz boa lek

[@kehkashanakram5176]

you just changed by whole approach of learning and implementation thanks, now I know what I was doing wrong

[@Ezekiel_unabor]

You got a subscriber. I wish you the best.🎉

[@tabathia7633]

Man, you got brains. This is very informative. Yes, you learn wht you have learned, then you went and it something on your own. Wow, that's not easy doing all of this on your own. I do know HTML and CSS. But, this is my new challenge, to follow in your footsteps. Challenging yourself, is your key, and I would expect not only did you earn extra money, but gained something that money can't compare, Confidence! In addition, as Frank S.quoted, "And, Did it My Way." Wonderful! 🤩🤩

[@jamescross]

thanks

[@SahilBhosale08]

Good to see you doing well , Take Care and as usual Great Video!!

[@jamescross]

Thanks 👍. On the up and up. Was more challenging than usual to make a video. Still dealing with some effects from the concussion and shoulder injury.

[@SahilBhosale08]

@@jamescross Take rest , Videos can be made after, what's important is your health recover fast and then make videos , Now rest , exercise and rehab well🙌

[@jamescross]

Thanks. My video editing will probably be much simpler for awhile as I ease back into things. Have a great day!

[@SanMati14]

I've seen a couple of videos about Junior webdev projects and this is the best, like I can see the Junior experience on these ones, on other videos they just show a full webpage or a portfolio about a dude being a 1+ year experience webdev.

[@jonathonshuler7275]

LDS gang! really enjoying your vids everyday on this ole programming journey.

[@jamescross]

Glad you enjoy it!

[@blueberry5992]

The first time ever I watched ur video I didn't unfortunately get ur point. Just watched maybe for fun, maybe as a productive way to procrastinate or maybe by curiosity and to be conivinced that I learned sth useful . After falling into the tutorial hell with the intention just to build an amazing portfolio with React.js projects and get a job while I figuired out that I cannot build a simple static webpage with basic html and css concepts, I think that really understood ur valuable advice of BUILD PROJECTS SOLY WITH WHAT YOU LEARND;

[@lakshanperera9735]

thank for these content

[@Dawid32A]

By far the best tutorial i found to tNice tutorials in a short ti

[@Spanglish-Gamer]

Dope. Need to learn to make my sites

[@codingwithbobbysiharath3184]

That's awesome! I would probably do something for pharmacy dose calculations or Amazon seller profit calculator 👍👍👍

[@jamescross]

I like those ideas. More unique plus commercial related.

[@marinaescribano6451]

I LOVE THIS

[@ztq9117]

That cricket crunchers hard

[@mascode1]

Awesome video!!

[@jamescross]

Thanks!

[@patrickconrad396]

Damn I've been overcomplicating my whole process. I'm building these massive complex full stack projects and working full time at crappy jobs just trying to get by until I could get a job and u kinda just showed me I've had the skills yo get a job for a couple years at this point 🤦‍♂️

[@jamescross]

Don't consider it wasted. You've got more skills which is great, especially if your more complex projects are commercial in nature. Best wishes!

[@wristocrat]

Job market is pretty rough right now. They pretty much mandate bachelors degree now. Lots of hungry, bright, CS people coming into the country for opportunities at early ages AND outsourcing their skills to the US. I’ve had a hard time finding a job in the space even after I shipped a pretty cool cross platform software that implements AI and stuff. They don’t even want to entertain self taught people unless they have a degree and experience at a BIG company. Maybe I’m pessimistic. Either way, I’m working on finishing my bachelors just to be safe

[@patrickconrad396]

@@wristocrat I definitely think this is a pessimistic view. I've definitely seen plenty of jobs out there. My problem is more that I've over engineered most projects I've built and I always run into issues with projects that make it hard to fully complete them. Or I do dumb things like rewrite apps in typescript from js or rebuild on next js instead of react..... this video showed me that just building complete projects and showing I know what I'm doing is important not just the scale of the projects. Definitely get your degree it's important but mostly to show you finished things you start. I don't think others definitely need a degree in cs to get a job tho.

[@jamescross]

@@wristocrat It can be hard to get into BIG companies even with a degree. For the first job, I would be open to most anything even smaller companies to get a foot in and start getting experience and then in a year or two try moving to a mid size company or larger. Self-taught devs who jump straight to a FAANG company often have some other experience that stands out, like a math degree from an Ivy League with a great gpa or similar non-typical traits.

[@sqwert654]

Im interested in using my 4 player Mahjong objective c code. Using Go to code something players can log in and play other players. Already have the game logic and netcode that works over bluetooth on iOS. No idea how hard this would be, have a Unity version in 3D, perhaps I could use that as a front end and use Go for the server.

[@HLB512]

Good video. DId you hand code everything? what software should potential front end developers use?

[@TheGonzo458]

You may have mentioned this in one of your videos already and I apologize I haven’t been able to watch them all, but did you have to relocate the family for any of the development jobs you’ve had? Great channel btw. I’m switching over from construction as well and I appreciate your channel, man.

[@jamescross]

Not forced to relocate, but did have some really long commutes for awhile. Several years of hour to hour and a half each way.

[@ColdSteel-dz3pf]

Big respect for incorporating your faith 🙏🏽

[@jamescross]

thanks

[@loganmurray1154]

Could you edit your videos with sections (timestamps) or chunks. I like to skip around sometimes or even come back to a specific section.

[@kelle_li]

Hi James, thanks for the insights. What book are you referring too at 1:02 ? Thanks!

[@jamescross]

I had several. Don't remember the name of that one exactly. Most would be pretty outdated by now. Was right before ES6 syntax started getting a lot of traction.

[@KayakCrave]

Thanks for all the info! Quick question, you mentioned you read a JavaScript book. What book would you recommend for a beginner?

[@jamescross]

Most of the books I read would be outdated now. I think often books cover so much detail it's easy to get lost. I think free code camp is a great place to start.

[@tamis5908]

The book he referenced was Head First Javascript by Eric Freeman, Elisabeth Robson. They first build a simple version of Battleship, then later on build a more complete version. The book uses a very conversational approach to learning. It is pre-ES6, but is a great way to learn JS basic core concepts. It was the first in-depth book I used in learning JS.

[@jamescross]

Thanks. Pretty sure that was it. Gave it away so couldn't remember.

[@ahmedbathily7013]

JavaScript the definitive guide the most popular language in the world by David Flanagan is the very complete book and very updated the latest version of JavaScript

[@jf404]

I need this but for backend

[@FineOldChap]

Haha when you said your church had a coding challenge, I had a feeling you might be in Utah. Thanks for the thoughtful video!

[@jamescross]

are you in utah?

[@FineOldChap]

@@jamescross I am. It's seems like there is a great coding community here that I'm trying to get into while learning in my spare time. If you have any suggestions for web dev meet ups I'd love to hear them 🙌

[@jamescross]

The main one I went to was utahjs, there was also a react one and angular one in the area that I also liked.

[@bhargavkumar]

Hi Good to see you again, hope you are doing well. I just wanna ask you a question, I am about to build my personal portfolio website so I can get a job, but I am thinking to host it on a free service like Netlify because I currently don't have that much money to buy a domain and hosting. But what do you say? Should I go for a paid hosting instead or the free one is good for now?

[@jamescross]

I think long term it's good to have a domain if you can get yourname.com even if you don't want to pay for hosting. You will likely regret it if it gets taken if it's not already. That said, the free hosting should be fine to get started. I typically pay for hosting, but only do it while job searching and then take it down but keep the domain registered. Really wish I could have gotten my name domain but someone else owns it.

[@critical_awareness7587]

Okay, but how do you even know what options are possible? As far as problem solving. Like for example, when you talk about the contact list and forwarding it to your boss's phone through (some word you said)😅. I mean that proves my point. I dont know about it, to know that option exist. Did you work on a project before that introduced that option? Or you just knew it was possible because of "notifications" and looked it up? Was it part of one of the frameworks you knew of after making a list of languages and their frameworks, like you suggest in another video? Your videos are simple to understand and very helpful. I am going through them now, and find your content genuine and i appreciate hearing your experiences.

[@jamescross]

You describe how I felt starting. That is one of the hard parts. I had an idea of what I wanted to do and spent a lot of time with Google asking "How do I do xyz with Javascript?" I was also attending some local Javascript and Angular meetups where people presented projects they were working on and some gave walkthroughs on how to use tools. That also introduced me to some cool libraries and tools I hadn't heard of. I think that is where I heard about the Twilio tool you are referencing. Best wishes!

[@user-yt1ry9tm8w]

Very good

[@frizzcorp5066]

it work on my pc thx bro vеry much

[@shivamgupta5085]

Maximilian and Stephen grider which course should I choose for reactjs

[@skynet7067]

could you tell me a place from where to learn and code that a front-end developer writes while working with javascript.

[@gurjaapsingh4694]

For a CS major in a university who plans to use his macbook for the next 4 years would u rather have the 16gb m1 or the 8gb m2? Thank you!

[@jamescross]

all else equal. my personal preference is 16gb ram, but you gotta do what's best for you. if you already have a laptop i would use that to start and once you have a better idea of what direction you want to go with programming, then upgrade.

[@gurjaapsingh4694]

@@jamescross Thank you bro! Ive been hearing that 8gb of ram won't survive me through 4 years studying computer science at a university. Then others say something about macbook's having really good optimization so 8gb is sufficient and I'm so lost lmaooo

[@Wellunknownbmx]

@@gurjaapsingh4694 I’m finishing a computer science degree on a 2017 MacBook air with 8gb. You’re most likely not going to work on projects that need a powerful computer but if you’re going to buy one go with a 16gb, it will last longer.

[@stellanwae5050]

This is amazing. Which books were you using to learn JavaScript?

[@jamescross]

Thanks. Probably wouldn't be super helpful because a lot has changed since then. There are also a ton of online resources and tutorials compared to then. It would be best to focus on more current stuff. Best wishes.

[@ibaagorotv]

I have learned HTML and css thou I just built a static blog page making use of css grid, flex box and few transform properties like scale, translate and positioning. Is that project ok to move to JS or I should add more before moving to JS. Please advice me because I planned on quitting my current job and devote 3 months to learning JS and React with minimum of 10 hours per day.

[@THEBIGDROPP]

I don't think you should do 10 hours a day, devote about 4 hours a day to it, you'll recall the information better, don't take this risk.

[@ibaagorotv]

@@THEBIGDROPP so I can start learning JavaScript with 4 hours a day ?

[@atbmts6]

@@ibaagorotv start JavaScript and learn the foundations for that. Come back and master your other skills after you have a basic grasp on JavaScript

[@walkemdown4127]

@@ibaagorotv you dont even need 4 hours a day. even 30 mins to an hour a day, every day is great, as long as you are consistently learning & doing it often enough to retain the info

[@codeitraw5241]

Hey I’m in Utah. I’m doing Frontend self taught. I’m constantly looking for jobs but it’s been hard. Is there any guide for a self taught? How do you find the right jobs in Utah?

[@jamescross]

Here are some ideas. kzbin.info/www/bejne/moqploGcndOXZ5o

[@_Real_Nooobbb]

I’m learning web dev around 1 month but couple of days before I found that some ex web developer saying that web dev is much stress-full than any other works you’ve to work all the time and also have to anxious about your work and they were also mentally and physically became unstable .Most of them weren’t happy about there job and they left it . Now I’m getting confused should I continue learning or change my career strategy. Pls help me to decide 😌

[@jamescross]

There are a ton of different company cultures and then some people just don't enjoy it. It's not for everyone, but tons of people like it. I like it way more than construction. Like any jobs there will be ups and downs. To avoid ending up at a bad company, I ask tons of questions about company culture during interviews. I would base a decision off of one ranting ex dev or even off of just my own opinion. Maybe go to some programming meetups and ask a bunch of devs what they like and don't like about their job and then make a decision.

[@_Real_Nooobbb]

Thanks a lot

[@noorrijja]

Hii Since I am new to web development and want to secure an internship, I had to ask that can I use frontend mentor projects (premium ones, since they offer a nice amount of learnings) to showcase in my portfolio, would that be enough to land my first internship?

[@pollymat991]

Aplly what yu learned to your pojects and showcase a variety of concepts. That's the why. Test and explore. Project based learning pretty much.

[@skynet7067]

I attend front-end courses, but when it comes to JavaScript, there are only math tasks in the courses, and I'm not strong there.

[@nhungnguyen-pi9lf]

Hay quá

[@awwww...7488]

I was expecting a pure frontend, but I guess that doesnt really exist for beginner developers. Every frontend developer still need backend knowledge.

[@jamescross]

most of these were purely frontend. the contact manager used a backend but firebase is designed so you don't have to know everything about the backend. (backend as a service or baas) there are tutorials on the initial configurations and security rules and how to connect. it handles setting up the databases and that other stuff. wasn't that hard to set up. for anything but trivial projects, frontend devs will need to know how to connect to backends whether that's with api requests or websockets.

[@kabeerahmad26]

How much time did you take to land your first web development job?

[@jfc350]

Hey @devsmak if you dont mind me asking what books did you read that you mentioned in the video?

[@jamescross]

This book had the battleship game: amzn.to/3UB2QLs I also like this series for learning more about scope and technical details of JavaScript amzn.to/3UfCtLv . This was good on object oriented JavaScript amzn.to/3UhIiYE . There were others and I don’t remember which one I used to learn Angular.js, but keep in mind that these came out and then ES6 syntax became popular so some things won’t be covered in these books though they will give good foundational help with JavaScript. Angular.js wouldn’t be worth learning since the newer Angular is way better. So for frameworks, look for more recent stuff for sure.

[@tm---]

Should I learn Vanilla JavaScript in depth 🤔 or hop to react js after getting the basics of js? ALSO, did you use javascript for dsa or some other language!

[@CapeSkill]

learn js before react

[@ajiteshmishra]

learn basic of js then clear all the array methods then start learning react and keep learning js in parallel, for das there is an amazing on going course yt channel name codevolution, but do it after you have some grasp on react or you can start dsa instead of react in first place and later start learning react when you have some good knowledge in dsa and problem solving.

[@tm---]

@@ajiteshmishra thanks 👍

[@tm---]

@@CapeSkill thanks 🙏

[@carldrogo9492]

What's DSA?

[@g-kems]

Can you make a list please?

[@ArisAris-fs1ip]

Good afternoon, Please give me your help! S O S So im starting my pizza restaurant website, with full e-commerce features. The question is this: The owners admin dashboard, where he receives the food orders and editing , putting or delete products, and the customer's interface, where he enters and orders food, send order and pay, are 2 separates websites/react apps/projects, or should be the same project with customer login and admin login???

[@jamescross]

I've seen it both ways. An advantage of separate is that it will be harder for bad actors to find the admin site whereas if it is all one, it's easier for them to snoop the code looking for potential vulnerabilities. With combined you have to be more vigilant with page by page security enforcement to prevent visitors from accidentally accessing admin stuff or other customer info. When separate, you can block the entire app from non authorized users. I tend to prefer separate.

[@ArisAris-fs1ip]

@@jamescross OK, I'll take your words, separate! Something else, since it's only for the recruiters to check, I believe it would be wrong to put login authorization, since these guys won't spend an hour to see my app. What's your opinion on that?

[@jamescross]

Is the site only being built to show recruiters? Or are you wondering about giving them login access?

[@ArisAris-fs1ip]

@@jamescross I want an e-commerce with only purpose to be shown to recruiters only but to impress them the maximum possible way.

[@jamescross]

then you could probably just create a guest login account for them since there won't be actual customer data. Probably the best way to impress is to build something that actually gets used. Like what if you built this so that a user can change the logo, add and edit a menu with pictures and stuff like that. Just an idea.

[@risukuri7418]

would have it loaded up on their laptop and I’d ALWAYS assu they stole it. I’m older and I thought about cracking it again but I plan on

[@wyea]

Hi James. Is there currently portfolio website of your projects? I've visited your website but I still didn't find it. I'm sorry if in any case I actually miss this information through this video

[@jamescross]

In the past I typically update it and then deploy it while looking for a job and then once I get a new job I take it down to not pay for hosting. At this point, not sure I will update since at this point I have enough experience that the portfolio doesn't carry as much weight as my resume itself and I would need special approval to include screenshots of my current work.

[@zenel5685]

Hi, should I build my own projects or projects I've copied or both?

[@jamescross]

your own will be better for getting a job

[@gardensindeze2568]

i have a chance to develop a website for small money saving and lend organization but not have enough skill what do you suggest me

[@pratikshamangrulkar70]

hey i closed the tabs and my pc got restart for some reason how to go back and reopen all of this

[@SemogEnaz-sr8tr]

😂😂😂

[@stranger9951]

Hi, what courses did you take?

[@pedrooliveira-yu7yz]

Greetings from Brasil

[@jamescross]

olá

[@PangeaPrime]

Had an interview the other day first ever web dev Interview didn't get. Getting rejections from right to left how can I cope it's getting me down and depression is kicking in

[@eduardolongoria3744]

Why did they reject you?

[@alhassanbaabaabdullahi2777]

did you watch some tutorials when you were building these projects?

[@jamescross]

I was learning from tutorials but then tried to apply them in different ways. For example, I learned about using arrays to form a matrix for a battleship game and then applied what I learned to making the garden furrows in the javascript game, but it wasn't just copy pasting.

[@foodheaven4461]

Hii sir, I from India and i started my B. TECH IN CSE so sir guide me how started front end web developer

[@jamescross]

Here are some good resources to start with kzbin.info/www/bejne/Z2WQqXWCnb9nd6c

[@ganeshtiwari2550]

brother i m from commerce graduation complete at 28 now thinking to make switch in front end development can u suggest

[@jamescross]

I switched in my early 30s so it's not too late. Only you can decide if it's right for you.

[@nickgleaves4863]

Right now I am using free code camp and codecademy. Is there anything else you suggest doing?

[@jamescross]

I share some more options in this video: kzbin.info/www/bejne/Z2WQqXWCnb9nd6c You can skip past the first section on free code camp if you want.

[@senorarty6745]

your videos are always super helpful, but please please, you're above the "soyface" thumbnail man

[@berry7751]

Is web development all about being creative

[@jamescross]

problem solving yes. creative visually. depends on your interests. usually you work with a designer but it can be beneficial at least having an eye for what looks good.

[@Philson]

Hmm.. But how long ago was this? I think it's more cutthroat out there right now.

[@jamescross]

That's what was being said when I started too. A relative of mine got a job last year with less stuff than in my portfolio. So...

[@randynorth4126]

How much math do you need for front end work?

[@jamescross]

kzbin.info/www/bejne/hn7MqY16hq2BsLs

[@guilhermeh.v.santos7424]

Feijão doce... 😵

[@nice_man932]

I am searching for jop maybe for 6 months know And steal I can't find a jop I start learning maybe before 2 years and I didn't get any money on tell know What I have to do

[@ajiteshmishra]

try a internship for 3 month after that there will be higher chance of getting a job

[@skynet7067]

Do you need math to be a front-end developer ?

[@jamescross]

basic is math is needed for a lot of things. Some areas like finance and statistics based applications will require more understanding of math.

[@carldrogo9492]

Just basic arithmetic and rudimentary algebra, nothing high level is needed.

[@frontendanalysis5205]

Can you do review about my project? I would like to intern as a Frontend Engineer.

[@lovehalfblack9420]

How many coders are at your church? 🤣

[@jamescross]

Working for it? Last I heard around 1200 in IT, not sure how many write software. Church members who are programmers? Not sure. In the contest there were a couple hundred entries.

[@lovehalfblack9420]

@@jamescross wow that’s a lot! You must have a large church !

[@lovehalfblack9420]

@@jamescross thanks for sharing all of this btw!

[@jamescross]

Yeah, looks like the congregation count is over 30,000 now. www.churchofjesuschrist.org/learn/about-us?lang=eng

[@paulolorenzo6155]

hahahah affter 4 years i haven't even learned how to use photoshop Good how can i master tNice tutorials one xd

[@jhonnelgarcia8407]

1st

[@susmore8575]

Whats your opinion on UX Design?

[@thanhluong5572]

Hay quá