I made a website based off what I learned in HTML and CSS on Free Code Camp

I made a website based off what I learned in HTML and CSS on Free Code Camp
0

#1

https://christonja.github.io/

I plan on maintaining it and building it up over time as I learn more things, but for now I’ll host my projects and neat links to various places.

Please let me know pros and cons etc. What I could potentially improve on as far as HTML and CSS.

Cheers.


#2

Hi, @Christonja
It looks simple and good.! :wink:

If the navigation links had some spacing between, it might look even better, additionally you can add some hover effects to those links too.!

And the name “Christon Portfolio” and the nav links could have been made to align on a straight line using flex properties.

That’s it, rest of that looks nice.! :sunglasses:


#3

Very cool! I bet you learned a lot by doing this.

More of us campers probably should take advantage of that github hosting.


#4

Thanks for the feedback have made a number of changes including ones like you suggested. I have however noticed some font sizing issues on phone devices, but I’ll iron them out over time I’m sure.

Thanks again!


#5

Yeah it’s neat, I’m definitely noticing a new set of problems when having a website live as opposed to just within codepen. It’s nice to be able to iron out problems and learn how to make a site work properly when it’s live. Also I’m learning how to use GitHub which is a plus :slight_smile:


#6

Hey, it looks great man, I personally like the colors. Design-wise looks great. Just a few things:

  • I would use target="_blank" for the anchor links, it feels more natural when you click on a link and it opens a new tab instead of going back every time you click a link.

  • I think the footer would look better if you give it some vertical padding and change the default color of the anchors (in the footer) for one of the tones of blue that you are already using like in the header. I’d probably change the color of the anchors in the footer from dark blue to a lighter blue with a hover effect too.

  • Also, remember to always use transition for your animations effects, so the change doesn’t of one animation to another doesn’t feel sudden.

Overall, very promising website.


#8

Thanks for the feedback, have added in your suggestions :slight_smile:

Cheers!


#9

Took me far too long to realise google’s inspect tool had a way to check responsiveness across different devices and screen sizes. Have worked all day to make my site completely responsive (amongst other things) and as soon as I found this tool I sorted it in an hour! haha!