Request: Ideas and tips for creating a portfolio to get a web developer job
Hi everyone — I am trying to get a job in web development after a decade in a mostly unrelated field.
I am looking for ideas and tips to create a portfolio to send with applications. All of the websites I worked on ages ago have been taken offline or redesigned by someone else. I do have a website I created for my music, but it’s just vanilla HTML. I also have a personal website which is really the only thing I have to show.
I know HTML/CSS quite well, but that’s basically it. I’ve worked with WordPress for years but only just recently began learning enough PHP to do anything custom. I don’t really know Javascript much at all.
I have quite a few paid courses through Udemy for all these different areas but even as I have completed them, I don’t feel confident in knowledge of the different languages. These courses nearly always come with projects that the students create with the instructor. Should I use these as part of my portfolio? For some reason I never felt right doing that, since I didn’t build it myself.
So I guess I’m curious (if any of you are web developers) if you have suggestions for how to fill out a portfolio without any previous work examples.
Side note: I wasn’t sure how to word the title or my question particularly well so please edit it more clearly, Those Who Can Edit.
edit: thank you to everyone who took the time to reply to this. it’s all been very helpful and i appreciate everyone’s input immensely!
With only HTML and CSS in your pocket, you are probably best suited for a design job. So design something! It doesn't have to be anything specific, just make a webpage with lots of variety to it that demonstrates as many parts of CSS as you can manage. The content is secondary; the most important part is how it looks (though I'd probably not use placeholder text for the finished product). It might help you out if you stop thinking of it as a portfolio page and more of a personal project to demonstrate what you've learned. Or perhaps make your personal website your portfolio project! Just take some time to zhuzh it up.
But more than anything, I would recommend continuing to learn more web development technologies, because most web development jobs will require you know more than just HTML and CSS. In particular I would recommend putting PHP on hold and learning Javascript. It's more valuable to you as a developer since it's something that can be used in both frontend and backend, so there's a good chance that you'll need to know it for just about any role. Most jobs these days will require you to be familliar with one of the big javascript frameworks, so you're going to want to make sure you have good mastery over the language as a minimum. Adding interactivity is a good way to make your portfolio pages "pop", as well.
hey, thanks for the reply!
do you have a suggestion or any insight on choosing a javascript framework? i know there's no "right answer" and i see a lot of them in job postings but i am curious of your opinion. thanks again!
There are many, but the last time I checked (which has been quite some time now) React was the biggest by far.
React & Vue are the big two that are popular right now, in my experience. Maybe take a look at stuff like Ionic if you want to include PWA in your portfolio.
Stack Overflow does surveys every year asking questions about this. They get numbers on what people like to use and what they use at work.
This seems like good advice. I would add that creating a real project, rather than just a hypothetical one could carry more weight to a hiring manager. You could build a website for some sort of non profit. A humane society, or some smaller town or city that doesn't already have something decent. It would give you real world problems to solve, and when you're done you can also get a reference to add to your resume. I think references like this are worth more than a previous co-worker or friend depending on who your current references are that may not be necessary. I would also try to gauge the project beforehand and pick something that will demonstrate as many of your skills and features that you add to the website as possible.
I did something like this about a year ago. Shameless plug for the end result: https://quotable.raybetter.com
I had been collecting quotes for years, so I decided to make a site to host them. It's a small enough problem that it didn't bankrupt me for time, but touches all the interesting pieces of the stack that I wanted to be able to demonstrate: front end (vue), back end (golang), OpenAPI documentation, database migrations, backups, helm charts, kubernetes clusters, etc.
If you are starting out, it doesn't have to be a full stack app like this. It could just be some JS front end apps with a local (non-persistent) state store.
But whatever you choose, here's the important bit:
As I was building it, I kept a text file that was essentially a journal of what I was doing: what kinds of problems I was trying to solve (how to set up a project directory for both a Golang backend and a JS frontend), decisions I made (like which version of Vue to use), links to tutorials that were useful. Specific steps for configuration and deployment that worked.
The purpose of this journal was not to provide developer documentation (although I did refer to it often when writing documentation), but rather to provide a linear history of what I had done. When someone technical wants to know about my development skills, I offer to add them read only to the GitHub repo so they can read the log and look at the code.
One of the things that you can do with the log is include a list of TODO items. These can be minor bugs, architecture improvements you want to make, features your want to add, or steps you know need to be back filled. For example, I want to rearchitect the back end, add unit tests for the front end, and improve the admin interface for adding quotes. Because you can't do everything at once, this is helpful to avoid criticism for things you haven't gotten to.
I think this is a pretty powerful approach because it not only reveals your skills through the end product, it also reveals your thought processes.
It also makes a handy reference if you want to see how you solved a particular problem a long time later. Your future self will thank you.
I'm going to recommend this great free resource for web development called JS30 :
https://javascript30.com/
It's a great set of exercises for adding JS to specific webpages. They provide the HTML and CSS and your job is to make the page functional with JS.
I recommend for two reasons:
1- As someone else said, learning JS I think is going to be a great asset for the future. You can watch the videos and just repeat what they do and maybe start googling how the stuff works as a kickstarter for learning.
2- The exercises are built around very common functionality in the web, and will teach you about common HTML and CSS designs, as well as give you fresh ideas on things to build for your portfolio. Maybe even just taking the exercises as building blocks for fully functional webpages.
My 2 cents!
Wes Bos is awesome if you can stomach the positive energy.
I also went through two of his paid coursed and really took away some working knowledge on Gatsby and NextJS. Can recommend.
I can only chime in similar to others. I'm the other coin and came through sysadmin with *nix, which led in to Apache, Nginx and backend server side. The upside was that I also had to learn html, basic CSS, PHP and other tools to make sure that everything works as it's supposed to.
Your biggest challenge is actually working out what you really want to do because the web landscape is absolutely HUGE. There's no one size fits all anymore, that's where we started from and how the web was back in the 90s. Webdev is split in to a lot of parts just the same as application development is. You can choose UI/UX, backend functionality, plugin designer to expand Wordpress or any number of other web platforms (Drupal, eCommerce, etc), develop and expand bootstrap environments, it just goes on and on.
If you're comfortable with HTML, CSS and a little PHP, you stated you have played with WordPress so why not create a plugin/custom theme and make it super swish? That would give you a portfolio and it's something you can constantly improve.
Definitely take @Shinypaper advice, look at the paths and see what takes your fancy, but don't expect to be an expert this time next week.
one random idea that comes to mind would be, show off a range of designs on your personal site.
for example, say you have a simple "about me" page. give me a drop-down where I can switch between 3 or 4 different styles of that same page. maybe one that looks like it'd be for a high-end fine dining restaurant, one that looks like it's for a heavy metal band right as they're about to go on tour, one that looks like a 90s-era Geocities page complete with guestbook and "under construction" GIF, etc.
There is a really great resource for mapping out a path of what to learn and in roughly what order here. You’ve just got to choose which “path” you want to go down. As others have mentioned Javascript is basically a must in the modern dev landscape. You can probably get some work with the basics you have already but js is going to make you way more desirable as a hire.
Also you might want to look at getting hired as an intern first. There a many companies that offer paid internships to get your foot in the door.
A lot of people have recommended some tech stacks to add to your collection. JavaScript is pretty much an absolute must learn, and some experience with at least one of the frameworks is vital for any frontend/fullstack developer jobs.
I would also strongly encourage learning typescript once you have a strong understanding of JavaScript. I don't know of many places that intentionally use vanilla JavaScript instead of Typescript these days. It's easy to get to grips with to start, but it's surprisingly deep so you can keep learning new things as you go. You should definitely spend a good amount of time learning JS itself first though, that way you're only worrying about the type system and will instantly appreciate the benefits it provides over vanilla js.
With regards to projects you should undertake:
What I did was build a few side projects that were either potential business I wanted to start, or were things I wanted to use. If your portfolio has a few fully fleshed out projects that solve some sort of novel problem you'll be miles ahead of the people who only have udemy course projects to their name.
I'm a full stack dev now and these projects had bits of backend in them, a bunch of these were actual businesses I wanted to start, so if you're just making portfolio projects you probably don't need to make things which are as complex. Some middle ground between the scale of these projects and a calculator app is likely the sweet spot.
Projects:
A ruby on rails app which used stripe connect to let window cleaners set up subscription payments easily online. - this was my first "real" coding project and the code was terrible, but I learnt a lot.
A react app with a basic backend so people could create tenders for their automation projects. Also terrible code, first big react project and played around with Firebase.
A react app hooked up to the sky scanner API so people can find potential holiday destinations using more "advanced" filters than Skyscanner allows (i.e. if you would like to minimise the number of vacation days you use you could search for direct flights from your local airport which depart on a Friday and return the following Sunday and you'd get a list of the cheapest flights to each destination on any fri-sun in the months you selected with some pretty pictures). That was a couple of years ago and at some point I'd like to refactor the hell out of it, but it was pretty and worked great until rapid API removed the sky scanner API from it's platform.
That portfolio landed me my first job without much trouble and I came in as a mid level Dev instead of junior. Building actual solutions to specific problems, and doing it from scratch using certain tools, will give you great talking points with potential employers and will demonstrate that you can get shit done.
Your Skyscanner project inspires me to try to add something similar to my portfolio! Do you still know how to access the API?
Unfortunately I got an email saying they were removing it from rapid API, and to get in touch with Skyscanner to request a key. I applied for a key but they said they weren't interested unfortunately.
That was a couple of years ago so it's possible that situation is changed (and let me know if it has), but you may be able to make something similar with a different travel API.
The hardest part was actually getting the images put together for the masonry grid thing showing where you could go. Google places is crazy expensive so I had to manually build my own collection of images for each destination airport using some images from something like flikr with attribution.
Good luck with whatever you decide to build! I'm sure it'll be cool!
Learn JavaScript and some of the adjacent frameworks like React. As for the CSS side of things, also learn SASS or some of the other hot frameworks like Tailwind. Make sure you’re familiar with Git and know how to work with versioning in a team. Docker is great to know for development environments, though with Node and the various JavaScript frameworks it’s pretty easy to spin up dev environments. A lot of smaller companies may not care about your portfolio necessarily, it’s more about talking about what you know authoritatively, being somebody they want to work with, and knowing how to learn and adapt. You’ll be able to get in with a smaller company to get experience, so aim for something like that before shooting for the moon. Always keep learning, stay interested, be able to talk about the tech. Don’t get discouraged. You got this!
This will likely vary from company to company (and even interviewer to interviewer), but, when I am interviewing for a web developer position, I am looking for clear demonstration of skills and knowledge. We walk the interviewee through a coding exercise, and listen, observe, and assess. The things I'm looking for can't be faked. I actually do not pay much attention to resumes, because it matters more to me that someone can show (live, in an interview) that they can do what I'm looking for even if they don't have a degree or years of experience on paper. However, that's also me relying on earlier phases of hiring doing some filtering already.
So, with respect to you, as a beginner in the field, do what you can to get experience. In my opinion, while schooling, online courses, and online reading are not totally worthless, in software development, there is absolutely no substitute for work experience. It'll probably need to happen in steps or levels. Practice on your own first, then leverage that to get an entry-level or junior-level position. If your financial state can handle it, consider even volunteering (i.e. not getting paid yet) for a short while -- but the key with that is to do the work in an organization of some kind, with other developers. Doing unpaid work just by yourself is not the same, because you will have no exposure to working 1) on existing code that was functioning before you arrived, 2) with other developers that you can learn from, 3) with other people in the company (not just developers).