Tribute page Feedback Mich

Project Feedback
#1

Hello everybody,

Could you give me some feedbacks for my tribute page? Thanks a lot

https://codepen.io/gasppp/pen/abmgmMx?editors=1100

#2

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

  • First off, verify your email addr with codepen so we can see your project full screen
  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 8/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • It’s an error to place the style elements in a stylesheet. They are only used in the head element when doing internal styling and all your styling should be external. (Remove them because they will cause problems)
  • It looks like you have two instances of your page
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links. For a more thorough explanation read Web Accessibility in Mind.
    • “wikipedia” is not accessible
#3

Hello and welcome to FCC! That looks like a nice project! I like the MJ’s vibe and the colors you’ve chosen. You’ve also wrapped some of the text beside picture which is nice.
I liked the image caption as well!

As far as other kind of feedbacks, I think for the next steps you can focus on having the caption right beneath the picture as it wasn’t there when I ran your codepen.
You can also use the same fonts and same range of numbers so the whole webpage looks more consistent.

When those parts are done I would focus on not using ul and li HTML elements to have text and image beside each other. There are other ways to achieve that like flex-box or grids which are CSS codes (and libraries) to have elements beside each other.

Having said that, I wish you luck! And hope you get more and more exciting accomplishments in the world of coding and programming. :call_me_hand:

#4

Hi there! Thanks a lot for your support and feedbacks. Here’s the modified tribute page. Wish i could get more feedbacks: https://codepen.io/gasppp/pen/abmgmMx

Cya

1 Like
#5

Some things to revisit @gasparedelvecchio;

  • Run your HTML code through the [W3C validator] again.
    • There are HTML coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • This is an issue that was mentioned previously. Accessibility is about being accessible to all users. Review the links that were provided previously.
    • “wikipedia” is not accessible
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens

I don’t often comment on styling because I’m not the best but may think about;

  1. making the image a little smaller. It’s huge even for a desktop
  2. there is an excessive amount of whitespace between the writeup and the tribute link

On a side note, you need to hit reply in my post (not the generic reply button at the bottom of the thread) or mention my name (@Roma) otherwise I don’t get notified that you’ve responded. I just stumbled across this.

1 Like
#6

Nice changes! Your project is now officially evolved! Good job!
The fonts are consistent, there is no more unnecessary ui/li elements and so much more!

Adding to the points that Roma made which I think you can definitely work on those as the next steps, I would add the following.

  • Thinking about what you want to display and the way you want to display it. This would help in knowing if you want to keep the image size and position as is and change the caption or you may want to keep both and add another caption about MJ. Planning and designing the next step would be very helpful.

  • As your project grows you would see the need of using multiple div’s try to define classes and id’s in your CSS and assign those to your div element instead of creating style for div itself. You may not have to do this for other elements but div’s are tricky, their numbers grow so fast.

  • Another CSS tip could be that since having both px and rem/em might be a bit confusing you can just use one of them so you have a picture of how far things are from each other.

Good luck! Let us know how things will go!

1 Like
#7

https://codepen.io/gasppp/full/abmgmMx

Thanks a lot for your feed! Really appreciate the patience. Here another try!

#8

That looks better @gasparedelvecchio but there are things you need to revisit;
Run your HTML code through the W3C validator

  • There are HTML coding errors you should be aware of and address. (This is an important tool, make use of it)
  • Read the accessibility links again. “click for more info” is not really accessible either. Think of someone with a screen reader. Not everything on your page is read and to just hear “click for more info” gives them no context (or a reason to click)
  • Narrow your browser. On smaller screens some of the content falls out of the .biography container
#9

https://codepen.io/gasppp/pen/abmgmMx?editors=1100

I can’t fin a way to fix out the 3th point ( content falls out). I don’t know if it is about the layout or viewport or something else.
Thanks for your support

#10

There are a couple of things wrong with your media queries, for example:

@media screen and (max-width: 480) {
    {
		width: 100%;
	}
  @media screen and (min-width: 1200) {
        {
		    font-size: 200%;
	    }
  }
}
  • you’ve nested one media query within another
  • if you define a min- or max-width, you’ll need to use a unit like 480px instead of just 480
  • in your first query, you set the width to 100%. But for which element? The <h1>? An <img>?

A correct media query would look like this:

@media screen and (max-width: 480px){
    .my-img-div {
        width:100%:
    }
}

Maybe revisit some of the lessons about media queries?

#11

@gasparedelvecchio, I see what you’re trying to accomplish with the styling. Having the bio kind of line up with the image. Let’s run down some things.

For a small page like this you probably don’t need to use media queries. One of the first things you can do to help with responsiveness is use relative units (em, rem, percentage, vh).
Regarding the media queries you added. Nothing is being targeted. There are property: value; pairs with no selectors. The other part of that is, with the media queries at the top like that they’d be overwritten by the selectors underneath. Remember the C in CSS stand for Cascading
The FCC lesson on media queries is short so this is something you may need to research further to fully grasp the concept.

When you start working on responsiveness start with the narrow view first. This is especially true when using media queries but also works here.
You set a max-width on the bio container. Narrowing the browser you see the content spills out. What if you made that max-width a little wider? It wouldn’t detract from your design and your page looks good on smaller screens.

In addition to keeping (and using) the validator to check your code get familiar with dev tools.
Search for chrome dev tools and for now concentrate on the “Elements” panel.

Hope all this helps.