HTML/CSS Questions, Resources, and Discussion (January 2018 Cohort)

HTML/CSS Questions, Resources, and Discussion (January 2018 Cohort)

Check out “Web Developer Boot Camp” by Colt Steele on Udemy. This course is taught by a boot camp instructor and is easy to understand. It has some small projects including creating a form. Going through the HTML and CSS portions of the course helped me to build the tribute page with confidence. I am halfway through the course and feel it is a great supplement to the FCC curriculum. It is usually on sale for 10 dollars and it is worth every penny.



I know that we’re still on the basic HTML/CSS challenges, but I have a doubt about the challenges of FCCs:
On the challenge linked above you have to center the h4 tag with the text-align property set to “center”, but the FCC doesn’t explicitly say so, I knew it from before but a supposed beginner should have googled that.
So my doubt is: the challenges on the FCC shouldn’t be something where you have just to “solve the problem” (and FCC gives you all the elements to resolve) and instead the projects should have the “figure out by yourself” component plus what you’ve learned on the challenges?
Sorry for the long message :confused:

1 Like


@DGC75 Yeah, I think you’re right. Nice find! :mag: I think this is a bug and there should be some mention of the center property for text-align in this challenge. I don’t see it mentioned previously. I think it should be added or at least text should be added asking people to look it up and maybe provide a source for them to use. You can create an issue in the freeCodeCamp GitHub repository if you want. :sunny:

1 Like


:exclamation: These two HTML challenges (1 | 2) are very important! Basically, every HTML page needs to have <html>, <head>, and <body> elements.

Since a lot of people use CodePen to host their projects, I think these basic HTML structure elements can sometimes feel less important since they’re technically not needed in CodePen. CodePen allows one to put what they would normally put in the head element into the CodePen HTML settings instead and wraps the HTML content in a <body> element automatically (I think), so technically the elements are there whether one chooses to use them or not. My suggestion, in order to make this valid HTML markup second nature, is to add the full HTML page (including these elements) to the CodePen HTML content manually and not use the settings.

Another suggestion is to use Glitch instead of CodePen because that more closely simulates a production environment in an easy to use web-based interface. :desktop_computer:

Linking a stylesheet to HTML is briefly mentioned in the CSS section (step 3 of 4). You’ll need to do this in order to successfully use Glitch, if you’re following best practices about separating content from design. Here’s a Khan Academy video about using external stylesheets and how to link to them in your HTML. I don’t agree with the video about when to use an external stylesheet. I think we should always be using one! It’s called Separation of Concerns.

In some of the projects I review, I notice that they don’t take advantage of styling the <body> element, as mentioned in this fCC challenge. On some level, I think (and this is totally speculative) that this is a result of not focusing on valid HTML markup and relying on CodePen, so the <body> element isn’t always in the front of people’s minds. Sometimes they’ll create a master container to hold everything instead of using <body>. There’s nothing wrong with this in terms of how the browser will render the page, but I feel like the <body> element is there anyway so one might as well take advantage of it when possible, instead of creating another level of complexity. :microscope:

1 Like


Agreed! I’m about 70% thru Colt’s bootcamp. He’s easy-to-follow and adds useful asides. I like that project builds are included and (the part I haven’t gotten to yet), the course includes some back-end modules. You can post questions and the response is timely and useful (responses done by course TAs).

1 Like


CodePen has a visual wow factor, for sure. I agree with you that it may not be supporting best practices. I’ve started to take a mixed approach. I do the majority of the writing in Sublime Text (or Visual Studio Code) adhering to separation of concerns and taking full advantage of code coloring and the keyboard shortcuts (toggle comment on/off, multiple cursors, etc). Then I can copy&paste into CodePen because the viewing of changes might be quicker if I’m tweaking or playing with the code, and sometimes it’s easier to share a CodePen. I bookmarked your recommendation of Glitch; hope to check it out soon.



I use sublime text too to edit all my pages and I will copy and paste into codepen to see quickly how it renders. I only have it on my work laptop and not at home so it makes it more difficult but then I already try and code for a cheeky hour in work each day.



I use VS Code for most of my webpage editing. As far as CodePen goes, I use it mostly to test out a concept or if I’m trying to get help on a concept. I’ll put a sample in a Pen and then link it in my question.

I’m also going through Colt’s bootcamp. Pretty cool stuff!



I know I made a threadfor this already, but what are some good resources to continue learning HTML/CSS after FCC and Colt’s bootcamp?



I’ve just opened an issue on Github

Thanks for the advice!

1 Like


This is a really good class that I took last summer that goes over HTML5 and CSS3.



Just finished this weeks assignment. It was a nice review. I’m really enjoying this.

1 Like


If you want to see how something renders quickly without having to copy and paste you might want to check out Brackets. It’s a free code editor that has live preview.

1 Like


Here are two resources that are part of the curriculum that I’m following*. I should note that I haven’t actually used these yet, but I’m looking forward to doing so.

Learn to Code HTML & CSS

Learn to Code Advanced HTML & CSS

*I’m using one of @P1xt’s guides



I wonder When this Beta Version goes live for all, is this going to take over the Current Main Stream Tutorial cum Challenges? Because I finally got myself in to beta (just signed up with new mail and it worked!) and took a look at the syllabus! It seemed a Complete Package to me!



Wait… so we can discuss issues with the Applied Visual Design already? I thought we were going step by step, and this post was for the first two only (basic HTML and basic CSS).

If so, I see a major problem in the Applied Visual Design section, which is getting the semantics totally wrong. Titles like “Use the em Tag to Italicize Text” gives me shivers… em tag is for emphasis, the fact that it applies italics by default is a coincidence. But nothing prevents us from giving the em tag whatever style we want.

Also not every italicized text is meant to provide emphasis. Think of definitions, technical words, or those written in a foreing language (normally Latin expressions). There’s scenarios where the humble <i> tag is the right choice

Can’t beat the specification for a resource on that.


Visual Design/Accessibility Questions, Resources, and Discussion (January 2018 Cohort)

yeah it’s buggy! But think this way, Many people don’t even know if the right element for making a font is <i>italic</i> or italic (I used <em>em tag</em>). I am not saying intentionally overriding some definition is a good practice. But I find it enticing because it opens the door for more discussion about that issue and new resource comes in which could be gold mine. Think of

css diner

Few Days Back I did not know it exists.
You may find my Answer a li’l overwhelming but That’s just my thought!

This can be useful for those who are confused about which one to use

1 Like

Visual Design/Accessibility Questions, Resources, and Discussion (January 2018 Cohort)

anyway, just filed the “bug”, got accepted as such, so I’ll contribute the fix myself :slight_smile:

1 Like


This is pretty frustrating :persevere: ! It started Again. This bug needs to be fixed ASAP!



I usually just wrap it in a span and then use CSS to style it. Come to think of it, that’s probably not best practice.