Need feedback on portfolio website

Code Feedback
1

Personal Portfolio Website
I know I don’t have any projects, but I’ll add them as I make them.
And can it be considered professional?
Also how I make the navbar’s background black from transparent when it reaches a certain point, I’ve used some jquery code which doesn’t seem to work.
And please tell me how I can make this website responsive.
Should I make a media query for every breakpoint, or is there another method?

Thanks!!

2

Hey there,

your link doesn’t work,
because it is just https://codepen.io/pen/.

3

Oh I’m sorry. I’ve updated the post

4

It looks simple and clean (which is good, and professional).

Concerning content:
Your title is “full stack developer”, but later you describe yourself as a designer, and there’s also no indication of what tech stack you’re proficient in. I know you said you haven’t created any projects yet, but once you have a few to showcase, I’d make sure that your title matches your actual skills. Maybe go for “frontend developer” first, unless you have a project to prove that you’re familiar with backend/databases.

Concerning styles:
First thing is - never use width:100vw, always use 100% instead, to avoid the horizontal scrollbar.

For the navbar, wouldn’t it be enough to give it the same dark background that your welcome-section has?

To answer the question “how to make the site responsive”, I could probably write a 10 page essay now, but here’s some hints:

  • always use % values for widths
  • start with the mobile view, make that look good, then make the window larger and see at which point the layout doesn’t look good anymore. Then make adjustments for the larger views with media queries
  • typical breakpoints are 768px (for tablet) and 1200px (for desktop browser)
5

I can make professional website yay

Actually I copied the text from another portfolio. I didn’t know what to write there so.

Ok

But then it wouldn’t stand out from the welcome section.

ok

ok

ok

Then when should I use VWs
And should I use vh, or percentages for that as well.

I’ll not mind if you do. :grin:

And is the website responsive now, would you consider it responsive, could you point out the specific element’s styles I need to change and the reasons why I should make those changes.
THANKS FOR THE FEEDBACK!!

6

And please help me out with this one as well.

7

Your page is good @gururajankappa but few things to revisit:

  1. There are not enough countries in the dropdown. For example I’m from India and I want to fill out that form what should I do? India is not listed in the dropdown so instead of the dropdown use input panel so they can enter any country’s name.

  2. Run your code through W3C validator

9

Ok I have fixed that

10

Use vw for font-size (in rare cases), for widths always take %.
vh is fine though, vertical scrollbars are completely normal and almost expected on a website.

If you click on “Change View” in Codepen (upper right), you’ll see that you can choose from three different Editor layouts. Pick the left or right one. Then narrow the preview window (it shows the width in px at the bottom as you drag). You’ll see that your contact form has far too much space left and right.

Now for your media queries…

@media (max-width: 470px) {}

@media (max-width:436px) {}

@media (max-width:404px) {}

@media (max-width: 320px) {}

@media (max-width: 296px) {}

@media (max-width: 240px) {}

@media (max-width: 234px) {}

Before you torture yourself any further, take a while and think about what a media query does and where it makes sense to have one. Maybe watch some tutorials, just to get an idea.

There are no devices that have a width of 234 px. or 240. The smallest you’ll have to take care of is 320px. If your page looks good at 320px, how much can possibly change when you open it on a device that is 404px wide?

I’d delete those media queries altogether. Design your page so that it looks good on 320px and upwards (up to about 500px).

And once that’s all sorted, you can start adding JavaScript or jQuery to change the colour of the navbar…

11

Oh, I just saw some popular websites not working with some really small devices. I thought my website should be rendered properly on every device ever.
Okay, it means my website should look good only on 320px and above, that’s a relief.

When the device is too small? Or what?

What should I add, I don’t know any jquery.

Ok I’ll do that

Thanks for the feedback, again!

12

No, when it makes sense. Add this to your CSS (at the bottom so it overrides your current styles) and then resize the window back and forth.

#main {
  font-size:11vw;
}
#sub {
  font-size:4vw;
}

A big headline is pretty much the only use case where it’s acceptable to let your font-size change with the viewport width. You’ll get what I mean when you add this:

nav ul li a {
  font-size:3vw;
}

Font size shouldn’t really change, especially not in navigations and buttons. Unless when the whole layout switches from tablet to desktop, for example. Or when you’re experienced enough to use clamp in the right/acceptable ways.

13

Thanks all my doubts are clear now.

Yes, I just got to know about clamp.
Okay, I was confused about why vw for font-sizes is even valid.
Thanks a lot!!!

14

Any other changes I need to make? Or is it ok now.

15

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.