Hello fellow campers,
I’ve been working on my portfolio page the same way I did with my tribute page; to try and make it as similar to the example as possible. The only thing I’ve really attempted to do differently this time round is the color scheme and a few very minor layout changes that I preferred. I’ve completed it to the extent that I can pass the challenge, but I had some questions about things that I wasn’t able to emulate despite researching.
I appreciate that there are a fair few questions coming up so if you’re feeling kind enough to answer please don’t feel obliged to answer all of them!
-
The picture of me looks fine when on a full screen computer (aside from my face of course ;)) but when looking at it on a smaller screen it goes far too small. I know that this must be partially to do with the img-responsive class, but I don’t know how I could make it move underneath the text into a column like the example page does.
-
How does the example page have headers and dividers in such different styles and colors? I used bootstrap for mine - is he using a different framework or am I missing a trick?
-
My header navigates to the correct part of the page using anchors, but it doesn’t highlight the correct button on the header - it just always shows the “About” button as being selected. Is there a way to fix this?
-
How did the example use different fonts? From my research it looked like I would have to upload fonts onto a server, which obviously isn’t possible with Codepen.
-
A very minor point but it raised my curiosity… A strange line appears on Github icon when mouse hovers over it. Is this something that I caused or just some sort of unintentional glitch?
My page:
Example page:
Apologies for the wall of text and thank you very much in advance for your time!
Hey, take a look at this. That should solve points 1,3 and 5
EDIT: Point 4: Have a look at this. Also, in the settings tab of codepen you can acces the <head> section of your html. Point 2: I changed the colors in the CSS
Hi Ben,
That’s fantastic - thank you!
For those of you who didn’t see my original pen, I was able to fix point 1 by adding an alternative “col-xs-12” next to my “col-md-9” so that it would put everything into a single column for smaller screens.
Point 2 also makes sense - I didn’t realize those bootstrap classes existed. I don’t fully understand the syntax for the last class to change the active navbar button color, but for now as long as it works that’s awesome.
It looks to me like you solved points 3 & 5 using Javascript. I haven’t learned any Javascript yet but that’s the next part of the course so it will be helpful for me to go through once I understand what it’s about.
Point 4 makes sense to me, but by doing it that way I’m assuming it would apply the same fonts to the entire website rather than to specific elements?
Thanks again for your time Ben - greatly appreciated.
I use Google Fonts for my projects. It’s fast and easy and you don’t need to download anything. All you need to do is press the Quick-Use button of the font you want to use, copy and paste the link tag code to the head section of your html file, and copy and paste the css code to your css file.
And just a comment about your portfolio page. I see you’re using images for your linkedin and github icons. I suggest using Font Awesome icons instead. It’s easy to use them. Go to https://www.bootstrapcdn.com/fontawesome/, copy and paste the html code to the head section of your html file. Then check out the icons. Click on the icon you want; for example, let’s choose the linkedin icon. Then copy and paste the given code wherever you want the icon to appear in your html section. Resize them using the font-size property.