Applied Visual Design Challenges

[QuincyLarson]

@atjonathan is in charge of coordinating the expansion of these challenges, but he needs your help.

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

1. Challenge description text
2. Test suite (using the assert method)
3. The seed code, which is pre-populated in the editor at the beginning of the challenge
4. A working solution that makes all tests pass

   Final Challenges List:

Challenges using a Bootstrap Card (consistent)

• [x] Create visual balance using the text-align property
  • [x] Align Text Left
  • [x] Center Text
  • [x] Justify Text
• [x] Adjust the Width of an Element Using the width Property
• [x] Adjust the Height of an Element Using the height Property
• [x] Create a Visual Balance with the height of an element
• [x] Create visual emphasis by using bold text
• [x] Create visual emphasis by using underlining text
• [x] Create visual emphasis by using the italic property on text
• [x] Create visual emphasis by using the strikethrough property
• [x] Create a Line Using the hr Element
• [x] Create visual emphasis by adjusting thebackground-color property of text.
• [x] Create visual emphasis by adjusting the size of a header versus a paragraph tag.
• [x] Create visual emphasis by making a card like element stand out by adding a box-shadow.
• [x] Create a Graphic Using CSS
• [x] Decrease the Opacity of an Element

Challenges based on position

• [x] Change an Element's Relative Position
• [x] Move a Relatively Positioned Element with CSS Offsets
• [x] Lock an Element to its Parent with Absolute Positioning
• [x] Lock an Element to the Browser Window with Fixed Positioning
• [x] Push Elements Left or Right with the Float Property

Challenges based on color

• [x] Learn about Complementary Colors
• [x] Learn about Tertiary Colors
• [x] Adjusting the Color of Various Elements to Complimentary Colors
• [x] Adjust the Hue of a Color
• [x] Adjust the Tone of a Color

Challenges based on typography

• [ ] Learn the Importance of Ratios in Type
• [ ] Learn About Modular Type
• [ ] Apply Different Ratios to Type Using the font-size Property
• [ ] Create a Typographic Style Guide
• [x] Setting the values of heading tags
  • [x] Set the value of h1 to 68px
  • [x] Set the value of h2 to 52px
  • [x] Set the value of h3 to 40px
  • [x] Set the value of h4 to 32px
  • [x] Set the value of h5 to 21px
  • [x] Set the value of h6 to 14px
• [x] Set the value of Paragraph text to 16px
• [x] Adjust the font-weight of header 1–5 tags.
• [x] Adjust the line-height of a paragraph until the paragraph is properly spaced
• [x] Use the text-transform property to make text uppercase.
• [x] Using Google Fonts
  • [x] Incorporate a Google Fonts Into your Header
  • [x] Assign a Google Font using CSS

Ungrouped challenges

• [x] Change the Position of an Element on its Z Axis
• [ ] Use the box-shadow z-axis and Opacity together to Animate an Element
• [ ] Create a Pattern by Reusing a Block of Elements
• [x] Create a gradual CSS Linear Gradient
• [x] Use a CSS linear gradient to Create a Striped Element
• [x] Use the CSS Transform Property to Scale an Element on Hover
• [x] Use the CSS transform Property SkewX
• [x] Use the CSS transform Property SkewY
• [x] Create a more Complex Shape using CSS and HTML
• [x] Use the CSS Transform Scale Property to Change the Size of an Element.
• [x] Create Texture by Adding a Subtle Pattern as a Background Image
• [x] Adjust the color of an Anchor Tag
• [x] Adjust the Hover State of an Anchor Tag

Challenges based on Animation

• [x] Learn how CSS Keyframes and Animation Properties Work
• [x] Create movement using CSS Animation
• [x] Animate Elements Continually using the Infinity Property
• [x] Make a CSS Heartbeat using the Infinity Property
• [x] Animate Elements at Variable Rates
• [x] Animate Multiple Elements at Variable Rates
• [x] Learn how Bezier Curves work
• [x] Use a Bezier Curve to Move a Graphic
• [x] Make Motion more Natural using a Bezier Curve
• [x] Use CSS Animation to Change the Hover State of a Button
• [x] Create Visual Direction by Fading in an Element to the left.

[QuincyLarson]

@ahmadabdolsaheb I'm in the process of transferring all of these challenges into our codebase and deploying them to beta. So you will soon be able to experiment in the live environment.

[ahmaxed]

I propose the following order for the animation challenges.

• [x] Learn how CSS Keyframes and Animation Properties Work
• [x] Create movement using CSS Animation
• [x] Animate Elements Continually using the Infinity Property
• [x] Make a CSS Heartbeat using the Infinity Property
• [x] Animate Elements at Variable Rates
• [x] Animate Multiple Elements at Variable Rates
• [x] Learn how Bezier Curves work
• [x] Use a Bezier Curve to Move a Graphic
• [x] Make Motion more Natural using a Bezier Curve
• [x] Use CSS Animation to Change the Hover State of a Button
• [x] Create Visual Direction by Fading in an Element to the left.

Note: the first challenge on the list was named _Learn how CSS Keyframes Work_, but I changed it to illustrate what the challenge include more accurately.

[ghost]

Tagging @QuincyLarson for conformation. Once Quincy has confirmed, you can update the original issue description :smile:

[QuincyLarson]

@atjonathan thanks for tagging me. Yes, seeing that @ahmadabdolsaheb designed these challenges, I think we should defer to him as to how you think they should be sequenced. :)

[ghost]

@QuincyLarson Awesome, @ahmadabdolsaheb you have the go ahead!

[HKuz]

Hi everyone - just a head's up this section has been reviewed and my QA edits integrated into the FCC branch. There may be some adjustments going forward, but it should be in decent shape. Two items I did want to bring up:

