question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:2
  • Comments:8 (8 by maintainers)

github_iconTop GitHub Comments

3reactions
no-stack-dub-sackcommented, Jan 21, 2017

@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: image

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

2reactions
HKuzcommented, Jan 22, 2017

@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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Handling common HTML and CSS problems - MDN Web Docs
Objective: To be able to diagnose common HTML and CSS cross browser problems, and use appropriate tools and techniques to fix them.
Read more >
Beta - CSS Grid - Three Typo Corrections · Issue #16871
Issue Description The following is a list of needed corrections that needs to be implemented. ... fix(seed): fixed typos in css grid challenges...
Read more >
CSS Writing Modes Level 4
CSS Writing Modes Level 4 defines CSS support for various writing modes and their combinations, including left-to-right and right-to-left text ...
Read more >
Safari Technology Preview Release Notes
Fixed an issue where browser.tabs sometimes returned an incorrect URL for pinned ... Removed CSS display and float quirks on table and table...
Read more >
How to Section Your HTML
The sectioning elements in HTML5 are , , , and . is also kind of a sectioning element since.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found