My very first Webpage... updated, much better now I hope

Code Feedback
1

Hi all, I would like to have some feedback about my first project from freeCodeCamp, it is also my very first webpage I have done. I have never done HTML or CSS before, or for that matter, any coding at all…

Here is the codepen:

2 Likes
2

HI @ingwenya !

Welcome to the forum!

I think your page looks good.

I would revisit the lesson on giving links meaningful names.

Wikipedia article is not that accessible.

Image tags need alt attributes.

You have a few errors in your html.
Run your code through the html validator

Hope that helps!

1 Like
3

Thanks alot! It helps me very much. I’m just starting out, and I have SO much to learn still… Thank you for the w3c site, I installed the extension in Atom, works very well.

4

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

  • Run your HTML code through the W3C validator.
    • There are HTML syntax/coding errors you should be aware of and address.
    • Since copy/paste from codepen you can ignore the first warning and first two errors.
  • Do not use the <br> element to force line breaks or spacing. That’s what CSS is for. There are places where you use it where you should be using CSS, other places where you’re using it where you should be creating a new paragraph element.
  • The following snippet from your code is repetitive. What can you do to clean it up?
#p1 {
  font-family: Calibri;
  text-align: left;
}
#p2 {
  font-family: Calibri;
  text-align: left;
}
#p3 {
  font-family: Calibri;
  text-align: left;
}
#p4 {
  font-family: Calibri;
  text-align: left;
}
#p5 {
  font-family: Calibri;
  text-align: left;
}
5

Thanks @Roma, very helpful. I grouped the #p selectors all together, much shorther :sweat_smile:.
As to the <br> element, as I then now understand it, use the <p> element for paragraphs, but outside that I should make use of CSS?
Something like display: block?

6

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

7

You can also use classes for your next project to achieve the same result.

This code

#p1, #p2, #p3, #p4, #p5 {
  font-family: Calibri;
  text-align: left;
}

could be rewritten like this

.para-text {
  font-family: Calibri;
  text-align: left;
}
8

@jwilkins.oboe thanks for all the help everyone! :sweat_smile:
Thanks for the .para-text hint…

9

@Roma @jwilkins.oboe I got rid of the #p CSS selectors all together, and made use of the #article to nest all the <p> elements. All the values were given to #article.
I also cleaned up the all the <br> tags, and cleaned up the <p> tags.
Thanks again for pointing me in the right direction. :grin:

10

Looks better @ingwenya. Nice job.

there are still some leftover br elements, for example line 9. Adding some margin or padding will accomplish what you’re attempting.

11

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