Please take a moment to view and leave any feedback on my personal portfolio. I have put a lot of effort into this one as I would like to eventually show this off to any potential employers in the near future. https://codepen.io/tom-williams/pen/wvzweWz
One issue I am aware of is the navigation. When scaling down from desktop view to tablet view, just before the view switches to tablet view the navigation menu wraps underneath my name. Is there a better approach to how I have done it?
Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
The link to the font goes in the box labeled ‘Stuff for <head>’
There are HTML coding errors you should be aware of and address.
Since copy/paste from codepen you can ignore the first warning and first two errors.
Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
The one for CSS is good. Use it and address the issue(s).
Be wary of duplicate selectors
(The one for HTML misses things which is why I recommend W3C)
Make your page responsive. Remember, the R in RWD stands for Responsive
There’s a horizontal scrollbar on larger screens. Things fit nicely on smaller screens.
I wasn’t aware of the 'Stuff for ’ box so I address that issue.
I ran my HTML through the W3C validator, which then stated I should be using unordered lists for navigation menus for multiple a tags, is this best practice?
The other issue with the duplicate ID of ‘profile-link’, is this something I should just be aware of? I understand there should not be duplicate IDs of the same name. If I am not mistaken the criteria for user story #8 requires you to do this?
I cleared the duplicate errors within the CSS, I thought I had removed all duplicates.
Lastly, I was having the issue of being able to horizontally scroll on larger screens, but I couldn’t work out what the issue was and searched for an answer on stack overflow which came back with nothing. But I believe I resolved this by clearing any redundant HTML and by using Ctrl + 0 to reset the size of the window while using chrome dev tools. Was this the only issue with the page not being responsive?
I’m confused…where does it say this? The error is that you have a ul element and it expects li as a child. If you nest your a elements within an li element there will be no error.
An id must be unique within the document. The user story says;
“My portfolio should have a link with an id of profile-link, which opens my GitHub or FCC profile in a new tab.”
Notice the “or”?
If you want to have more than one link you could give the first one id="profile-link" class="profile-link" and then if you want to have another one, two, or even three links you would just give them class="profile-link" and style the class.
Your page isn’t responsive on larger screens because it has a horizontal scrollbar. You don’t want that. There is no scrollbar on smaller screens…that’s good.
To better see what’s happening on the larger screen, you should be familiar with the box methodology. Once you realize everything you see on a webpage is just a box you need to move around and resize, things will start to click.
To help you see what’s happening add the following line to your universal reset; border: solid 1px red:
You’re using a lot of pixel hardcoding. It’s best, and easier, to use relative units and percentages to make responsiveness easier.