This topic is for members of the January 2018 fCC cohort to share information and learn more about HTML and CSS. Click on the cohort link if you’d like to join. Reply here with your questions, comments, and additional resources regarding the Basic HTML & HTML5 and Basic CSS sections.
Are we ok to edit the post with links we have found useful? After I completed the CSS I then started searching for css images and found #dailycssimage on twitter which lead me to this tutorial for creating pure CSS images. At the end of the tutorial you create a Nintendo Switch which I really enjoyed creating.
When i was first starting out I found that Brad Traversy’s YouTube channel was a great source of information for a lot of aspects of web design/development.
Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.
Do not use lower levels to decrease heading font size: use the CSS font-size property instead.
Avoid skipping heading levels: always start from <h1>, next use <h2> and so on.
You should consider avoiding using <h1> more than once on a page. See “Defining sections” in Using HTML sections and outlines for more information.
When I review projects, I usually see people skipping heading levels because they’re using heading levels to style their elements. For example, one may try an h2 element and realize that it adds some padding that they don’t want. Then they’ll try the h3 element and that has less padding, so they’ll keep that in even though their heading hierarchy skips from h1 to h3.
If you have a section that needs a heading and you don’t like the way it’s styled by the browser, you can always change the styling in your style.css file like this example:
h2 {
padding: 0;
margin: 0;
font-size: 2rem;
}
/*You can use any CSS you want here.*/
That way, you’ll be able to maintain the heading hierarchy without skipping heading levels and get the styling you want!
Hi everyone, I recently read this great article written by the brain behind Medium’s CSS. It was written a while ago but it is still pretty relevant. It’s a good reminder to think about the structure of your code: Mediums CSS is Actually Pretty Fu***** Good
A note about the “Basic HTML and HTML5: Link to External Pages with Anchor Elements” challenge:
It says: "a elements, also known as anchor elements, are used to link to content outside of the current page.[…]"
That’s incorrect: an anchor element can link also on elements in the current page, by referring their ids.
You’re right, but I think it’s fine to represent anchors the way FCC did because you are presumably not familiar with ids at that point. Also, literally the next challenge explains how to link to internal sections.
Here’s some more information to look at in relation to the challenge on HTML Elements:
This is a video showing one developer’s process for creating semantic HTML markup. I find this really helpful to watch from time to time as it is a great example of the process when I’m starting a new project.
Here’s some information about the <main> element. I particularly like the examples in that link as they show the correct placement of the <main> element in relation to the other HTML5 semantic elements.
More information about HTML5 sectioning elements with some helpful information and examples on how and when it’s best to use these elements.
In the project reviews I’ve done, I commonly see <div class="header"> or <div class="footer">. Even though this is technically correct and it works, it’s not taking full advantage of the HTML5 semantic elements that are now available for all browsers. The links above, and the freeCodeCamp challenge will help us be as semantic as possible for our upcoming fCC projects!
How is everyone get on this week learning about HTML and CSS? I had already completed the beta courses for both but quickly went over them again and also looked at the links posted above. I found the CSS Diner really fun to complete.
@angelinalblyth Thanks for checking in! I really appreciate you making yourself available to help us like this. I’m done with both sections, but that’s mostly because I know most of it already from the previous fCC cohort and from other sources. All of the links shared so far have been great!
I, too, am curious to know what others found helpful so far and if anyone needs help with anything.
CSS Diner IS awesome!
What I didn’t get from CSS Diner, however, was best practices in terms of using those selectors in projects. It’s one thing to be able to do something and another thing entirely to know when and when not to do it!
Here are two sources that I reference often to help remind myself of CSS best practices (at least, according to some developers):
Another way to increase portability is to not qualify selectors. A qualified selector is one like ul.nav {} or a.button {} or div.content {}.
Qualified selectors are bad because they reduce efficiency (more checks than we really need) but—more importantly—because they tie us to specific elements. We can’t now use that .button class on an <input> or a <button>, for example. We can’t apply .nav to an <ol> to make a breadcrumb.
… there are a number of things we can do to mitigate [the effects of specificty]:
Never use IDs in CSS, ever. They have no advantage over classes (anything you can do with an ID, you can do with a class), they cannot be reused, and their specificity is way, way too high. Even an infinite number of chained classes will not trump the specificity of one ID.
Do not nest selectors unnecessarily. If .header-nav {} will work, never use .header .header-nav {}; to do so will literally double the specificity of the selector without any benefit.
Do not qualify selectors unless you have a compelling reason to do so. If .nav {} will work, do not use ul.nav {}; to do so would not only limit the places you can use the .nav class, but it also increases the specificity of the selector, again, with no real gain.
Make heavy use of classes because they are the ideal selector: low specificity (or rather, all classes have the same specificity, so you have a level playing field), great portability, and high reusability.
tl;dr never use a selector more specific than the one you need.
I had already gone through the HTML and CSS sections on the current curriculum, but I’m not too proud to get some review with the beta - plus I believe there are some differences between them too I am enjoying the resources that were posted in this thread and I must say that I enjoyed the CSS Diner as well - its just fun when learning is like playing a game
to look at in relation to the challenge on 
Thanks for checking in! I really appreciate you making yourself available to help us like this. 
I’m done with both sections, but that’s mostly because I know most of it already from the previous fCC cohort and from other sources. All of the links shared so far have been great!
It’s one thing to be able to do something and another thing entirely to know when and when not to do it!