Personal Portfolio (Newb) - Feedback Please :)

Hi,
I have completed the project - Personal Portfolio Website.
I am actually pretty pleased with what I’ve been able to do as when I first looked at the Demo for this I was like “Where do I even start?1”

One thing I’m pretty sure of - I’m going to struggle with Web-Design. I also realised doing this why getting a pen and paper out first and whipping up a drawing could probably save heaps of time.

I am a complete newb and in this project started to use the CSS a lot more than I did in the Tribute page - reckon I made a pretty big mess of the code but it somehow works Ok.

If you have time to take a quick look and give any advice that would be most appreciated

https://codepen.io/Arthurauthor/full/ZBZpmY/

1 Like

It looks great - as for Design I think that a lot of us find it to be a topic in itself, so don’t worry about picking up the pieces as you go along. For inspiration and understanding the possibilities of CSS, here’s a nice link.

As for your code, you can set your three lines of code for border in one line. For example:

border: 3px solid white;
}```

It looks like you've got some padding after your footer - I have a white line, is that necessary?

Thanks heaps @timotheap.

The encouragement is much appreciated. I was just looking at this one here and thinking I have a loooonnnnggg way to go.

Thanks for the border tip - already I am often looking at my own code and thinking “gotta be a quicker way of doing this”.

As for the padding - thanks for that - I was wondering if it was just me and my screen - but no, that’s not meant to be there. Will have to find what’s causing it.

Yep it’s a really nice portfolio, the guy also seems to have some 3 years+ experience in design !

So the loooong way to go is a tautology when we’re just beginning. Good luck !

1 Like

For me, web design and CSS best practices are still a work in progress as I practice more projects and read more articles. It’s frustrating when things don’t come out exactly how I want them to, but I love comparing my past projects to current ones and seeing how much progress I’ve made.

I think you did a wonderful job in completing the challenges! It’s responsive when I change the screen size and I like the colors you used for your portfolio (but orange is my favorite color so I’m a bit biased).

My biggest suggestion would be to remove all the style attributes you have in your HTML and just move it into your CSS. It’s just best to keep CSS separate from the HTML.

I would also challenge you to add a background image somewhere on the page, and to center-justify the QR Code beneath your Contact. Finally, I think the whitespace at the bottom of your page comes from the Bootstrap .navbar class.

Don’t compare yourself to anyone else, a lot of people use freeCodeCamp for other purposes than just starting out like us newbs! Just keep practicing and developing! Happy coding :smiley:

3 Likes

Nice job. The design is clean consistent. Don’t worry about struggling with design, its a discipline in itself. I feel like many developers do. Like programming itself the more you do it the more proficient you will get. There will be plenty of opportunity to delve deeper as you do more projects.

Some things that helped me were Googles Material design:
This part in particular: https://material.io/guidelines/material-design/elevation-shadows.html#elevation-shadows-object-relationships

Some subtle shadows can draw attention to certain area’s of a page.

I also find http://paletton.com/ useful for selecting colour pallets. This article gives a nice overview of color theory in design: https://webflow.com/blog/web-design-101-color-theory

I wouldn’t delve too much into design theory at this stage. Get stuck into your next project. As you do each project try incorporating a new design concept or library. I tried a few different CSS frameworks as I made my way through the front end cert, just to get a feel for different ones.

2 Likes

Looks pretty nice!

One thing you can improve is your usage of fonts visitors are unlikely to have, like ‘Cedarville Cursive’. On my system this defaults to Times New Roman. You can use Google Fonts to embed the font so that everyone can see it properly:

(To embed the stylesheet on codepen, open the HTML options and paste it in “stuff for head”)

@drregg6 Thanks very much for taking the time to give such valuable feedback. Much appreciated

I think for my next project I will do a bit of pen and paper planning before coding so I can do as you say and have all style attributes in the CSS.

I haven’t had a chance to revisit the page as yet but thank for the heads up on the whit space.

Thanks @lincore for taking the time to review my prtoftolio site - very much appreciated.

Silly me - rookie mistake(s). I was fiddling around with the google fonts and at the last minute decided I would remove it but I don’t fix the code accordingly.

@collinstommy Thank you very much for the advice and the resource links - very much appreciated.

I always like to take a look at stuff people recommend on the internet as it is usually more useful than just a random google search and the 7 zillion results you get.

I’ll definitely take on board trying different libraries and CSS frameworks. It wasn’t until you mentioned this in your response that the penny finally dropped about what Bootstrap is. Because it’s all so new I’m just sort of “doing what I’m told”. So far I’ve found the “light bulb” moments have come from the forums.

@timotheap I like that you highlighted my own tautology. You have to go a long way to find many people throwing words like that around on forums. Nice one :slight_smile:

1 Like

You could use http://placehold.it for images when you are designing your website

Looks nice!! A lot better than mine tbh :slight_smile: