Block and Inline: <Element defaults not really being mentioned so far in the course>
Closed this issue · 14 comments
Checks
- This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
- I have thoroughly read and understand The Odin Project Contributing Guide
- Would you like to work on this issue?
Describe your suggestion
I've just gone through the second CSS exercise from the Block and Inline lesson and was confused to no end about where the top margin of the title element came from. The solution shows that you need to add " margin-top: 0;" to it. But how are we supposed to know this? As far as I'm aware nothing of the sort was ever mentioned anywhere in the course material so far.
After asking for help on Discord, @fireheart eventually mentioned the CSS Cascade lesson where default values were very briefly mentioned. But only in the context that different browsers can have different default values for elements, leading to unexpected behavior.
To me this looks like an oversight because stuff like this definitely needs to be explained clearly in the lesson where it's relevant. And I've probably wasted more than an hour now on trying to figure it out. And being very confused the whole time about why it hasn't been mentioned anywhere so far. When explaining this in just 1 or 2 lines would have already avoided that. Maybe it's missing because of some changes that were made to the course but I couldn't say.
Path
Foundations
Lesson Url
https://www.theodinproject.com/lessons/foundations-block-and-inline
(Optional) Discord Name
spektukal
(Optional) Additional Comments
No response
Acceptance Criteria
- Remove the
margin-top: 0;style from the solution CSS on the.titleelement - Update the screenshot in the README to reflect the above change (the screenshot should show the default margin-top for the "I'm a card" text)
Thanks for opening this issue @spektukal.
Looking at how things are worded in the Cascade lesson, my initial read is that the lesson does already say that some elements have default styles, including some whose default styles create space between them and other elements (exactly like how headings have a default margin to them). And not just in a context about unexpected behaviour between browsers, since that's just an additional thing. i.e. "elements can have default styles, like margins etc. But also some browsers might apply different default styles to the same element".
As frustrating as this can be, it’s important to understand that CSS doesn’t just do things against our wishes. CSS only does what we tell it to do. One exception to this is the default styles that are provided by a browser. These default styles vary from browser to browser, and they are why some elements create a large “gap” between themselves and other elements, or why buttons look the way they do, despite us not writing any CSS rules to style them that way.
So in regards to having the curriculum itself mention default styles of elements more, I'm not sure it actually needs to. @TheOdinProject/html-css @TheOdinProject/foundations thoughts?
What I wouldn't be opposed to though, is making an addition to the 02-margin-and-padding exercise that just reminds people that some elements have default styles already that they might need to overwrite some of them.
Like
This one is a little nicer looking, and a little closer to something you might see in the real world. You'll need to change a little more than just margin and padding to make it look exactly right. Remember that some elements might have some default styles already, and you may need to overwrite some.
Let me know if you'd like to work on that change for that exercise's instructions.
You need to view this from the point of someone who is completely new to all of this. Your response sounds like it's coming from someone who isn't. All I got out of that short mention in the cascade section is that things might look different in different browsers. Which is something I was already aware of before I started this course. I certainly didn't read out of it that every html element has different default values, that include margins and that you have to look up yourself online.
Also the Block and Inline lesson comes 3 lessons after the Cascade lessons. So it's likely that a few days might have gone by when you get to those exercises. Don't you think that it would be a good idea to put that info in again when it's actually needed?
And even the readme of the exercise, nor the solution doesn't mention this anywhere. You just have to look through the file and spot the "margin-top: 0" entry. Then wonder why the hell you might need it. This might seem obvious or easy to figure out for a web developer. But for someone just learning this stuff with no real prior programming experience I'd say it's anything but.
As for your suggestion: I think you should at least include a link to a list with all the default values. And tell people to check it out as an assignment. I only got a link to that after asking for help on Discord but it's really essential for this lesson. And I wouldn't even have thought of searching for it myself as I had no clue about it.
I do hear you. I went through this exact same course before, also from a position of no prior experience in these particular subjects, and compared to some other people on the team here, it really wasn't that long ago since I was last in such a position.
So I've tagged other maintainers to get their thoughts on what action might be appropriate for the lesson material, as their ideas may well be different to mine.
In my sincere opinion (even trying my best to put myself back in your shoes), the current lesson wording is sufficient in saying that different HTML elements will have different default styles applied.
A list of default styles for each element would be both impractical and not pedagogically effective. Chrome's own user-agent stylesheet for basic HTML is well over 1000 lines long and is not something that any web developer is likely to even reference at all.
Instead, what would be more effective and what many of us in the community advise people get more acquainted with when they ask for help there, is to inspect elements using Chrome devtools, as is first introduced in the Inspecting HTML and CSS lesson.
Doing so, you don't even need to know that an element has default styles let alone what they are. You see an element has some weird space around it you don't know where is coming from, you inspect that area and at some point notice the space comes from the heading element itself, and devtools shows you in multiple ways that the space comes from the top margin. Therefore, you just need to get rid of that margin somehow.
This is a common occurrence in the community where people are able to discover these things more clearly when we direct them to these sorts of tools they may not have thought to use.
Hence my suggestion about the reminder in the exercise README itself, perhaps also reminding to make use of devtools to inspect elements. I'm well aware many people around those margin-padding exercises forget about or don't think to use devtools, and in my experience, found those exercises significantly easier once they start playing around with using it (and is exactly how we want things to be). Then we wouldn't even need to explain margin-top: 0 - it becomes self-explanatory if you use devtools, see that the heading has a default margin applied, and are reminded that some elements have default styles.
Sorry but I really don't understand that way of thinking. If I see that something is off, my first thought is: I need to figure out what is causing it so that I can fix it and prevent this from occurring again in the future. But you're suggesting just messing around and trying to find workarounds.
Why is there this margin at the top? Where is it coming from? Who cares? Just add some line to the css file to remove it and it's all good. Honestly I find it hard to believe that professionals who know their stuff would think that way. Not to say that there aren't plenty of people out there who do operate in such a manner, just doing whatever.
So here's my perspective, which might only be useful for someone with my way of thinking. But if the lesson had mentioned that all html elements have some default values. And had linked me to the list that I got from Discord by asking for help there. Then that would have eliminated all confusion for me as I would have been able to figure out what's going on right away. Instead of having to waste an hour or more trying to find an answer with zero hints provided by the course. And if I hadn't looked at the solution I wouldn't even have known that I was supposed to remove this margin manually, without knowing why it's there in the first place.
And I don't see how devtools are supposed to help you figure this out either. Not to mention that it seems kinda pointless to use the browser devtools when you already have the html and css files open and should see more or less the same things in there. But even if you do see that there is a margin set, for which you really don't need the devtools because you can spot it at a glance, just by looking at the site in the browser. But the devtools still won't tell you where it's coming from. Or do they? I just took a look and didn't see any way to figure that out. If there is then that should also definitely be mentioned in the lesson. Just telling people to use the devtools would certainly not be enough.
Also another thing I just became aware of again while looking at the devtools: What does em stand for? It gets mentioned at some point during lessons and seems to be used instead of pixels. But I don't remember it ever being mentioned what it is. Of course you can google it, same as you can google anything. But that begs the question why we should bother going through this course in the first place if it doesn't even provide any basic explanations for any of the stuff mentioned in it.
I'm not mentioning any of this stuff to criticize but to point out things that definitely can be improved. And there's still plenty to improve from what I've seen so far. It does always seem strange to me when people don't seem to want to improve something, thinking that it's already good enough. Just let folks mess around until they either figure it out on their own or give up, having possibly wasted lots of time for no reason in the process.
If I see that something is off, my first thought is: I need to figure out what is causing it so that I can fix it and prevent this from occurring again in the future.
That is 100% what devtools is for, and exactly how web developers (learning or hired) figure what's causing many things such as this. It's not a workaround, but the exact tool you'd use to debug many front end things, which is why we have the "Inspecting HTML and CSS" lesson on it.
vokoscreenNG-2024-05-12_22-39-58.mp4
^ Just sharing an example of how one could use it to figure out where a space is coming from, where you can't tell that just from the HTML or CSS files. We do not expect anyone to be super familiar and snappy with all this, of course not. I do know though that the Inspecting HTML and CSS lesson goes through this tool and the various ways you can use it to view and modify HTML or CSS, highlight space taken by elements in the screen, rulers, etc.
So we have two different things going on:
-
The exercise involves things that literally have not been taught or even mentioned. If this is the case, then of course, we should either mention the thing, or change the exercise to not require it. In this case, we do mention all the things that are needed, so it's not that the curriculum literally does not mention them.
-
People may not recall the specific things that the exercise involves. It's been mentioned, just for whatever reason, they don't recall it. You're right, it will have been a couple of lessons since both the default styles and the devtools stuff. Hence my suggestion to remind people of those things and tools in the exercise. You do not need to know exactly what elements have default styles, nor what they are - especially when they're different between browsers. Even if you had no idea that elements were given default styles, using devtools to discover where the space is coming from is 100% what we have in mind for the exercise. So we should focus on reminding people to use that, where they may well need to revisit that lesson and its contents again.
None of that is time wasted - it's all time it took to learn something. That includes having to go to the community and ask questions, that's just a completely natural part of the learning process, however many questions it takes and however long it takes to resolve the issue. The exercises are not meant to be completed in any particular time frame, nor are we expecting people to breeze through them without issues. It's expected that people will struggle, it's expected for people to need to ask questions at times (and encouraged!).
We go into the specifics of browser default styles and some related topics later in the curriculum, in the intermediate HTML and CSS course. Even when it comes to that point, you don't need to know what elements have what default styles applied, simply the awareness that there may be, or even without that awareness, awareness of how to find out what is causing them.
We also go into the em unit in that course as well, because CSS units is a big topic that is way out of scope of foundations. I don't believe any of our foundations CSS exercises makes use of em or rem in any of the solutions, so if you did find any that did, please raise an issue in the CSS exercises repo, because they definitely shouldn't.
Note that this is not me "not wanting to improve something". I'm just assessing the situation based on what you've shared, what is provided, and my experience with what have been recurring pain points in the community, as well as what also helps resolve them (which has pretty much almost always been reminding to inspect elements, and/or revisit certain past lessons for specific info that may have been forgotten or missed).
Hence my suggestion comes from what I believe is the most appropriate improvement.
You don't even seem to understand what I'm saying. I do not need the browser's devtools to tell me that there is a margin at the top of the first section. You can see it at a glance and as the short video you've recorded shows, you can not tell from the devtools where this margin is coming from, only that it is there. And as default values of html elements were so far only very briefly mentioned in a past lesson and specifically only talking about how different browsers might lead to different results because they all have different default values, I could not have thought of this myself. I was trying to understand why that margin was there and the course provided zero hints for it.
If you still think that it's much preferable to leave this crucial information out of a course that is supposed to teach you everything you need to know, then leave it as it is I guess. I don't see how lack of instruction and creating unnecessary confusion would ever be beneficial though. But I prefer efficient learning, which means providing someone with all the info he needs upfront instead of making them figure everything out themselves somehow. Which is not guaranteed to work out anyway.
Why should people have to waste their time and that of others to ask questions about things that should have been covered in the course? Even our education system is not that ineffecient, no matter how much it loves to waste your time.
But at what point do you cover those em units? Because they do show up during the initial css code. I'm not gonna look through it again but they do appear there multiple times from what I remember. And I do not remember it ever being mentioned. But not big deal. Just google it or ask someone else about it. I really hope the whole course isn't built around this time wasting approach, intentionally withholding crucial information as if to make some point. Or as if to teach people to solve problems on their own. Which is something I'm already doing constantly and would like to minimize, at the very least when I'm going through some structured course that's supposed to teach you everything you need.
@spektukal Personally, I think the best solution here is to remove from this particular CSS exercise solution the margin-top: 0. From a quick look it doesn't seem like overriding those default styles isn't important for the purposes of the exercise, especially since we do not go into default styles until a little later in the curriculum from where this exercise is assigned. I definitely understand the confusion around "why do I need to add a margin top of 0 here?", especially as the exercise doesn't provide any information about needing to do so (or needing to use the dev tools).
Adding an assignment for users to read through all of the default styles of every element is impractical. That isn't something anyone needs to know the exact details for - even once we do get into default styles a bit more. For the most part just knowing that elements may have default styles from the browser is enough; if there's a need to know a specific element's default style, that is something that can be researched on one's own (and doing one's own research is something we try to instill in users).
For what it's worth - and this is something that we could add to our "Inspecting HTML and CSS" lesson if you'd like to open a separate issue for it - when inspecting styles via dev tools, it does state where a style is coming from. For example, in the following screenshot (from a quick Codepen in Chrome), the text in the top right states the location of the styles, in this case the user agent/browser. Dev tools are incredibly important as code bases get larger, as it won't always be just a handful of lines of code and may be several separate style sheets with hundreds of lines of code, and the dev tools make it much quicker to see what is ultimately affecting an element.
It's worth clarifying that TOP doesn't cover everything, and there is a strong focus on a user doing their own research or reaching out to ask questions when necessary as that is exactly how things will be in a professional setting. That's not to say that improvements can't be made to how we cover certain topics, though, as a user shouldn't need to research things that are 100% necessary to complete a project or exercise (there may be times where we link to a resource in a project to help nudge users, but that's partially because the concept may not have really fit elsewhere, and as the curriculum advances there may be less explicit instruction of "Do A, B, and C" and more "You need to get to C"). We are an ever evolving project, and this particular instance may just be something that slipped through the cracks, as I'm not sure if there has ever been an issue raised about this particular thing.
Another thing is that there may be mentions of things we don't explicitly cover yet, such as em units being visible if you were to inspect the TOP website styles. It's an important skill to be able to zoom out and see the bigger picture (how to inspect the styles of a website via dev tools) rather than focus on the specific details (a style property using em units). It is not necessary to understand what an em unit is at this point in the curriculum. Unfortunately there are going to be instances where some concept or keyword is either mentioned or shown in a screenshot, even if that thing isn't the focus/point, even in external resources outside of TOP. In those instances it's important to understand, "This lesson isn't about em units, so I don't need to worry about what those are in this screenshot." If we do have exercises that rely on knowing what em units are, though, we definitely need to make some updates.
If you have come across other instances of confusion it is 100% appreciated for those things to be brought to our attention. As I said we're ever evolving and we want to keep improving the curriculum for as many users as we can, and sometimes we can't do that without the input of users. Sometimes the end result of these discussions is simply "This is on purpose" for a particular reason, sometimes a change doesn't have enough merit to be made, but often times even a simpler change like a quick verbiage tweak will be accepted in order to improve the experience of future users.
We do try our best to put ourselves in the shoes of those who are brand new to all of this, but of course that isn't always the easiest. At the same time, we also utilize our and other professionals' experience in order to decide what we cover and how.
All that said, @spektukal , what do you think of my proposed solution of removing the margin-top: 0 from the solution styles? Would that particular element having its default margin, and thus not requiring an override or needing to sift through dev tools, helped alleviate some of this confusion?
@thatblindgeye If default values will be covered at a later point in the course then your suggestion might indeed be the best option as it would eliminate any confusion. And while em units were so far not necessary to know about, it would eliminate unnecessary confusion if px was used in these early exercises instead of em. From my understanding you can use both interchangeably anyway as they're just different measurement units. And px is a unit that we have already been taught.
As for what you said about the screenshot you've posted: You said the source of the styles or modifications is in the top right corner. So in your example "user agent stylesheet". I still don't see how that would help me figure out that it's the default value of the title element that caused the margin at the top. There was no css code for it so it wouldn't appear in the area shown in your screenshot. It would only show up in that box showing the margins, borders, etc. But I can already see without it that the margin is there.
I was aware that there was no code causing the margin and that is what got me so confused. There was no cause in sight anywhere. Default values just haven't really been covered at all in this course and seeing the very brief mention in an earlier lesson tells me, that it will surely be explained properly when it's needed. It's clearly not necessary to know right now, otherwise they surely would have provided more info on it. Or so I thought.
But yeah, if it's being covered at a later point anyway, then just removing the need to add "margin-top:" would solve this problem. Also, this is the link I got sent on Discord with the default values: https://www.w3schools.com/cssref/css_default_values.php
Doesn't seem like a big deal to me to take a quick look at it, as long as you tell people that they don't need to memorize it at this point. It would help understand what you're talking about when you mention default values. And then, if you left the part we've been talking about in, the exercise could just mention that "The h1 element adds a margin at the top by default, as you can see in the link. So to get rid of that we have to add margin-top: 0." That would be another solution that's come to mind.
Though yours is probably still the better choice, assuming that there's no more similar occurrences in the next exercises until default values are finally covered. If there are though, then some basic explanation like what I've suggested might be the better solution.
it would eliminate unnecessary confusion if px was used in these early exercises instead of em.
If we're using em units in our CSS exercises this early we should definitely update that as we should stick to px units until we dive into other units in more depth later on. I thought you had just meant the em units being visible in some screenshots in lessons, which that can be difficult to avoid at times and may unfortunately be something that is more "ignore for now".
But I can already see without it that the margin is there.
The context may not be great because the screenshot I shared was just a simple h1 element, so the usefulness/purpose may not be all that apparent here. Essentially it isn't so much the inspector telling your that some style is being applied; as you said we can see that an h1 element has some "space" along the top, or "Well duh of course the text is blue I can see that" for you and I. The inspector is more to track down where a particular style is coming from, or to help figure out "I told the CSS to apply this style, why isn't it applying?! Oh... this other stylesheet is doing something..." (this has happened to me more than once at work 😆 ). Or even to see the actual value (what shade of blue? how many pixels exactly? What do you mean that's green it looks like blue to me?!)
Again, this isn't something we explicitly mention in the "Inspecting HTML CSS" lesson and maybe we should, but essentially you would view the inspector to see where particular styles are coming from. In this case the margin-top default value. Eventually you get to where margin-block-start is mentioned in my screenshot, and the source being user agent stylesheet will tell us it's just the browser's default style. It could also have been "super-cool.css" as the source, telling us we did something in another stylesheet that we forgot about. Something will always show up in the area from my screenshot if there are any styles - either user applied or browser defaults.
Side note: margin-block-start is essentially margin-top, it's just the logical property name. We've been switching over to logical property names at work so I just didn't even realize browser defaults were using those 😆
For now I'll transfer this issue to our CSS exercise repo and I'll adjust your original comment with a list of acceptance criteria. If we are assigning exercises where knowledge of default values is necessary I'd say we should even update those exercise similarly for now, especially since I can't imagine default styles being significant to practice within the context of the exercises themselves. If we need to, though, we can always transfer this back to the curriculum and revisit a lesson-based solution.
@spektukal can you take a look at the Acceptance Criteria I've added to your original post and let me know if that captures what has been discussed? Were there any other elements that led to confusion in terms of the default margins or was it just that h1 element with text "I'm a card"?
@thatblindgeye I've checked the boxes next to the Acceptance Criteria. It does fit what we've discussed here. And that was the first time default values have come up in any exercises, so with that the issue would be fixed. Though I can't say if this does occur in any future lessons. So if you'd check that it would be great. Otherwise I could open a new issue or post here again if I encounter another instance.
And thanks for your help in solving this, Eric.
Sounds good, will transfer this over. I also unchecked those checkboxes for now, we can check them off as the criteria are resolved in a PR.
If you do catch other instances like this definitely feel free to either ask on our Discord or open another issue, and we'll also open any followup issues if/when we do come across anything.
@thatblindgeye Do you mind if I work on this? I would love to take this up as my first issue.