Hello everybody! I would really appreciate your oppinion on this portfolio i made

Code Feedback
1

I’m still kind of a noob, so any advice you have is very welcome!

2
3

also, if anyone can help me with image hosting, I would be very grateful…

4

I use Cloudinary. They have a free basic plan. You can then link directly to the uploaded picture.

5

Your design choices are great! I love the dark backgrounds with the variety of greens.I think you nailed some important things like margins, padding, and design, but you can definitely improve on it

  • Add a background image to your header. Something that really wows the visitor. Play with the background image styles.
  • Use Font Awesome for your Facebook link, and add more links to your contacts - even if they are dummy links!
  • Get rid of the scroll portfolio. Try to make six neatly laid out thumbnail images that can be clicked and will send the visitor to your page!
  • Pieces of the project are responsive but there is room for improvement. The font-size is way too large for mobile, so there’s only two words on each line. I would suggest fiddling with the font-size and maybe of the margins for mobile users.

If you have any questions, feel free to ask!

6

thanks for the tip! :slight_smile:

7

thank you for your advice! this is actually the first web page I ever made, since I just recently started learning about coding. It really means a lot when someone with more experience says that I’m doing ok. I will try to tweak those things you mentioned, and when I do, I will post a link, so, if you could take a look at it again latter, I would be grateful. also, if you have any pointers on how to make font-size responsive to screen width, they would be appreciated very much…

8

I tend to use media queries, which create breakpoints in your CSS. At specified widths, you can create new rules to your page. So for code like

body {
    font-size: 16px;
}

p {
    font-size: 16px;
}

@media only screen and (max-width: 320px) {
    p {
        font-size: 12px;
    }
}

Basically when widths are 320px or less, the font-size will be 12px. Anything device above 320px will have 16px font. There’s a whole method to it, and I encourage you to look up some documentation for a better understanding.

Edit: Holy crap that’s a horrible explanation… go ahead and ask questions if ya got 'em

9

:smiley: no it’s not, that’s actually all I needed! i thought that I was supposed to use “toggle” function to switch an element to a different class at certain screen width, but that seemed too complicated so I presumed there must be a simpler way to do this. so, after i insert media query I can include the same classes in it with different values?

1 Like
10

also, do I need to add jquery source to my code for this to work, or is it a standard feature?
in any case, thank you for your time…

11

:+1: Seems to be working and it’s all comin’ together!

12

hello friend! could you please check out my code again and tell me what is wrong with my queries? they don’t seem to work, and I’m unable to find the problem :confused:

13
14

Hey the font sizes change for me when I inspect it. Were you trying to do anything else?

15

yes, I’trying to make those images of project fit the container. I’ve tried giving them class image-responsive, but that doesn’t seen to do anything, since it always displays them in the same size but in a different arrangement. is there a way I could make them automatically scale down with screen size?

16

Okay so this messes with your layout, but this is the solution that I used. I got rid of the scrolling portfolio, removed some of the images, and set the class to img-responsive. It solves the responsive image issue. You’ll just have to fiddle with the layout now.