Personal Portfolio Page Help Needed

I need some help with my personal portfolio page, I have the basic skeleton up, not much else at the moment.

I will continue making adjustments to layout and format, any and all help is greatly appreciated!

1 Like

Whoa that’s about as blank slate as one can get! :smile: Not a bad thing mind you, but there’s not much to comment on as of yet.

Do you have any design/layout ideas you might want to try?

If not, I can toss out this…google “Web Developer Portfolios” or “Web Designer Portfolios” and you’ll find tons of stuff like this: https://medium.freecodecamp.org/15-web-developer-portfolios-to-inspire-you-137fb1743cae
Even do a google image search for it. Look at other portfolios and if anything strikes you as interesting, try to do it yourself. It’s a great way to pool together ideas and inspiration for your own work. Plus it’s awesome practice if you try to do it without looking under the hood at the code.

Love your company name by the way!

1 Like

I would like to keep it simple and clean, nothing fancy.

How do you design your background images/color schemes?

Also how can I change the color of the navbar to make it more distinctive?

Thank you for the help!

I’m still kinda new to coding, but I this is what I do.

Basically, the “div” tags are what you use for styling schemes. The navbar, for example, would have a title name, and three buttons. You’d wrap all of the elements mentioned in a div container, and style it with css (ex. background-color: <color>). You can make the div tag stretch to the edge of the webpage via: width: 100% , and you can adjust the height using height: percent, em, or px.

In order to target a specific div, you can give it a class tag or an id tag. To use an id, you’d do this by typing inside of a tag and adding id="id name" to it. ex. <div id="example"> After that, you can target the element in the CSS page by using #nameOfId { code here }. If you want to use a class, you’d do the same except instead of entering “id” in the tag you’d enter “class”. then, instead of using # to target your element you’d use a period following the class name. ex. .nameOfClass { code here }.

It would be a good idea to look at a couple online generator tools for box shadows, text shadows, and gradients. Also, you can add google api fonts to your webpage. You can go here: https://fonts.google.com/ . just look for some good ones, click the plus on the top right of one you like, and don’t be afraid to add more than one font. After that, you just open the tab on the bottom of the page that appears after selecting a font, and copy the link it give, then pasting it at the beginning of your code page. then, you can use the font by targetting an element in css and in the code block typing in family-fonts:

Hopefully I could be of some use ;p

I’m very appreciative of all your help, thank you very much!

I’m diving back into this tonight so I’ll update my progress tonight and/or tomorrow.

I edited my OP with my updated pen.

Breakthroughs so far:

I know how to upload a background image with css now. Progress.

1 Like

Nice! It’s looking much better. Keep on working and I’m sure all that hard work will make one great web page.

Update time! Here’s my pen!
My only remaining questions…how do I link the navbar headers to the correct sections? Thank you!!!