My first project for fcc web design

Code Feedback
1

Hello everyone just completed my first challenge on freeCodeCamp, this is my project: https://codepen.io/sanele-mkhize/pen/mdEQKgv.

2 Likes
2

It looks good, but maybe try different colors in the body? I think your syntax is great, maybe just use color a bit more to make it less monochromatic looking?
And I would add a DOCTYPE designator on your html page

3

Hey @sanelerudolph!

I think your page looks good.

Just a couple of things.

  • I ran your code through the html and css analyzer in codepen and there are few errors that need your attention.

  • There is one user story that currently is not passing. I would take a look at that in the test suite.

Hope that helps!

4

Alright thank you for the response, I was really was not sure what was the issue cause the image was resizable.

Kind regards

5

When I restructured your img div in the html and used the max-width property for the image the tests passed for me.

 <div id="img-div">
             <img id="image" src="http://www.romanpichler.com/wp-content/uploads/2010/10/UserStoryOverview.png" alt="user-story">
             <div id="img-caption"><strong>Figure 1</strong>: User Story Example</div>
 <div>


img
{
  margin:0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}

Hope that helps!

6

Let me try.

Thank you :slightly_smiling_face:

7

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

  • The test script should be included, with all tests passing, when you submit your projects.
    • Your page passes 9/10 user stories. Click the red button to see which test(s) are failing and text to help you correct the issue. Read all of the failing message, not just the first line. (Someone already gave a partial answer)
  • Codepen provides the boilerplate for you. It only expects the code you’d put within the body element in HTML. (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.
    • The link to the font goes in the box labeled ‘Stuff for <head>’
  • Run your HTML code through the W3C validator.
    • There are HTML coding errors you should be aware of and address.
  • Codepen provides validators for HTML, CSS and JS. Click on the down arrow in the upper right of each section and then click on the respective ‘Analyze’ link.
    • The one for CSS is good. Use it, there’s something to clean up.
    • (The one for HTML misses things which is why I recommend W3C)
  • Accessibility is about being accessible to all users. Review the lesson about giving meaningful text to links.
8

Hi,

Alright thank you for those insightful points, I will revise the webpage and apply the necessary changes.

Regards

9

I managed to rectify all the issues, and all the tests are 10/10.

10

Good job cleaning things up @sanelerudolph. There are a couple of things to revisit;

  • Running your code through the W3C validator there’s an error for ul not allowed as a child of ul. You are not nesting the list within the list. A quick search for “nesting lists” comes up with quite a few example the first one being this which has a pretty good explanation too.
  • Something else I noticed. You use the strong element for your dates but they do not show as such.
    • This is because when you linked the font you only gave it a light weight. To work as you want, select two weights…the regular 400 and the bold 700.

On a side note, maybe rethink having the sup's. The numbers like that are normally used for linking to footnotes citing references / sources. (It’s your design choice)

11

Hi,

Okay thanks again for the insight I have rectified my nested ul, so I removed the <sup> tag in the numbers, and then for the strong tag, I created a class for build.

Kind regards
Mkhize Sanele

12

Good job properly nesting the list within the list.

This issue isn’t about having a class for the strong tag. The issue arises because the browser does its best with what it has.
The font you link has a weight of 300. That’s what you chose.
If you go back to google fonts you’ll see that the ‘Open Sans’ fonts has quite a few weights to choose from. Most would select the regular (400) font but it’s okay that you want to go lighter (300). But when you ask the browser to go bold and/or strong, it cannot because it only knows the 300 weight. You need to select the 300 and also the 700. Then you’ll see on your page the dates will indeed be bold. Not looking the same as the the rest of the page.
What I’m saying is you’re allowed to select more than one style and for the way you’re coding your page you need to select more than one style.

So this;
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">

need to be something like this;
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap" rel="stylesheet">
for your page to display the way you coded/want.

13

Hi,

Thanks again for the insight, I was kind of confused since when I looked at the tag , the weight was different. But I see what you mean when I substitute : wght@400;700&display=swap.

Quick question: Which font weight is rendered in the webpage: 400 or 700. Or is this supposed to say that the min weight we can have for weight is 400 & max 700 (If the font-weight is ever adjusted.)?

Kind regards
Mkhize Sanele
14

Throughout your page the font weight rendered is the regular (400) until you use the strong or bold tag. In that case the bold (700) is used.

When looking at googles fonts, in the upper right it will tell you how many styles the particular font has. Some only have one or two.