Freecodecamp: [Beta] Remove CSS, Fix Sequencing Issues in Basic HTML & HTML5 Section

[HKuz]

Challenge Name

This applies to ~2/3 of the challenges in the beta site Basic HTML and HTML5 section.

Issue Description

Now that the HTML and CSS challenges are in their own sections (with the HTML section sequenced first), the HTML challenges shouldn't show any CSS since it hasn't been taught yet. Also, there are some sequencing issues around the new challenges - the seed code doesn't quite fit with the challenges before/after, or they introduce something new that isn't carried to following challenges. For example, the Introduction to HTML5 Elements challenge's seed code doesn't quite match with the previous challenge, then it adds a main tag that isn't carried forward. Here's a list of all the challenges in the section and what should be fixed:

• Say Hello to HTML Elements
• Headline with the h2 Element
• Inform with the Paragraph Element
• Introduction to HTML5 Elements
  
  
  
  • Initial seed code should match the previous challenge (add h1, change p text)
  
  
• Fill in the Blank with Placeholder Text
  
  
  
  • Carry the main tag from previous exercise (this applies to every challenge after this one)
  
  
• Add Images to your Website
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
  • Move this challenge so it's after Delete HTML Elements challenge
  
  
• Uncomment HTML
  
  
  
  • Paragraph text should carry Kitty Ipsum change from prior challenges
  
  
• Comment out HTML
  
  
  
  • Paragraph text should carry Kitty Ipsum change from prior challenges
  
  
• Delete HTML Elements
  
  
  
  • Move Add Images challenge after this one
  
  
• Link to External Pages with Anchor Elements
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Link to Internal Sections of a Page with Anchor Elements
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Nest an Anchor Element within a Paragraph
  
  
  
  • Note that editor switched back to using the external link
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Make Dead Links using the Hash Symbol
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Turn an Image into a Link
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Create a Bulleted Unordered List
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Create an Ordered List
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Create a Text Field
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Add Placeholder Text to a Text Field
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Create a Form Element
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Add a Submit Button to a Form
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Use HTML5 to Require a Field
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Create a Set of Radio Buttons
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Create a Set of Checkboxes
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Check Radio Buttons and Checkboxes by Default
  
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Nest Many Elements within a Single Div Element
  
  
  
  • Remove sentence in challenge copy about CSS (this will impact translations)
  
  
  • Remove CSS (won't affect tests or instructions)
  
  
• Declare the Doctype of an HTML Document
• Define the Head and Body of an HTML Document

I removed link tags, everything in the style tags, and references to classes on elements when I ran through the challenges on Beta - one very good thing is it doesn't change any of the instructions for the challenges, and the tests still worked. These changes should have minimal impact on the translations.

[HKuz]

@QuincyLarson and @freeCodeCamp/moderators - this is probably a good opportunity to decide if we want to have the "Instructions" h4 heading in the challenge copy. Generally, the existing HTML/CSS challenges don't have it, the existing JS ones do, and all new challenges I QA'd have it (with the caveat that it was easily removed if we didn't want it).

I can work on this issue, and can add/remove the "Instructions" label as necessary.

[raisedadead]

Well, I feel we should remove the instructions tag from everywhere, because, this strongly encourages reading through the whole thing, I remember just jumping into the instructions part as a natural reaction to accomplish the challenge than knowing what it is about.

[Greenheart]

@raisedadead I agree

lördag 21 januari 2017 skrev mrugesh mohapatra [e-mail]:

Well, I feel we should remove the instructions tag from everywhere,
because, this strongly encourages reading through the whole thing, I
remember just jumping into the instructions part as a natural reaction to
accomplish the challenge than knowing what it is about.

—
You are receiving this because you are on a team that was mentioned.
Reply to this email directly, view it on GitHub
https://github.com/freeCodeCamp/freeCodeCamp/issues/12688#issuecomment-274267610,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AF12KVv97viDfMvd-Dv5Ig4YLEK05DJEks5rUiGqgaJpZM4LqFkl
.

[no-stack-dub-sack]

@raisedadead @Greenheart So will there be nothing to delineate the intro from the instructions? I think there should be something, at the very least maybe an unassuming <hr>

Which might look a little something like this:

Nightmode looks totally badass 😈 ! I think this works, what about you guys?

[QuincyLarson]

My initial reasoning for not breaking up the copy with an "instructions" header was that, as @raisedadead pointed out, people would skip directly ahead to this. This said, I tried to restate the directions clearly in the final paragraph. So I like @no-stack-dub-sack of having a more subtle <hr> element, and from the thumbs up, I can see @HKuz, @raisedadead and @systimotic agree, so I think we have a winner.

@HKuz when you go through these, could you replace "instructions" with an <hr>?

[HKuz]

@QuincyLarson sounds like a plan! I'm working on this PR now, and will get the hr into the Basic HTML section.

@no-stack-dub-sack - I know you're working on the Basic Data Structures section, that's all yours 😄

After that, we could either have one person go through and make this fix everywhere, or split up the task into certificate sections, or topic sections. If we split it up, it probably makes sense to open a separate issue to track progress.

[QuincyLarson]

@HKuz I'm pretty fast at text manipulation. I can do this everywhere other than the HTML section.

[HKuz]

Awesome, thanks @QuincyLarson!