FAQ: Setup and Syntax - Intro to CSS

Frequently Asked Questions Uncategorized
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Intro to CSS” exercise from the lesson “Setup and Syntax”.

FAQs on the exercise Intro to CSS

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

Hello everybody!

I have a question, I just finished Semantic HTML lesson where I learned how important/good practice is to use semantic tags, but the next Intro to CSS all I see is

's with a class. Why is it done like that?

7 Likes
3

Hi @phantom78

Could you give an example as to what you’re trying to explain?

I need a little clarification before I try and answer your question.

4

So I was taking a look at the stylesheet for this intro to CSS and I noticed something unfamiliar to me. I understand that the margin and padding below are being targeted by the (html > body) selectors respectively.

What I don’t understand is why (font-family & font-weight) is being included in a separate body selector on their own? Why not include it (font-family & font-weight) within the same (html > body) selectors shown below?

html, body {
margin: 0;
padding: 0;
}

body {
font-family: ‘Roboto’, sans-serif;
font-weight: 100;
}

5

Hi @fermn,
Many thanks for your reply, I noticed that my question isn’t as I tried to write it. I was asking about div 's and semantic.
here is a bit of code from the NY City Blog that we worked on at the end of Semantic HTML lesson:

[codebyte html]

New York City

<article>

[/codebyte html]
As you can see, we are using header, main, section etc. but the very next lesson about CSS, the code looks like this:

[codebyte html]

A city in the midst of reinventing itself and continuing to build on the... [/codebyte html] And there's no semantic html code at all (or hardly any, can't remember), everything is only with div 's.

So that’s what is confusing for me.

6

uf, I see I’m still struggling to copy the code, I thought codebyte is the way.

7

I know it is too late. Can you add the screenshot for the same?

8

Hi @phantom78, I just finished the Learn HTML course and decided to start the Learn CSS course next and had the exact same question also, on why everything is structured with div’s ?
Thanks for bringing that up, I realize it’s not imperative to this first lesson of Learn CSS but just thought I’d let you know that the question immediately crossed my mind as well. Thanks!

4 Likes
9

I have the same question.

When you start with this lesson: Intro to CSS. The code in the example is this one.

...
<div class="nav">...</div>

<div class="main">...</div>

shouldn’t it be used the header tag, nav tag inside the header, and so on?
and then add a div in order to style the container?

5 Likes
10

Hi everyone,

The same thing happened to me. After reading 2 articles about the importance of semantic HTML for the Front-End Engineer course, we jumped on to CSS and all I see is <div> everywhere… WTF?!

I understand they have different people to create the exercises, but please put someone to revise the code for the course because not even the indentation is consistent for all the exercises. Also, sometimes one exercise explains something but the following exercise contradicts the previous one.

Please, fix those issues because for someone who just start learning web development makes it more confusing than what already is; and we are paying for this

Thank you,

7 Likes
11

Yeah +1 to the comments above me. I’m on the Full Stack pathway. Seems absolutely weird to spend a whole unit hammering home how important semantic HTML is for accessibility and SEO and then to immediately revert to a bunch of non-semantic code in the very next session. Such a wild inconsistentcy in what you are teaching vs. doing.

4 Likes
12

I noticed this as well. I believe it’s used with CSS in order to have different sections of the page styled the in the same way even though they are separated by other portions of the page. This is what I found as an explanation.

“The difference between an ID and a class is that an ID is only used to identify one single element in our HTML. IDs are only used when one element on the page should have a particular style applied to it. However, a class can be used to identify more than one HTML element.”

13

@ phantom78
I just came here to post just about that and found your comment at the top! I couldn’t agree more. If semantics are so important than why not continue the lessons following appropriate semantic code vs. going back to defining things the old way with <div id=" ">. it’s counterproductive and confusing.

3 Likes
14

Reading through this thread is great, I was doing the exercise wondering the same thing. I’m not sure if they revised some courses and did not update others but it is a bit annoying to see they emphasize an entire section on Semantics and then in the first CSS lesson they give us

15

why always add div class=container after any element . is not enought to put ‘‘header> or <nav’’ ???
my question is about the intro to css. first page.

16

same question for me… :frowning_face: :frowning_face:

17

Just like everyone else… disappointed to see all the SEMANTIC HTML directives ignored.

Even more disappointed that we’ve had no definitive answer from a Code Academy authority. I don’t care what the answer is, I just would like one.

1 Like
18

Just adding my voice to the cacophony of people thrown by the transition from the Semantic HTML lesson to the first lesson in CSS. Codecademy, perhaps you should put an explanation on the first CSS lesson as to why semantic HTML is not used, or at the very least, put an explanation on this thread!

1 Like
19

Came here to comment on how jarring it is to find a CSS course with non semantic HTML directly following a series of lessons on the importance of semantic HTML. Disappointed to see so many comments pointing out the same exact thing going back several years with no real response from codecademy. I just signed up for pro, it’s concerning to me this is a known issue that hasn’t been addressed.

1 Like
20

What is this?

<head>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,100' rel='stylesheet' type='text/css'>
<link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <h1>Innovation Cloud</h1>
        <p>Connect your ideas globally</p>
        <a class="btn" href="#">Learn More</a>
      </div>
    </div>

So you have both header and a generic div container with an attribute "header", don’t you? That’s not what I think I was taught in Learn HTML! Is there a special reason for this?