Have fun tearing this portfolio to shreds

https://codepen.io/00saadchaudhry/full/WGBkOr

I know FCCā€™s icon has been around in a while now, but itā€™s the first time Iā€™ve seen it in action :sweat_smile:

For the about section the text could use a larger font size. Itā€™s a page about you after all.

Your navbar doesnā€™t collapse on mobile, and the thumbnails shrink to oblivion.

Maybe you can offset the red evil smiley on mobile, or add class="center-block" to it.

The contact section could use a bit more text to describe what the form is for (maybe in that empty section to the right). Maybe like ā€œLeave me a messageā€ or something.

lol, whatā€™s wrong with using the freecodecamp icon?

And, wow, I finally figured out why the navbar collapse button wasnā€™t working: the jquery library needs to be loaded before the javascript-bootstrap library!

Nothing wrong with it at all! That icon was made for us!

Well, I I made some changes, and even though I still feel like my portfolio is in a rough draft stage, Iā€™m going to call it ā€œdoneā€ and move onto the next FCC lesson.

Nice :thumbsup:

Iā€™ll add that

Who Do I Currently Know?

should probably be

What Do I Currently Know?

Thanks for the grammar/spellcheck lol.

I like what you wrote about websites though lol, I agree that they should be simple hehe. Simple and clean is my philosophy.

Try changing the fonts, as simple as it may seem, it goes a long way in helping your website. And become friends with margin and paddings, as time goes by youā€™ll realise how lighter, lighter and more easy on the eyes they make sites seem.

Try changing the fonts, as simple as it may seem, it goes a long way in helping your website. And become friends with margin and paddings, as time goes by youā€™ll realise how lighter, lighter and more easy on the eyes they make sites seem.

I agree with you about fonts, but for someone like me, fonts is another subject Iā€™ll have to study just like Iā€™m studying web development. Iā€™m wondering if thereā€™s some crash course I can take thatā€™ll teach me about the different fonts and what to use in each situation.

As for the margin and padding, I completely agree. Itā€™s something Iā€™ll have to tinker with a lot until it becomes second nature to me.

I used the bootstrap grid for both my portfolio page and tribute page, and after typing it up and making so many mistakes with it, Iā€™m confident about implementing it in the future. I hope to one day do the same with fonts, margin, and padding.

It easy to implement fonts man. Hereā€™s what to do step by step.

(1) Go to google fonts here https://fonts.google.com/
(2) Search for fonts you like, ideally 2. Search for Roboto Condensed and PT Sans
(3) When you find them, click on them then click ā€œselect this fontā€
(4) When you have selected both of them, click the ā€œfamily selectedā€ tab at the bottom.
(5) Copy the https link that you see there. Do not copy the link href part etc.
(6) Now on codepen go to settings, CSS and where you see add external css, just paste it there and save.

Now on your css in codepen, type the following

h1, h2, h3, h4, h5, h6 {font-family: ā€˜Roboto Condensedā€™, sans-serif;}
p {font-family: ā€˜PT Sansā€™, sans-serif;}

And voila, youā€™re done. And take note that when typing font-family names in CSS, font names that have spaces have to be enclosed in quotes. Also, if you have an element that needs to have one of your font, just add it to the list of h1 or p tags.

Try it, easy as 1,2,3 and will give your site a much better look.

1 Like