Tribute Page With Proper Code

Code Feedback
1

Hey Everyone Kinldy check-out my Tribute Page and feel free to give me feed back as much as you Can, So that I can improve myselff.

Project :point_right: : https://codepen.io/_ruchi_kumari/pen/poMPaxY

2

hi there! Can you verify your email with codepen so that we can review your page in full page mode? (it is not available till you verify your email address)

3

Hii Can You tell me how to do it ?

Actually I’ve done it but don’t what happened now ?

4

it doesn’t seem to have been verified yet because when I check I see this message:

The owner of this Pen needs to verify their email address to enable Full Page View.
Their name is Ruchi kumari. Feel free to pinch them in the leg for us. For now, you can see the Pen in Editor View.
``
5

Hi @be_happy

You don’t need to verify your CodePen account. I find it easier to view code and rendering at the same time. Makes it easier to debug. Plus you can see how it looks at smaller sizes.

Here is a list of suggestions / bugs:

  • the text HTML appears on the top left of the page.
  • use fallback fonts as the last option as not all fonts are fully supported
  • when the font name contains a space, nest the name in quote marks
  • #img-div doesn’t not appear centered
  • the horizontal scroll bar appears, maybe resize some of the elements
  • li elements should be direct children of the ul element. You can nest div elements inside li elements, but do not nest li elements in div elements.
  • also, avoid using br elements with li elements
  • the padding property cannot take auto or negative values
  • consider using relative units for font-size

Happy coding

1 Like
6

Here is It’s Updated Version.

:point_right: https://codepen.io/_ruchi_kumari/pen/poMPaxY

Feel Free to update me if any more feedbacks. :partying_face:

7

Hi there!
Good work so far.

You need to make your page responsive for small screen size as Teller suggested.

8

How can I do that ?

Can you explain me?

9

You need to learn about css @media query selector.
Here’s is the FCC responsive web design curriculum challenge link below, in this challenge you can learn about small, medium and large screen sizes media query:

10

Yeah , when I’ll reach there, then I’ll surly apply.

1 Like
11

Can you please check my updated version. And suggest me more feedback please.

12

Hi @be_happy

When setting margin: 20px; it is overwritten later in the selector by margin-bottom: 10px; and margin-right: 30px;

So set any properties either grouped together for simplicity, or set it using a single line of code, to avoid overriding a css property value.

#img-div {
  height: 115%;
  width: 95%;
  border-radius: 20px 20px;
  margin: 20px;
  background-color: white;
  border: 10px solid #EE66A6;
  margin-bottom: 10px;
  margin-right: 30px;
  padding-right: -1px;
  padding-left: 1px;
}

Use validation services like validator.w3.org for html or jigsaw.w3.org for css.

There are lots of others you can also use.

Great use of box shadowing.

When you learn more about media queries, try resizing the browser to see how responsively the page performs.

image
image808×608 112 KB

Happy coding

13

Error Msj
Error Msj1285×386 28.3 KB

I’ve checked this , but why my code is wrong ?

To center any text we use text-align property , So why is it saying that it is wrong ?

14

Try fixing up the other errors, then test again.

Also use different validators.

In your CodePen you used the text-align property. Not sure why you are receiving an error for align

Happy coding

1 Like
15

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