1) For introductory text, I can certainly take a crack at writing it for the section. Visual Design is a broad topic, and I wasn't part of the initial discussions about the goals we're trying to hit here, so any info or details about that would be a huge help. Even a handful of bullet points would be great. So far I have:

• At its core, a web page gives information or provides a utility
• Visual Design is how that message / functionality is presented
• Covers everything from text sizing and spacing, overall layout/positioning, color choices, graphics, and animation
• ...

2) I noticed some of the animation challenges (which were really well done, by the way) used glyphicons via Bootstrap. In terms of future maintainability, looks like Bootstrap 4 is deprecating them - see the "Components" section. If the live site supports Font Awesome, we may want to consider making that tweak.

[HKuz]

Sorry for the early trigger pull on that comment - it's fixed now 😄

[ghost]

@HKuz, yeah we can use font awesome. I'll fix that on the branch.

[ghost]

This can be closed because it's done!

[QuincyLarson]

@HKuz we should avoid using Bootstrap before we reach the Bootstrap section. Is it possible to swap out these icons for static images? We will cover Font Awesome in the Bootstrap section.

[ghost]

@QuincyLarson we use Bootstrap in nearly every challenge in applied visual design. We would have to rewrite most of the challenges if that's the decision.

[HKuz]

@atjonathan I already swapped it out with some lightweight CSS for the challenges that used it as part of the QA stuff. The icons were the only pieces that remained. Right now the 3 challenges that use them have text that reads "Note: The code example is using an X icon accessed through a web library. Don't worry if this is new for you, it will be covered in the Front End Libraries section. For now, focus on the animation aspects of the challenge."

If we go the image route, are there publicly available ones that we'd have access to use without license/permission issues?

[HKuz]

@QuincyLarson and @atjonathan - there were a handful of empty challenge placeholders for topics that (to me) seem like they're well-covered by the completed set. They're the ones without links in the list at the top. Can I remove them from the seed file?

[ghost]

@HKuz, are they challenges that are comments here?

[HKuz]

@atjonathan they are the ones in the list, but that don't have a comment on here (like the first few Typography ones). I did check that all the others got into the seed file.

[ghost]

@HKuz, I believe those are ones we left out. Feel free to get rid of those 😄

[HKuz]

@atjonathan okay, thanks - I'll add the Google font link and clean up the empties in the next iteration.

[HKuz]

My attempt at Intro text for the section - will be in the next PR. Any comments/suggestions welcome!

Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. Many books cover these themes, and what defines good design is a well-discussed subject.

At a basic level, most web content provides a user with information. The Visual Design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it.

This section's goal is to cover some of the basic CSS tools that allow developers to create their own visual designs.

[QuincyLarson]

@HKuz this is great! This is an excellent description of visual design, and I think it covers all the fundamentals quite well.

Just a quick note that many (most?) of the people working through Free Code Camp are non-native English speakers. You may be able to convey the exact same meaning in simpler words and shorter sentences. Here's a tool I often use to identify unnecessary complexity in my writing: hemingwayapp.com

[HKuz]

@QuincyLarson that's a good point - I'll can try sticking to the 1000 most common words 'rule' I've seen around, and keep these intros simple and straightforward.

[QuincyLarson]

@HKuz OK - I wouldn't overthink it too much. Just be aware that many words and idioms have much simpler ways you can convey them without any loss in meaning :)

[Atomk]

This is my attempt at simplifying @HKuz 's attempt :) English is my second language, I thought an input from an outsider could be useful. You can find in italics the parts I've changed.

Visual Design in web development is a wide topic that mixes typography, color theory, graphics, animation, and the overall layout of a page. Its main goal is to deliver a site's message in the most effective way, and improve user experience. Many books cover these themes, and what defines good design is discussed since long before the birth of the internet.

At a basic level, most web content provides a user with information, and the Visual Design of the page can dramatically influence its presentation. In web development, HTML gives structure and meaning to the page's content, and CSS controls the layout and appearance of it. This section's goal is to cover some of the basic tools CSS offers that allow to create effective visual designs.

[HKuz]

@Atomk - thank you! Very helpful to get the perspective from a non-native English speaker. This did go through an iteration to remove the more, uh flowery(?) language, but I'll compare it to your suggestions and layer them in. Cheers!

[QuincyLarson]

@HKuz One thing we should definitely add to this is how to center text. Would you be able to create a quick challenge for this, showing that images can be centered with:

img{
  margin: auto;
}

[HKuz]

@QuincyLarson that should be an easy add, and I'll get it in the next round of changes on the CE branch. I may write the challenge to center a colored div element, and make the point that it applies to images too - try to avoid excess use of images 😄

[Atomk]

I would also add a challenge about the different type of selectors and combinations, at least the most common ones, it's something I really missed when I started building the front-end projects.

div .target   /* all elements with class "target" inside a div */
.container button /* all buttons inside elements with class "container" */
div.well   /* all divs with class "well" */
html, body, div   /* apply the same style to html, body and div elements */

[HKuz]

@Atomk sure - these challenges would probably make more sense in the existing CSS section (see issue #74). If you want to take a shot at writing them, that would be great! Just indicate where you think they should go in the ordering in the list at the top of the post.

Here's the challenge style guide and here's a comment with some more info. You can read all the comments in issue #55 - there's advice from others there, too.

Let me know, thanks!

[QuincyLarson]

@HKuz OK - that sounds good. We have those challenges focused on the box model (margin and padding) and this might be a good place to introduce the centered div challenge.

@Atomk I agree - we should definitely include CSS nesting. I can't believe I never thought to cover these. Great point! Thank you for your help designing these challenges!