Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 1

Tell us what’s happening:
I need a reminder what am I supposed to be doing
Describe your issue in detail here.
somethng missing in my code.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html> 
<html lang="en"> </html>
<title> </title>
<main> </main>
<head><meta charset="UFT-8"><meta name="viewport" content="width=device-width, intialscale=1.0"></meta> </head>
<body> </body>
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: Learn More About CSS Pseudo Selectors By Building A Balance Sheet - Step 1

Link to the challenge:

Every element should be nested inside html element

<html>
<element></element>
<element></element>
<element></element>
<element></element>
</html>

You can go back to the previous lesson to see boilerplate of HTML

I did; but still get :frowning:

Hint

One meta element should have a name set to viewport, and content set to width=device-width, initial-scale=1.0.

<!DOCTYPE html> 
<html lang="en">
  <title> </title>
  <main> </main>
  <head><meta charset="UFT-8"><meta name="viewport" content="width=device-width, intialscale=1.0">
  </meta> </head>
  <body> </body>
</html>

Try to skim through your previous lesson. It can give you a picture how you should code your HTML boilerplate

In your code you should have 2 meta element. Each of them should have their closing tag

After html element the next thing is head element and the invisible element of the page such as meta, link, title will go inside head element.

there is nothing like a “refresher”, always helpful :slight_smile:

happy learning :slight_smile:

How about now ? What’s wrong with this ?

<html lang="en"></html>
  <main>
    <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0" name:"viewport">
    <title>selectors</title> <styles.css>

dear,
here <styles.css> is wrong .

this should follow standard attribute syntax
(use an equal instead of a colon)

There is not such thing as a styles.css HTML element.
But there is a link element that you can use to link a stylesheet called styles.css.

Here’s a review from the cafe menu project:
https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-16

1 Like

Thank you that was very helpful :slight_smile:

1 Like