Have fun tearing this portfolio to shreds

Have fun tearing this portfolio to shreds
0

#1

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


#2

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.


#3

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!


#4

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


#5

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.


#6

Nice :thumbsup:

I’ll add that

Who Do I Currently Know?

should probably be

What Do I Currently Know?


#7

Thanks for the grammar/spellcheck lol.


#8

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.


#9

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.


#10

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.