HTML5 and CSS3 challenges

[QuincyLarson]

This topic needs an owner.

For each challenge, please reply to this GitHub issue with:

1. The feature/concept being introduced/reinforced (challenge description)
2. What the camper is presented with (challenge seed)
3. How we might test for it (assert tests)

Please copy and paste this template for your idea

**Challenge**

<!-- challenge title your idea is for -->

**Challenge Description**

<!-- your challenge description --> 

**Challenge Seed**

<!-- Initial code presented to the camper -->

**Challenge Tests**

<!-- either assert tests or your ideas for things to be tested -->

**Challenge Solution**

<!-- solution to this challenge -->

Here are the challenges we have currently planned (these can be further expanded):

Introduction to FreeCodeCamp’s Development Environment

• Ready

Challenge Description:

This is FreeCodeCamp’s in-browser development environment. This is where we will build our web pages with HTML (Hyper Text Markup Language), and style them with CSS (Cascading Style Sheets). Don’t worry if you have never heard of HTML and CSS before, we will got into more detail as you progress through the FreeCodeCamp curriculum.

Quick tour through the IDE - need to know what it will look like to complete this section

To move on to the next challenge, please click the ‘Run Tests’ tests button.

Challenge Seed:
‘’

Challenge Tests:
assert(code == ‘’);

Challenge Solution

Say Hello to HTML Elements

Add Content with the Paragraph Element

Comment out HTML

Fill in the Blank with Placeholder Text

Delete HTML Elements

Introduction to HTML5 Elements

• Ready

Challenge Description

HTML5 introduces more descriptive HTML tags. These include <code><header>, <footer>, <nav>, <video>,<article></code> and so-on.

These tags not only make your HTML easier to read, it also helps with Search Engine Optimisation (SEO).

The <code><main></code> HTML5 tag helps search engines (google etc...), and other deveplopers, find the main content of your page.

Wrap your paragraph with a opening and closing lt;code><main></code> tag.

Challenge Seed

<h2>CatPhotoApp</h2>

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

Challenge Tests

assert(code.match(/<main>\s*?<p>/), message:"Add an opening &lt;code&gt;main&lt;/code&gt; tag before your paragraph");
assert(code.match(/<\/p>\s*?<\/main>/), message:"Add a closing &lt;code&gt;main&lt;/code&gt; tag after your paragraph.");

