I finished my first project

Code Feedback
1

hello guys i finished my first project its a whole lot of messy… pls look at it andtell me what to correct.
https://codepen.io/bezb/pen/oRgGro

1 Like
2

@BezB

Hi there,

Nice first project.

I want to suggest the following:

  1. Create another <div id="article"></div> (after <div id="tribute-info> and close it just before <hr>) . This wraps the main content of the page
  2. Add the following code to your CSS:
#article {
  width: 70vw; /*You can also use %width or max-width*/
  margin: 0 auto; /*Setting Right and Left margins to auto centers content*/
  line-height: 2em; /*Increases space between lines*/
}

footer {
  text-align: center; /*Centers footer text*/
}
  1. Maybe you’re just trying out the <h3> to <h6> elements to see how they display. But if you were not, then it is better to make the sub-headings all <h3>

Here is the output: https://codepen.io/mdotcoder/pen/jobOXb

And of course, there is always still more that can be done. Happy coding!

2 Likes
3

thank you soo much
i am working on that ASAP

2 Likes
4

I moved this on its own thread. Please create new threads when asking for feedback.

Happy coding! :slight_smile:

EDIT. I didn’t know OP already had a thread. I ended up merging that here.

5

@BezB, nice first attempt but there are some things you can do to clean it up.

  • codepen provides you with validators for HTML, CSS and JS. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link. You have a few errors in HTML that it will show you that you need to clean up.
    For instance, the first few errors that it tells you about is because of the errors you have in your img element.
    You currently have;
    <img src="http://ends.ng/wp-content/uploads/2014/02/Umaru-Musa-YarAdua.jpg" alt= Shows an image of Umaru Musa Yar`Adua id="image">

and it should look like;
<img id="image" src="http://ends.ng/wp-content/uploads/2014/02/Umaru-Musa-YarAdua.jpg" alt="Shows an image of Umaru Musa Yar`Adua">
Notice the location of the id and the use of quotes around the alt text

  • the <p> element does not take numbers
  • instead of using <br> to break up your paragraphs wrap each of them in paragraph tags.
  • the lessons pointed out that the header elements (h1, h2, h3…etc) should be used in order. You can use them more than once though. It would be okay and look better to keep all the headers in your tribute part as h3

If you clean it up and want us to take another look, post to this thread again.

6

hello guys, i just finished my first project and its a whole lot of messy, pls look at it and tell me what to correct.
https://codepen.io/bezb/pen/oRgGro

7
  • Your h elements are very small, you also can reuse h elements as long as they make sense. All your headers to your paragraphs could probably be grouped as a h3 element.
  • Try experimenting with your CSS. As of right now you have almost no styling.
  • Dont use <br> in your html. Instead wrap each paragraph with a p element and add padding/margins to your paragraphs.
  • p elements don’t behave the same as h elements. There is only a single p element, you can’t add numbers to it.
  • Your footer has a class that you didn’t use in your CSS.
1 Like
8

Its a nice start, here is some things i can improve upon:

  1. Verify your codepen account email. I cannot view your page in full page mode (change view button) unless you verify.

  2. Try adding two layers to your page. For example, here is what my page looks like:

FCC: Example Flex-Box Template

image
image1280×984 192 KB

You can see how I have a background color and put my content in one main container in the center. It is best to do this on smaller.

I also suggest putting less text. Summarize it into bullet points and make a timeline.

Notes

Please hit the reply button or I do not get notified.

Helpful tools–> https://codepen.io/Mike-was-here123/post/check-out-these-sites

9

This is the same as your other thread I finished my first project in this forum. I responded to that thread