Hi all, Tribute Page from FCC. It's very basic and similar to the example, but that was kind of the point

Code Feedback
1
2

I’m just going to push back a little on you here and say that creating something basic and similar to the example is not the point. The point is to further your understanding of HTML/CSS and responsive design. If you think you did that with this project then great. But if not, then I would scrap what you have and start over from scratch because you are only robbing yourself from learning.

3

Hey @marxy2810!

I found some issues when I resized the browser window to be smaller.

picture covering
picture covering948×780 153 KB

box-shadow issue
box-shadow issue742×854 31.1 KB

When it comes to the design, yes it is similar to the FCC sample colors and layout. But you did inject some of your own personal touches like the box shadow in the middle. That was a nice addition.

I don’t think you need to scrap this project and start over. For future projects there is nothing wrong with simplicity but don’t feel like you are bound to the stylistic choices of the FCC samples. Remember that the projects only have to be functionally similar not stylistically similar.

Hope that helps!

Congrats on your first project!

1 Like
4

Yep, fair comments. What I meant was that I wasn’t trying to do anything spectacular here, its very early in my learning so I was happy to be able to put the bits and pieces together, did I understand why and what I was doing. So I suppose mate yep, I would agree that I did definitely learn something. Appreciate the feedback though.

5

Oh wow I never noticed that. Not even sure where to start to fix that :weary:

Thank you, yeah I didn’t do anything out there because I mean I could have changed colours etc etc but I was focused on getting the job done. I will probably use this as a canvas for trying new things over time.

Also thank you v much! Glad to finally get something out of my learning.

1 Like
6

For the box shadow, it looks like this might be your issue.

/*img caption*/
margin: 40px 300px 150px;

I would reset the margins for smaller devices. This might work.

 #img-caption {
    margin: 100px 0; 
  }

For the image, I just deleted margin-top:-250px; from smaller devices and that seemed to work.

1 Like
7

My hero. Worked perfectly. I suppose a case of over engineering at times. Like the margin-top for example, which didn’t need to be there.

Thank you!

8

Welcome to the forums @marxy2810. Your page looks good. Some things to revisit;

  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
  • Make the project from scratch, with your own code, style and content. Don’t take code from the sample project.
    • There are parts of the HTML and CSS that look the same as the sample project. For instance, this property: value; pair;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif; You neither link to “Roboto” (head element in HTML) or import it (CSS). It shouldn’t be here. One or two fonts with a fallback font will suffice.
  • Keep your like media queries together.
    • You have two instances of @media (max-width: 460px). Just have one and put the selectors into that one. It will make maintenance easier.
  • I don’t normally comment on someone’s design choices because it’s what they choose but I find this odd. You have;
<p id="quote-p"><span id="quote-big">“</span>Nevin Spence is still the blueprint for what we want from every Ulster player<span>“</span></p>

And you styled it as;

#quote-big {
  font-family: "Merriweather", serif;
  font-size: 40px;
}

Couple of things about it;

  1. you neither link to (head element in HTML) or import (CSS) the Merriweather font. (And why would you just for quotes?)
  2. There are huge quote marks at the beginning of the quote but normal ones at the end.
    If that’s a style choice ok but, it looks odd.
2 Likes
9

Thank you for the feedback @Roma.


  • I didn’t realise I had a left that in there. All of it looks the same after while.
  • Given the sample uses ‘wikipedia entry’ I did the same.
  • Fair comment - I looked at these fonts etc in the sample before starting and thought I would use them and never cleared them out. Some times it is difficult not to copy code if what you plan to write is already written in front of you, no?
  • Not sure what you mean about the media queries - how do I put them together if the two selectors have different font-sizes??
    1. Similar problem to before, was supposed to take that out as obviously it defaulted to the serif font. 2. Not a choice, I struggled to get the quote marks at the end big as well, but I’ve since managed it.

Really detailed and quality feedback. Much appreciated and thank you. Hopefully the changes I have made reflect said feedback. Only trying to get better!

1 Like
10

You are missing the property on the transitions. You have to tell the transition what properties it is you are transitioning.

For example for the scale() function, it would be transform.

#quote {
  margin: 50px 0;
  transition: transform 0.3s linear;
}

#quote:hover {
  transform: scale(1.1);
}
11

These two media queries are for the same screen size and the two selectors target different elements. Doesn’t matter that the font sizes are different.
Your statement is like saying at full screen, h1 and #img-caption cannot have different font sizes.

@media (max-width: 460px) {
  h1 {
    font-size: 3.5rem;
    line-height: 1.2;
  }
}

@media (max-width: 460px) {
  #img-caption {
    font-size: 1.4rem;
  }
}

On a side note, if they were styled with relative sizes (em, rem) initially, rather than hardcoding a pixel size, you probably wouldn’t need a media query.

The projects aren’t just another challenge. Each one is meant to be a significant step in your progress. Every project you do will require research, planning, trial and error, and strengthening your skills beyond what you gain from the incremental challenges.
Don’t look at the sample projects code as a way to do your projects.

Good job on cleaning things up.
Happy coding!

12

To be fair that is how the media queries are done in the example project. Each media query is placed below the selector that it is changing styles on.

I often prefer it like that as I can more quickly find the selector and see the style changes in the media query without having to scroll all the way down and then have to find the selectors in some big media query with all the changes to all elements at that breakpoint.

Sure you get some media query duplication, but personally, I like the structure and organization it gives. But you do have to be mindful of the cascade when doing so as well.

1 Like
13

@lasjorg, yes I realize there are two schools of thought on that and I’ve read the pros and cons of both.
Guess it’s just been ingrained on me to use one because of the last couple of places that I’ve worked.

1 Like
14

@Roma thank you very much for the feedback. I see what you mean regarding the media queries. @lasjorg that’s fair, I suppose everyone will have their own way. Thank you both for this feedback.