Hey everyone! I just recently semi-completed my first Portfolio project. It’s really simple and I could use some suggestions. I’m not entirely sure how to make the portfolio responsive. I’ve tried messing around here and there with “col” but can’t seem to get it to work properly. Also, whenever clicking on one of the nav links, it won’t keep the color that I’ve selected in “a:visited”. It seems to just stay white for a second unless you click elsewhere. All feedback and constructive criticism is welcomed.
This looks great! The design looks good, and everything works well. Only thing is when you click on say, “Portfolio” to go to your portfolio, it then highlights it in the navigation bar, after you move our cursor, which is great, but the colors don’t really work. It looks like almost white on white, so I would try and change the background color, or the font color. Not for everything, just when it gets highlighted. I love how your picture “pops” when you move the cursor over it. Super cool!
Thanks a lot! I actually found that JavaScript code on StackOverflow when I was meandering about for the smooth scrolling effect.
The whole thing with the anchor links staying white is confusing me, though. I think I put everything correctly in my CSS for “a:visited”, but apparently not. It seems I’ve made a mistake somewhere but I just can’t figure it out! Thank you so much for your feedback!
Its not a css issue, its the javascript. If you remove the event.preventDegault() it works but is funky.
It’s the link’s focus state. The color can be changed with this CSS (note: don’t get rid of this entirely! It’s an accessibility feature)
.nav li a:focus {
background-color: #bada55
}
2 Likes
It’s the link’s focus state. The color can be changed with this CSS (note: don’t get rid of this entirely! It’s an accessibility feature)
.nav li a:focus {
background-color: #bada55
}
That works if you put that in, but something’s weird though, because the background of links does not become white if you don’t have a link:focus. The scrolling javascript/jquery is screwing it up.
1 Like
The background color you see by default will be set in the browser’s stylesheet. I had to switch to Chrome to see the issue @P1xt was talking about (Safari’s my usual bag). scrollTop is probably triggering the link’s :focus state, as it should. I mean, yeah, you’re right, but it’s incidental. I tried the code you supplied and it had the same bug.
2 Likes
@P1xt you tagged me for CSS support?! You don’t know me at all 
I still get frustrated centering divs 
Yes exactly, both background-color and outline should be preserved for accessibility. Some people actually visit a website using the Tab key, and each elements in the normal html flow get outlined/focused as a visual aid.
Some designer go as far as to remove theses defaults but I think it’s a good idea to customise them to fit the website style.
1 Like
I really like your portfolio. The picture of the dog and the captions under your coming projects are great! Being new to this, I don’t have any technical advice. But it made me laugh.
Thanks!
Nora
Wow! Thank you all so much for the feedback! I guess the Javascript is out of whack, then. I’m sure I can find other ways to get that scrolling in without that messy Javascript. Maybe I’ll learn a thing or two when I actually make it through the Javascript section on FCC!