Second try first challenge

Code Feedback
1

Hi all!

I finished the first 5 challenges last week and am trying to revamp my buggy first projects.

I thought that maybe some of you had some tips how to make them better.

This is my revamped pen:

The original was this pen btw:

Thanks!

2

Greetings @profesortitus,

The background image is interfering with the text, as it can be selected by the user, making the text unclickable. Set:

position: relative;
z-index: -1;

To #img_div. This way, the text will always be above the image.

You can add custom fonts by embedding them into your HTML, check out https://fonts.google.com/.

For example, add this to your HTML:

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

You can add the font to the body by doing:

body {
  font-family: "Open Sans",sans-serif;
  overflow-x: hidden;
}

overflow-x: hidden; is used to get rid of the horizontal scroll bar.

The text below your h3’s is getting cut out by the images, to fix this, wrap the text inside your <h3></h3> around <p></p> tags:

<div id="a1" class="article">
<h3>Tal vs. Veder</h3>
<p>The game Tal played against Veder Visvaldis in Riga is a typical Tal game. His relentless attacking defies common sense. See the full game here:</p>

This allows you to remove the line break <br> and customize the spacings with CSS.

2 Likes
3

Thanks! Much appreciated!

4

The second one looks good @profesortitus. I’m guessing it wasn’t made to pass all the user stories. Some things to revisit;

  • 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 <head> click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
    • The link to your font would go in the box labeled ‘Stuff for <head>’
    • On a side note, the boilerplate for both your pages is incorrect.
  • Don’t use <br> to force spacing. Use margin and/or padding in CSS.
  • Review the lesson about giving meaningful text to links.
1 Like