**Challenge Solution**
```html
<h2>CatPhotoApp</h2>

<main><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p></main>

Change the Color of Text

Use CSS Selectors to Style Elements

Use a CSS Class to Style an Element

Style Multiple Elements with a CSS Class

Change the Font Size of an Element

Set the Font Family of an Element

Import a Google Font

Specify How Fonts Should Degrade

Add Images to your Website

Size your Images

Add Borders Around your Elements

Add Rounded Corners with a Border Radius

Make Circular Images with a Border Radius

Link to External Pages with Anchor Elements

Nest an Anchor Element within a Paragraph

Make Dead Links using the Hash Symbol

Turn an Image into a Link

Add Alt Text to an Image for Accessibility

Create a Bulleted Unordered List

Create an Ordered List

Create a Text Field

Add Placeholder Text to a Text Field

Create a Form Element

Add a Submit Button to a Form

Use HTML5 to Require a Field

Create a Set of Radio Buttons

Create a Set of Checkboxes

Check Radio Buttons and Checkboxes by Default

Nest Many Elements within a Single Div Element

Give a Background Color to a Div Element

Set the ID of an Element

Use an ID Attribute to Style an Element

Adjusting the Padding of an Element

Adjust the Margin of an Element

Add a Negative Margin to an Element

Add Different Padding to Each Side of an Element

Add Different Margins to Each Side of an Element

Use Clockwise Notation to Specify the Padding of an Element

Use Clockwise Notation to Specify the Margin of an Element

Style the HTML Body Element

Inherit Styles from the Body Element

Prioritise One Style Over Another

Override Styles in Subsequent CSS

Override Class Declarations by Styling ID Attributes

Override Class Declarations with Inline Styles

Override All Other Styles by using Important

Use Hex Code for Specific Colors

Use Hex Code to Mix Colors

Use Abbreviated Hex Code

Use RGB values to Color Elements

Use RGB to Mix Colors

[amrsekilly]

Can I help with that? @Bouncey @QuincyLarson

[Bouncey]

@amrsekilly sure, reply with your ideas for a challenge, or set of challenges.

Include:

**Challenge**

<!-- challenge title your idea is for -->

**Challenge Description**

<!-- your challenge description --> 

**Challenge Seed**

<!-- Initial code presented to the camper -->

**Challenge Tests**

<!-- either assert tests or your ideas for things to be tested -->

**Challenge Solution**

<!-- solution to this challenge -->

Thanks for contributing 🎉

[amrsekilly]

Add Images to your Website

Challenge Description

Sometimes you need to add images to your website, it makes your content more engaging and fun. But be careful not to use too many images; it might slow down the loading of your website as it will increase the size of the resources.

Add this image to your div element by adding an img element and adding it as the src, and observe what will happen!

Don't forget to add an alt text; as it helps make your website more accessible to a wider audience.

Challenge Seed

 <div>

 </div>

Challenge Tests

assert(code.match(/<img src="" alt="">/), message: 'You need to add the image's source in the src attribute');
assert(code.match(/<img src="">/), message: 'You need to add an alt text to your image tag');

Challenge Solution

 <div>
   <img src="http://anysnapshot.com/wp-content/uploads/2013/07/Cats-Curiosity.jpg" alt="Cat's Curiosity">
 </div>

[amrsekilly]

@Bouncey I'm sorry, but I've never used the assert method before. Is it that one on the Chai docs?

Do you know a good resource for learning it?

[Bouncey]

@amrsekilly thanks for the challenge suggestion 👍

However, I think we will build the mobile view of the new catphotoapp, I will refactor the challenge order to reflect this.

Here is a sample of what we are going to build. Which itself is in deveolopment right now

[ghost]

@Bouncey, after we fix the spam issue for v2, we can link them to an example (freecatphotoapp.com will be used eventually as the domain).

[utsab]

@Bouncey and @QuincyLarson , I'm creating a few centering challenges. The sequence will go as follows:

1. Center text

2. Center inline elements

3. Center block elements

Here is the template for #1. I haven't filled out the assert statements yet. Please let me know if you like the direction is going and then I'll figure out the assert statements:

Challenge

Centering text

Challenge Description

Centering your text horizontally is a common layout operation.

We center text by setting a style of the text's parent element(the element that contains the text). Specifically, we set the "text-align" property of the parent to a value of "center". Note that we are styling the parent of the text and not the text itself.

[show code example]

In the following exercise, create a class called "centered" and use it to center the text.

Challenge Seed

<style>

</style>


<div>Center me</div>

Challenge Tests

• Test to verify that "centered" class is defined.
• Test to verify that the "centered" class "text-align:center" property.
• Test to verify that the div element has the "centered" class

Challenge Solution

<style>
.centered {
    text-align: center; 
}
</style>


<div class="center">Center me</div>

What do you think?

[QuincyLarson]

@utsab yes - this is a good start. I like how you describe the tests instead of writing them. We can create the specific tests later.

[QuincyLarson]

@Bouncey what is the state of this? We don't need to literally re-invent the wheel here - we have a ton of HTML and CSS challenges already. I think we should strive to expand upon these, rather than replace them at this point.

[UsamaHameed]

@Bouncey @QuincyLarson Since all the above mentioned challenges are already in the Map, I am thinking about some new challenges. For example,

1. HTML
   • Opening a link in a new tab (Helped me in my Intermediate Front End Dev Projects)
   • HTML tables
2. CSS
   • Floating
   • Absolute/Relative Positioning
   • Difference between absolute and relative units
3. There should be a project after the HTML and CSS section in which campers have to implement a complete but simple webpage so that they also know where to add the , etc. Something like a put-it-all-together project.
   What do you think?

[alayek]

@feelTheForce I like the idea! These kind of things help before asking campers to implement a whole project like portfolio or tribute page.

Also, regarding your `target="_blank", we might want to cover the security vulnerability too (at least mention it).

I think we are already covering it in the security section.

As for the CSS floating, I think these days, most devs just use flexbox because it's more predictable. That being said, it is important to know what float does.

[UsamaHameed]

@alayek Where should I add them then?
Before covering flexbox, should we not show how floating works?
I will keep the security vulnerability in mind while writing them.

[QuincyLarson]

@UsamaHameed we can cover the "float" properties quickly. I agree with @alayek that most people will use FlexBox for this. We actually need an owner for our FlexBox challenges: #21

Have you used FlexBox before? Would you be interested in helping design these challenges?

[UsamaHameed]

@QuincyLarson Unfortunately, no. I am yet to learn about FlexBox. Fortunately, I am starting to learn about it today. I am not sure if I will be experienced enough to write challenges for it in time.

[QuincyLarson]

@UsamaHameed no worries - You are already doing great work here and on the functional programming challenges. @atjonathan and @alayek are making progress on Flexbox :)

[QuincyLarson]

I am closing this issue. Instead of making changes to our HTML and CSS challenges directly, we will add additional challenges to the various subsequent topics (visual design, UX design, accessibility).