DEV Community

Cover image for What to put in your portfolio as a beginner web dev

What to put in your portfolio as a beginner web dev

Brian Emilius on August 06, 2019

This article was originally published on www.brianemilius.com/portfolio-ideas. Visit www.brianemilius.com/blog/ for more content. Last week I w...
Collapse
 
crimsonmed profile image
Médéric Burlet

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.

Collapse
 
hnnx profile image
Nejc

Beginners are often stuck in this "what should I do?" limbo, this post helps a lot

Collapse
 
dechariot profile image
dechariot

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

Collapse
 
brianemilius profile image
Brian Emilius • Edited

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:

  • TypeError (maybe you used a string instead of a number?)
  • ReferenceError (does the variable/function/API you are trying to use exist?)
  • SyntaxError (did you forget a } or ) somewhere?)

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.

Collapse
 
dechariot profile image
dechariot

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!

Thread Thread
 
brianemilius profile image
Brian Emilius

Hi @dechariot
I am so happy you found this helpful!

Thread Thread
 
dechariot profile image
dechariot

Thank you! You re a great teacher!

Collapse
 
sale4319 profile image
Aleksandar Stojanovic • Edited

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

Collapse
 
brianemilius profile image
Brian Emilius

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).

Collapse
 
sale4319 profile image
Aleksandar Stojanovic

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. 😄

Thread Thread
 
brianemilius profile image
Brian Emilius

It's fun to play with React! I recently started to dive deep into that library.

Good luck with your portfolio 😄

Thread Thread
 
sale4319 profile image
Aleksandar Stojanovic

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!

Collapse
 
th3n00bc0d3r profile image
Muhammad

Gonna, Starting Building and Uploading Pretty Soon, Hope you are ready to see my code. :)

Collapse
 
brianemilius profile image
Brian Emilius

Sounds good!
If you are on github send me a link to the repo

Collapse
 
th3n00bc0d3r profile image
Muhammad

Yeah i just started setting up code its really nothing much there yet.

My profile should have the github icon

Collapse
 
webdev_chen profile image
Uchena Miller

This is good. Gave me done ideas.

Collapse
 
mathgarb profile image
Mathis Garberg • Edited

I’ve also added my portfolio website on here. Love seeing these kind of articles, which can further enhance it.

mathisgarberg.no

Collapse
 
brianemilius profile image
Brian Emilius

Nice website, great work!
I love the loading effect and the settings 😄

Collapse
 
ngazetungue profile image
Ngazetungue Muheue

Good idea .This post helps a lot.

Collapse
 
brianemilius profile image
Brian Emilius

That's a really fun idea 😄

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Most portfolio websites I have seen are a one page thing with literally no work just links to github etc.

Collapse
 
brianemilius profile image
Brian Emilius

Links to GitHub is great, but I would certainly advice people to also show something visual, and add links to live versions if possible.

Collapse
 
mmaitoza profile image
Michael Maitoza

Thank you, Brian. I think I have some work to do on my portfolio. Right now it just has my freeCodeCamp RWD assignments which were made over 2 years ago with the exception of two.

Collapse
 
duellacodes profile image
duella.codes

Very helpful :)

Collapse
 
ritvikdubey27 profile image
Ritvik Dubey

Got many ideas. very helpful. Thanks for sharing.!

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
ajdajddlek123 profile image
ajdajddlek

I'm looking for unique posts. I’m glad I found your post. Your writing skills are so good, it's really fun to read your posts. I enjoy a lot every day. 메이저토토사이트

Collapse
 
majidcloud profile image
Majid Asad

if you done semester project put it as well.
BTW nice ideas