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

@johnhannahdev I prefer GitLab for my projects mostly because it’s Free Software. GitLab Pages is a little bit more complicated to set up, but once it’s running, it’s a set and forget type of thing. I find the Continuous Deployment/Pipeline feedback to be more transparent than GitHub’s interface, as it lets me know when there are problems and when I should re-run the publishing job. With GitHub Pages, sometimes my code takes a long time to update and there’s usually no stated reason why. I also like that GitLab more accurately uses “Merge Requests” instead of GitHub’s “Pull Requests.” It’s the same process, just different names for it.

1 Like

I need to start using Github, do you have any good tutorials or real life examples how to get comfortable with it? I tries few thing but still i don’t really understand :frowning:

1 Like


It took me a couple of goes to:
Sign Up and Build a Repository/ Link the index to a GIT Page.
Here’s what I used.

  1. Sign Up to Github.
    Github Sign Up

  2. Build a repository. (Add a readme and a licence).
    Instructions here - Create a Repo

  3. Set Up A Project or User Organisation Site
    Step by step shows you how to link your index file to a browser if you select ‘project’.
    You end up with a URL -

Every project can have an index so I’m setting up a basic index page for each challenge right now so they are ready.

B. User Organisation Site:
Step by Step shows you how to set up Github (for me on a Mac) on your desktop.
You’ll have a folder with your files on it …editable from Sublime/VS/Atom/Other text editor.

Then when you update you simply upload the new index file (or other file) and you have a version controlled page/site.

A master branch is the site and you can upload other branches that are works in progress.
When you finish the WIP …you can commit it (move it) to the master branch.

When you set up a project you can choose to have that link to the index file from the master or other branch.

Have a play with steps 1, 2 and 3 and see how far you can get.

It took me 2 hrs and a couple of re runs to get it set up.

Good luck.


thank you! i will try :slight_smile:

1 Like

And if you are still having trouble, TheNewBoston on YouTube has a great video series on how to use Git and Github.


Hi everyone! I am joining a bit late since I just found out about the cohort. Just to clarify, the goal is to work on the freeCamp and then share ideas and resources here? I had trouble getting the site to work. I had worked through challenges all the way to JavaScript a year ago then life got in the way. I see some changes on the site, but do I need to start from the beginning?

@Krate2016 Thanks for joining! Your idea of the cohort is correct. I answered your other question here: January 2018 fCC Cohort.

I have a stupid/trivial question. How do you find the proper w3c documentation? I mean…what did you type in the google engine? Did you type sth like ’ w3c the editor’s draft? Or maybe you find it via the navigation directly on the w3c site. It takes me a lot of time to find the proper recommendation. There are a lot of versions, some of them are just recommendations, some of them are just drafts, others are obsolete…

I’d like to join this cohort. Please add me if it’s still possible. I’ve just started with beta version.

I have one remark as for the “Link to Internal Sections of a Page with Anchor Elements” challenge. I don’t like the approach that id=“footer” is used with the . Here’s the direction from the challenge:" The footer tag should have an id attribute set to “footer”. Wouldn’t be better to name it, let’s say, “bottom” instead of “footer”? Does anybody consider that? I know, I’m a camper here, but I couldn’t stop thinking about it!

Its the same in text documents, you have a header and a footer so I dont think bottom would be better

To avoid obsolete info, when you do a Google search, also do this:

  • do a preliminary search for your keywords
  • then click on “Tools” (far right, area under the search field)
  • a drop-down menu will appear toward the left and underneath, look for Any Time and choose Past Year (or other time period)

This will narrow the search results to items dated within the past 12 months.

  • You can also then Sort by Date to get most recent item to the top



I’m not sure about ‘avoiding-id-at-any-cost’ approach. I guess, it depends on how you’re going to design your website. I found some interesting discussion on StackOverflow:
[1] (

*I’ll update my comment if I find more resources.

1 Like

Just heard about the Cohort a couple days ago so I’m catching up on the curriculum. I’m stuck on the this exercise:

Nothing I do seems to be correct. Any suggestions? I know it’s something super simple but I’m not getting it.

Screen Shot 2018-01-28 at 5.05.35 PM

@codenoob What have you tried so far?

If the code in the editor is code that you wrote, yes go ahead and execute it. If you opened that challenge from a link in a forum or chat, I would use the button to reset the code.

fCC contributors built that feature recently to protect against 3rd-party code execution in your browser. They’re debating how to handle it long term.

When in doubt… click the reset button. :slight_smile:

Lets have one more important query that everyone should know?
Which is Better?
Internal CSS or External CSS?
Explain with reasons.

Does anyone else think that the picture illustrating the anchor tags is a bit confusing for beginners?
I think the arrows are too thick, and aren’t closely linked enough with their associated explanation (the line is too far away).

Also, the sections on labels is unclear -

It is considered best practice to set the for attribute for assistive technologies to be able to link the relationship between the label and the child elements such as an input in this case.

<label for="indoor"> 
 <input type="radio" name="indoor-outdoor">Indoor 

I don’t think it clearly explains what a label is for, what assistive technologies are in relation to html, or what is meant by linking the relationship of label and child element.

It think it would be clearer if the <id> tag was covered before introducing radio buttons, which would allow the use of implicit linking (as above) as well as an example where the relationship is explicit:

<label for="option one">option-one</label>
<input type="radio" id="option one" name="options">

and a quick example of screen-readers was given for assistive technologies.

Hope this doesn’t come across snarky or pedantic :confused:

If there is a better place to post suggestions/corrections of the beta content let me know, as I realise this thread is probably more for discussion of the content itself.

edit: also, enjoying the updated content so far! :+1:

1 Like

@silentgamelan Thanks for the comment! :smile: You can file an issue by following the contribution guide. Also, in terms of the label element specifically, I noticed that the fCC Guide entry for label doesn’t exist yet. You may want to contribute to the guide by adding that section.

1 Like

cheers, I’ll have a look at those links later tonight - glad to help :slight_smile: