Help on the personal portfolio page

For anyone who has done or is currently working on the personal portfolio page I need assistance. I currently have made my navigation bar but i’m not sure if i’m doing it correctly. I am trying to make the about me part but the text keeps on showing up behind the navigation bar. I feel like i’m not doing this correctly and i might even restart if I can’t think of any solution. Any help would be great help. Any help would be considered useful during my time of need Thank You all.

My Project:

One way to fix this is to add styling to your body. Adding, padding-top:95px; will push everything in the body below the nav bar.

Here is a link to my first portfolio page. Hope it helps, I was so much for not copying other people’s code that I made it as simple as I could but fulfilled the user stories. Maybe it will give you a platform to jump off of like some portfolios inspired me. I’m actually in the middle of making a second one, I only need to create a few more web apps :smile:

I am on mobile so I can’t really help much. But let me tell you how I diagnosis all the issues I found in my project. If i have a full page of code, I divide them into different part like: header , my work, contact. And I copy each section’s code into another new codepen page. Then I focus on the part that was giving me glitches and issues. Try to fix things. I think this can help you. Make a duplicate and start on changing things. Hope this help.

@aoganezo we should always try to avoid styling the <body> directly. It is considered to be “anti-pattern” or just a bad general practice.

One reason for this is that the top / left of the body is the default for all of your css ‘position: x’ statements. It will also over complicated any background image positioning.

A better approach would be to add padding-top: to your <header> element, or margin-top: to your <nav> element.

I also like to include a <div id=“wrapper”> just inside my <body> which fits the screen exactly. If you are sure you want that padding on every page, you could apply it to that without the side effects.

@Ahenry80 check out this fork of your codepen.

As @zhouxiang19910319 mentioned, you always want to separate your page into different top level sections, this will apply to 99% of all projects you do.

The standard top level html5 markup is

<container> (or #wrapper)

looks like you are using bootstrap .
then try to understand navbar documentation
and also check the difference between container and container-fluid class

IMO as a teacher and developer, using bootstrap on an early small project like this will only mess with your learning process. I highly recommend ignoring bootstrap until you feel you have a solid understanding of core css.

Bootstrap is a “convenience” library for people who don’t know how to code. It results bloated css and ugly markup. Please don’t become dependent on it early in your education.

1 Like

Are power tools conveniences for carpenters who don’t know how to use hand tools? I’d still agree with you by analogy, about the value of a carpenter knowing his hand tools. But I wouldn’t say using the latter implies lack of skill or knowledge.

@tdreid, that is a great discussion point, and important enough to get right.

IMO jQuery, SCSS and Gulp are all great examples of ‘power tools’ I would love to see new students to using.

To be clear - my comment is as much about ‘when’ to learn x subject as ‘what’ is worth spending your time on.

Bootstrap however is not a ‘power tool’, it is a ‘prefab home’. - a bunch of pieces that are pre built off-site that a someone assembles. This is a highly limited skill(?), and the experience(?) you gain is not teaching you to solve real world problems.

When you start to custom build even the smallest Bootstrap class you will certainly run into challenges. For example, replacing their grid system requires a comprehensive knowledge of media queries and floats. But what you learn solving ‘wireframing’ will give you much more control over responsively positioning all future custom content.

Likely, your first concept of a custom grid system would be as clunky as mine. But you are now touching on 'what works when, where, why"… and your next version will solve another problem/limitation, and the next, until you eventually have such a clear understanding that you can *gasp create something better than Bootstrap.