Personal Portfolio Page - Technical Touchups

I’ve been working on this project for a while, due to some previous difficulties with the JS and HTML (which was fixed with the help of another user). However, now that I have completed the barebones for the tests and have passed them, there are still some things that aren’t quite working properly. I’ve tried a multitude of things by now, but I can’t seem to get the elements to work, even when I know that I’m using the right code. I’ll list them here, if you find anything else that I should take care of but haven’t noticed, please let me know. Any suggestions and advice would be appreciated, thx!

  1. I can’t get the header for my projects section to sit properly above the media cards, it looks like somebody hit the enter key 4 times before you get to the actual projects. (Also, quick note about the cards, I am well aware that only 1 of them has animation that works, either the JS isn’t written to allow for multiple animations, or something isn’t right in the HTML, because I can’t get the 2nd or 3rd cards to flip. I haven’t officially taken a JS course yet, but I’ve done some learning here and there, so I don’t understand enough to know how to fix it.)
  2. My about section is squished up against the bottom of my projects section, and no matter how much em or px I add to the padding and/or margin, it doesn’t change.
  3. I can’t get the contact links to unstack from the y-axis and spread out horizontally. (Also as far as there being only 1 image, I couldn’t find any png on the web for the others that weren’t absolutely massive in size and were able to be edited with code.)

Here is the link to the pen (full page view): https://codepen.io/NeonFoxX/full/rNWQzjv

Thank you so much for the help, as a rookie who hasn’t coded for a quite a few years, I deeply appreciate it.
Crow

P.S. Sorry for the wall of text, and if anyone knows of any better categories to ask these types of questions in please tell me. I can never figure out the right ones.

Hi
I am at a similar point to you and technically have done the portfolio page to the point where it passes the tests but I am not yet happy with it as I like to produce something that looks as good as the example.
It is actually quite easy to produce something that looks horrible that passes the tests but what use is that? One thing I have realised is that the way freecodecamp and codepen iteract is wierd and that things which work in any normal functioning code editor don’t work here.
Example in my technical documentation page which passes all tests, my links only work within my media query. The same code on notepad++ works perfectly at all sizes the way god intended it.
So now I tend to have notepad++ open while I’m at codepen so l can check if I have cocked up or if it’s thier wierd software interactions messing with me. Doesn’t solve your problems I know but it might be useful to find out if the problem is you or them. Just copy the code from here into your normal code editor to check.
In terms of header sitting miles above cards or similar remember that most things come with built in margins/padding. This is often dealt with using box-sizing:border-box; for the body/html or *(all elements). This removes all built in margins/padding.
Not sure how the margin works in your .card element as I thought you needed 1,2 or 4 numbers but you have 3. You have an empty href in 1 of your profile links, I believe it’s best to put a # in there. Also using same id on multiple profile links might be an issue as I think they are supposed to be unique & used once.
You seem to be ahead of me in many areas so probably know all this, but good luck anyway.

  1. I’m not really sure what you mean by the header position. But you have set the header to 200px height and then inside it, you have a section element that is set to 100vh height. That doesn’t really make sense.

  2. For the JS you have to get all the cards and then loop over them and add an event listener to each of the cards.

const cards = document.querySelectorAll(".card__inner");

cards.forEach((card) => {
  card.addEventListener("click", function () {
    card.classList.toggle("is-flipped");
  });
});
  1. Your contact section is where it is because you are using float for the cards. You have to clear the container. The simplest way is to set overflow: hidden on the #projects container. I would however suggest not using floats and learning flexbox instead.

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