Need help with my portfolio

Hi, I’ve finished my portfolio project but I’m just fine-tuning it. I have two questions:

  • In the contact form, I like the ‘Submit’ button to be the same size as the rest, but for some reason it doesn’t work. It’s slightly smaller on the right side. Any suggestions?
  • I’d like the grid to be optimised for mobile phones, if the screen size is smaller than 600px for example, there should be 4 boxes above each other instead of the 2 x 2 grid now.

Any other feedback is welcome :slight_smile: I’m pretty happy with the result so far!

Here’s the link: https://codepen.io/haaksan/pen/oNYjOLX

Best,
Sander

That’s because you have horizontal paddings on your <input type="text"> and your <input type="submit">. Text inputs are stretched if you apply paddings, submit inputs are not. Simple fix is to set the text inputs to box-sizing:border-box.

Some other feedback: You have a lot of repeating style rules for the same elements. A refactor of the inputs in the contact section could look like this:

input {
  width: 100%;
  background: transparent;
  border:2px solid black;
  margin:0 auto;
  padding: 15px 0;
  box-sizing:border-box;
}
input:hover {
  background-color: lightgrey;
  transition-duration: 1500ms;
}
#email_input,
#message_input {
  border-top: none;
}
#submit_button {
  font-weight: bold;
  font-size: 110%;
  border-top: none;
}

Set all the styles in one general input selector, and only put the ones that are differently from those in separate selectors. That way, if you want to change the padding for example, you can do that in one place, instead of copying it over and over for all inputs. It’s also much easier to maintain, if the CSS grows larger.

That would be done with a media query, which you’ve apparently already tried for the footer, but the syntax is wrong. This is not valid CSS:

@media footer {
  flex-direction: column;
  text-align: center;
}

Instead, you have to specify a width value, and put the selector within the curly braces of the media query:

@media (max-width:600px) {
  footer {
      flex-direction: column;
      text-align: center;
  }
}

Now you can do something similar for your project tiles - for example, use grid with only one column instead of two. You can write it in the same media query, below the footer styles.

1 Like

First thing, If you look at the image the other input elements except submit are overflowing container this should not happen.
On the container always write

overflow:hidden;

and every element inside it

width:100%;

which you are already doing.

and instead of margin and padding on each individual item, you can give horizontal padding to each individual like,

#submit-button, #input1, #input2{
padding: 16px 0;
}

or whatever left-right padding you have in mind, it will save you few lines

And to center align any container div instead of doing

margin-left:30%; , margin-right:30%;

you can do give a width like 50%, 60%, etc. then center align with margin property.

width: 60%; ,
margin : 0 auto ;

it will spare you of guessing calculations.
These were my two cents.

Hi jsdisco, thank you so much for all the help! I’ve gone through your suggestions and now my page is in a lot better shape! It was really good you pointed out the repeating style rules, I’ve fixed them now and will go through the same steps on my other pages. Both the media query and the contact box are fixed now.

I have another question regarding my background. If you look at my page, you’ll see the background pops up between my ‘Welcome section’ and the ‘Projects section’. I’m not sure how to deal the general background. It seems that there are automatic blocks created (also at the top and bottom) that I can’t seem to get rid of.

All I have to do is get some preview images for my projects and them I’m pretty happy with the result :slight_smile:

Hey kamaljyotwal,

Thank you for your suggestions. I’ve implemented them and it’s a lot easier indeed. I’ll check through all my other projects and update them according to your suggestions.

Best,
Sander

The grey background issue is coming from the <br> tag right after your closing </nav> tag. Generally, it’s not advisable to put <br> tags, unless you use them to cause a line break in a text block (and even then, the use of <br> is often considered bad practice).

There’s also no need to put it between sections on the page like <nav> or <header> or <section>, because those are all <div>s, and divs are block elements (read about block and inline elements here: Block-level elements - HTML: HyperText Markup Language | MDN).

TL;DR: Block level elements begin on a new line by default.

You’ve for example also used them in your form, after every <input />. That’s not necessary if you set your inputs to display:block, then they’ll always start on their own lines.

If you want to use <br> tags to create some vertical space between sections, it would be better to give the sections a margin-bottom instead.

But finally, great job cleaning up that CSS, it’s much easier to read and maintain now.

Thanks once again jsdisco. I removed the unnecessary <br> elements and tried to fix them. In the process many things however got messed up as you might see. The grey gaps are visible between each element and somehow the buttons in the ‘projects’ section no longer respond to my CSS font-commands. I’ve also noticed that the grid is unevenly balanced and therefore the box contents are different. Any suggestions?

The grid looks uneven because you’ve set grid-template-columns to auto auto. If you want both columns to have the same width, replace that with 1fr 1fr. (fr stands for “fraction”).

I’m not sure what you mean by “the button doesn’t respond to CSS”, you’ve set it to text-align:right (which is probably not what you want?).

As for the grey gaps, this might be a great chance for you to understand the box model, and the difference between margins and paddings. You can make the gaps disappear if you add this at the very top of your CSS:

* {
  margin:0 !important;
  border:1px solid blue !important;
}

