Need help with a few things on my Portfolio Page

Hi,

I’m new to freeCodeCamp. Really enjoying the course so far!

I am struggling a little with my portfolio page and was wondering if anyone could help.

It is by no means finished, but I am struggling with the following:-

  1. My dropdown navbar menu’s are too large when expanded.
  2. I started creating my own form page, but couldn’t get the layout I wanted. I copied some code, just to see if I could get any pointers, but still struggling with the design etc. I would like to build one from scratch, but need some pointers.

Other than that, and a few tweaks, I think it holds to the challenge! :slight_smile:
Any feedback would be appreciated.

Thanks,

Paul.

  1. A dev tools inspection has shown that you’ve set your “a” tags to have a height of 100px. (See green box below. When I uncheck that, it then shrinks significantly.)

  1. What exactly is the layout you want? It’s hard to point you in the right direction without knowing that. :slight_smile:

One thing I’d highly suggest is getting familiar with Chrome Dev tools - it’s made my life significantly better when it comes to CSS. To do that with CodePen, go to this link (this is just CodePen’s “debug” mode of your pen), and then right click somewhere on the window, and select “Inspect.” A thing should pop up either at the bottom or the side, and you can inspect all of the elements on the page and the corresponding CSS that affects each element. You can make changes and add/remove properties directly in the browser and see what happens. (Just remember to transfer any changes over to your actual code afterwards!)

It might also help, both now and in the future, to gain a fundamental understanding of some CSS principles, like the box model, positioning, working with a grid, specificity, the cascading nature, block vs. inline vs. inline-block elements, etc. Otherwise, a lot of times you’re willy nilly sticking properties in places and hoping for the best - I did this for a VERY long time - and it gets very frustrating very quickly. Once you’re able to understand those, it makes it a lot easier to target the elements that you want and saves you a lot of frustration and headache when doing anything in CSS. You will most likely have to go outside of FCC for detail about these concepts, but that’s how a lot of FCC is for now - it’s by no means a comprehensive resource, and the internet is a large and fantastic place. :slight_smile:

On the actual portfolio itself, I guess my comments from an initial glance are -

  • I’d probably make your “about” bullet points easier to read - when the browser takes up the full width of my screen, they go allllllll the way across, and it seems a little unnatural to read.
  • Also not a huge fan of the complete logos and them taking up the entiiiiire width. (Also, some of them look a little squished.)
  • The gray text on the blue-y background is a little hard to see.
  • Maybe try to center your portfolio boxes and make them a standard height? (I’ve known people to not do the latter though - kind of personal preference on that one.)
1 Like

Hi Beth,

Thanks for the feedback. Really appreciated! :slight_smile:

I get the padding part, but you are right when it comes to grid spaces, block vs inline-block, I am a bit lost. I will definitely review these areas and also use the dev tools more.

Thanks for your help! :slight_smile: :+1: