This article was originally published on www.brianemilius.com/portfolio-ideas. Visit www.brianemilius.com/blog/ for more content.
Last week I wrote up a list of advice for beginner web developers. One of the bullets on the list was to build a portfolio.
But the challenge with this is that beginners have nothing to show.
Or do they? Here is a list of ideas for beginner portfolios. Please share yours too at the bottom.
- The code to your portfolio itself. Put it up on GitHub and share the link.
- Finish a pet project and display it.
- Design a contact form complete with validation, error messages, and confirmation message.
- How about the same as above, but for a login/signup form?
- Or a newsletter signup/cancellation flow?
- A small site that gathers news from RSS feeds and displays them.
- Photo gallery
- Are you a member of a sports club or do you play in a band? Make a website for that - even if your club doesn't need one.
- Call up non-profits in your area and ask if they would like to make use of your skills (this is also a great exercise in making cold-calls).
- Make a few [insert your preferred CMS] templates.
- A case study of that time you helped your aunt make a genealogy site.
- Or a case study of that other time you helped Non-Profit X tune their SEO and accessibility issues.
- A responsive website navigation (that doesn't default to a hamburger menu) (Why? Because this requires some outside-the-box thinking).
- Contribute to an open-source project. Yes, this is a daunting task for pretty much all beginners, but a great place to start in the open-source community is documentation and translation (fix those comma errors).
- A Tic-Tac-Toe game app, but with your personal twist.
- A To-do app you can speak to.
- An analogue clock.
- A small chat interface, maybe for something like webshop live support.
- Set up a landing page for Relay For Life, even though they never asked you to (seriously, help spread the brand!).
- Share unfinished projects. This can say a lot about your thought process and has real value.
That's 20 ideas for your beginner portfolio. A good one has 6 to 10 examples that show off your skills. Remember; Show me, don't tell me. Use visual examples. Show me what you can do rather than talk about it.
What ideas do you have? Or maybe you want to show off your portfolio so others can be inspired. Share in the comments.
Top comments (28)
Really cool! I haven't updated my portfolio in a few years. Been working on my photography portfolio first: htttps://mederic.me
One thing I used to do and realized I hate now is skill progressbars.
Having done many interviews to recruit new people I notice many CV / Portfolio with them but let's be honest with the intricacy of programming and complexity and extent of a language you can't really say i'm a 4/5.
Beginners are often stuck in this "what should I do?" limbo, this post helps a lot
I am newbie and in the bootcamp, I just pass html css bootstrap with couple weeks, now I struggling with js. I dont know why I can debug my javascript as html and css.
Js cant fix easily as I use inspect element to debug. Could you give me some advice to debug better. I think the problem is mind set. Could you give me some advices, thank you
Hi @dechariot 👋
This is an excellent question and I am so happy you asked it 😄
HTML and CSS, even though they are programming languages, behave very differently from i.e. JavaScript. This means that you can't debug JavaScript the same way you would those other two.
However, you are already very close to figuring out how to start. Right now, you inspect elements with your browser.
In your inspect view, at the top, there's a "Console" tab. This is where error messages from your JavaScript will appear. But in order to debug JavaScript, you need to learn about the different error types that you will inevitably meet. Three of the most common ones are:
Error messages will tell you in what files and on what line-number your error occurred, but it takes some training to learn to understand how that works. I wrote a 5 (plus 1) step list of debugging a while ago:
Debugging 101
When you program something you will more often than not encounter bugs or errors.
This is a step-by-step guide on how to deal with the process of debugging.
Step 01 Read The Error Message
Almost all errors and bugs will show you an error message in the console. Read this message carefully and make sure you understand what it says.
Error messages will tell you what went wrong, in which file, and on what line.
3 Common Error Types
TypeError: The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.
ReferenceError: The ReferenceError object represents an error when a non-existent variable is referenced.
SyntaxError: The SyntaxError object represents an error when trying to interpret syntactically invalid code.
Step 02 Look At Your Code
Spend some time inspecting your code. Look at it with the knowledge that something in that file, on a specific line went wrong. Here are some questions to help you
Why did something go wrong (error-types)?
Did I spell everything correctly (typos as well as spelling errors)?
Did the error happen because something else went wrong a few steps up in the code?
Step 03 Use Debugging Tools
Learn how to use a debugging tool. Most IDEs and browsers have really great debugging tools. These tools allow you to pause and play your code. As you go through the code you can inspect all your variables at breakpoints you define.
You can also resort to console.log() or printf if you are unable to use other tools.
Step 04 Explain Your Error
Often, explaining your error can lead to insights that will solve your problem. Practice explaining your error to other people. Rubber Duck Debugging is a great method to practice this.
Describe your problem on StackOverflow or to your colleagues/classmates.
Step 05 Take A Break
There is science backing this step.
Take some time away from your computer. Do something completely different. Go for a walk, clear your head, listen to a podcast, play a game of ping pong – whatever you do, it must take your mind off the problem.
Step 06 Last Resort
When you have gone through all the steps above and you are still stuck, ask your teacher or mentor to help you.
That's me after the MERN stack Bootcamp after 3 months, through many problems && bugs, your advice helps me much. I wanna come back and say thanks to your contributes to this community for many newbies like me. Thank you!
Hi @dechariot
I am so happy you found this helpful!
Thank you! You re a great teacher!
Here is mine, I like your suggestions and I already made some of the elements you mentioned before I read your post. I am still trying to figure out how to create and apply some things. If you are interested in content I am developing, you can find it on the site. :)
My WebSite: hivemindproject.com
I love the presentation of your portfolio, really nicely done! The hexagon stuff fits your site name 😄
1 bit of constructive critique: Don't forget to optimize your images (a few of them took a bit to load even on a 10mbit connection).
Thank you for checking it out and for your feedback. I do have a few of big images there, need to resize them. I plan to turn hexagons into React components that can be added to the grid or deleted. Also I plan to restrict that kind of management to admin login so I can make changes to the website outside of local network. I have a lot of plans but need to learn some things first. 😄
It's fun to play with React! I recently started to dive deep into that library.
Good luck with your portfolio 😄
React is awesome, you kind of get hooked to it, and you get to use hooks as well. 😄
Thank you for your feedback, I appreciate it, and good luck to you as well!
Gonna, Starting Building and Uploading Pretty Soon, Hope you are ready to see my code. :)
Sounds good!
If you are on github send me a link to the repo
Yeah i just started setting up code its really nothing much there yet.
My profile should have the github icon
This is good. Gave me done ideas.
I’ve also added my portfolio website on here. Love seeing these kind of articles, which can further enhance it.
mathisgarberg.no
Nice website, great work!
I love the loading effect and the settings 😄
Good idea .This post helps a lot.
That's a really fun idea 😄
Most portfolio websites I have seen are a one page thing with literally no work just links to github etc.
Links to GitHub is great, but I would certainly advice people to also show something visual, and add links to live versions if possible.