A few notes:

  • the * selector will select every element on the page, basically removing all margins from all elements, and giving them all a border, so you can see where they start and end
  • the !important flag will make sure that this rule overrides everything else. It should almost never be used in your actual CSS, but for debugging purposes, it’s ok
  • this will also mess up a lot of other things, but don’t care about it, it’s only a temporary CSS rule to show you where the gaps are coming from

You’ll see that the problem concerning the first gap is that your #welcome-section has a margin-bottom. It pushes the next section down, and the only thing that’s visible between the sections is the body’s grey background. If you want to make a section larger, but still keep its background-colour, use a padding-bottom instead. Alternatively, give the whole body the background-gradient. Then it doesn’t matter if you use margins or paddings for distancing elements.

You’re already quite good with CSS, there’s no obscure positioning with absolute or large margins/paddings that you often see with beginners, so I think you’ll really benefit from exploring what the box model is actually about in detail.

Hey @HaakSan, a few more suggestions about your portfolio:

  • The dark text with shadows is too hard to read on that dark background. I think you need to find a different approach there. Same with the dark blue text on light blue background for the project links.
  • Speaking of those links, when I Tab over them with my keyboard, the focus indicator is just about the same color as the background and thus I can’t see it. Same with the inputs at the bottom and the nav links at the top. I would suggest you customize the focus indicator using the CSS outline property on :focus (or something equivalent). Keyboard users should be able to easily tell where the focus is.
  • You should probably only have one h1 heading, so make the last three h2s.
  • None of the inputs at the bottom have associated labels. This is important for accessibility.

Wow, thanks once again! I’ve gone through everything and I think that it’s quite finished now. I’m happy with the structure, of course there’s always something to improve but I believe this is decent. I’m still working a bit on details and hope to build a drop-down menu for mobile phones. That’ll take some practice though. Thanks once again!

Hi bbsmooth, thank you for your suggestions! I didn’t really settle on the colours yet, just seeing what’s fun and what looks nice. I’ve gone through all your suggestions and fixed my page accordingly. Thank you very much!

It’s looking better @HaakSan. I can read all the content on the page. Semantics are very good. I can see the keyboard focus for the most part (I still think you need to make it better for the inputs and button at the bottom of the page).

You do still have issues with the <label>s you added. You didn’t give them any text, so basically they aren’t doing the job they are supposed to be doing. You need to have some actual text inside of the <label>. Unfortunately, the placeholder text you are using is NOT a replacement for label text. Also, you nested the <label>s within themselves.

  1. You have some property names on the #welcome-section for the text align and padding reversed. You have align-text and bottom-padding it should be text-align and padding-bottom.

  2. The value for background on the #navbar should be transparent not opaque. But you do not need to set that as the element is transparent by default.

  3. For the transitions I would suggest you give the main selector the transition property and set the property, duration, and timing. Then on the “trigger” selector have the “state change”. If you need to transition multiple properties you can use a comma-separated list.

Examples (just the relavant properties):

.project-tile {
  transition: transform 1500ms ease-in-out;
}

.project-tile:hover {
  transform: scale(1.1);
}


#navbar a {
  transition: background-color 2000ms ease-in-out, border-radius 2000ms ease-in-out;
}

#navbar a:hover {
  background-color: lightgrey;
  border-radius: 100px;
}
  1. The transparent navbar doesn’t really work that great when you scroll down the page, it becomes hard to see when it’s overlapping other elements on the page. Usually, you would use JS to switch the background for the nav on scroll.

Simple example:

#navbar {
  position: fixed;
  width: 100%;
  top: 0;
  text-align: center;
  font-weight: bold;
  text-shadow: 2px 2px pink;
  z-index: 1;
  transition: background 0.3s ease-in-out;
}

.isScrolled {
  background: rgba(46, 119, 148, 0.8);
}
const nav = document.querySelector("#navbar");

document.addEventListener("scroll", () => {
  if (window.scrollY > 200) {
    nav.classList.add("isScrolled");
  } else {
    nav.classList.remove("isScrolled");
  }
});

@HaakSan, since this is your first post I looked at this and some of your other projects. Some things to revisit with all of them;

  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.

Hi bbsmooth, thanks again for the help. I’ve changed the labels now that they’re actually there. Just for me to understand; the labels are there so for example visibly impaired users can understand the required inputs? I was hoping to build a contact form without the usual labels, perhaps with the labels inside the input boxes. Anyways, for now it should be good. I’ll look at the keyboard focus more, I’m just trying out what works :slight_smile: Thanks!

Hi Lasjorg, thank you very much for the comments. I was wondering why some of the CSS comments didn’t work :sweat_smile:. I’ve made the page a bit smoother here and there. Thanks for the JS suggestions, I’ve just started the JS course so once I’m more capable with that I’ll try and use it to optimise my page!

Thank you Roma, I’ve gone through all of the W3 C validator topics for my main page and now it’s without any issues. However the codepen is now showing an error with the HTML tag:

’ Just HTML that goes in the goes here. Learn more

I suppose for normal website hosting tools HTML & Doctype are required, however it isn’t in codepen?

I’ll go through all the other sides, thanks for the “< br >” suggestion. I don’t know where I got the idea at the time but I see how messy it is. Thanks again!

Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
You can read their official documentation.