Tribute page aarya ambekar

I Built This
1

give me feedback!!

Here is my Tribute page.
I create a tribute page for my favorite singer aarya ambekar.

link:
https://codepen.io/swinalpatil00/full/MWbXrxa

2

Hi @swinalpatil00 !

I think your page looks good.

You need to work on responsiveness because there is a horizontal scroll bar for smaller screens.

Please do not use inline styles. Place all of your css in the css section.

<h1 style="text-align:center;color:#ff0a0a;text-shadow:2.5px 2.5px 4px #1a3644;font-size:3rem;">

Img tags should have alt attributes.

You can cut down on reptition by grouping classes together that share the same styles

Example:

.para, .pre {
  text-align:justify;
  font-family: 'Raleway', sans-serif;
  font-size:20px;
  font-weight:normal;
  color:black;
} 

.para{
  letter-spacing:1px;
  word-spacing:7px;
}

Hope that helps!

3

Your page looks good @swinalpatil00. Some things to revisit;

  • Keep the test script when forking the pen (<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>)
    • The test script, with all tests passing, should be included when you submit your projects.
  • 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.
    • For instance links to fonts go in the box labeled ‘Stuff for <head>’
    • There are also elements that are placed incorrectly. Review this for an understanding of the HTML boilerplate tags.
  • Run your HTML code through the W3C validator.
    • There are coding errors you should be aware of and address.
  • Keep all your styling external. Do not use in-line styling.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for.
    • Reference MDN Docs
    • There are HTML coding errors you should be aware of and address.
  • Make your page responsive. Remember, the R in RWD stands for Responsive
    • There’s a horizontal scrollbar on smaller screens
4

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