fix(guide): Added solutions and some hints and problem explanations for curriculum related Guide articles being ported over to forum (#36545)
* fix: added info and solutions for stubs * fix: made title match main header * fix: removed wrong closing tag Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: added closing tag Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: corrected solution Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: changed verbiage Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: added code tags Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * fix: added solution
This commit is contained in:
Randell Dawson
committed by
Oliver Eyton-Williams
Oliver Eyton-Williams
parent
af1071c518
commit
7164d9a797
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Special subset sums - optimum
|
||||
title: 'Problem 103: Special subset sums: optimum'
|
||||
---
|
||||
## Problem 103: Special subset sums: optimum
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Special subset sums - testing
|
||||
title: 'Problem 105: Special subset sums: testing'
|
||||
---
|
||||
## Problem 105: Special subset sums: testing
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Special subset sums - meta-testing
|
||||
title: 'Problem 106: Special subset sums: meta-testing'
|
||||
---
|
||||
## Problem 106: Special subset sums: meta-testing
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Paper sheets of standard sizes - an expected-value problem
|
||||
title: 'Problem 151: Paper sheets of standard sizes: an expected-value problem'
|
||||
---
|
||||
## Problem 151: Paper sheets of standard sizes: an expected-value problem
|
||||
# Problem 151: Paper sheets of standard sizes: an expected-value problem
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 'Problem 152: Writing half as a sum of inverse squares'
|
||||
title: 'Problem 152: Writing one half as a sum of inverse squares'
|
||||
---
|
||||
## Problem 152: Writing one half as a sum of inverse squares
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Find the 200th prime-proof sqube containing the contiguous sub-string "200"
|
||||
title: 'Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200"'
|
||||
---
|
||||
## Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200"
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 'Problem 8: Largest product in a series'
|
||||
title: 'Problem 8: Largest product in a series'
|
||||
---
|
||||
# Problem 8: Largest product in a series
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Path sum - two ways
|
||||
title: 'Problem 81: Path sum: two ways'
|
||||
---
|
||||
## Problem 81: Path sum: two ways
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Path sum - three ways
|
||||
title: 'Problem 82: Path sum: three ways'
|
||||
---
|
||||
## Problem 82: Path sum: three ways
|
||||
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: Path sum - four ways
|
||||
title: 'Problem 83: Path sum: four ways'
|
||||
---
|
||||
## Problem 83: Path sum: four ways
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Averages-Pythagorean means
|
||||
title: Averages/Pythagorean means
|
||||
---
|
||||
# Averages-Pythagorean means
|
||||
# Averages/Pythagorean means
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Averages-Root mean square
|
||||
title: Averages/Root mean square
|
||||
---
|
||||
# Averages-Root mean square
|
||||
# Averages/Root mean square
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Build a Camper Leaderboard
|
||||
title: Build a freeCodeCamp Forum Homepage
|
||||
---
|
||||
# Build a Camper Leaderboard
|
||||
# Build a freeCodeCamp Forum Homepage
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/coding-interview-prep/take-home-projects/build-a-camper-leaderboard/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
|
||||
|
||||
@ -3,8 +3,81 @@ title: Convert JSON Data to HTML
|
||||
---
|
||||
# Convert JSON Data to HTML
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/json-apis-and-ajax/convert-json-data-to-html/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script >
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('getMessage').onclick = function() {
|
||||
req = new XMLHttpRequest();
|
||||
req.open("GET", '/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = function() {
|
||||
json = JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
json.forEach(function(val) {
|
||||
|
||||
// Adding each object keys
|
||||
var keys = Object.keys(val);
|
||||
// Generating new html
|
||||
html += "<div class = 'cat'>";
|
||||
// Adding the custom html to each key
|
||||
keys.map(function(key) {
|
||||
|
||||
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
|
||||
|
||||
});
|
||||
|
||||
html += "</div><br>";
|
||||
|
||||
});
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,69 @@ title: Render Images from Data Sources
|
||||
---
|
||||
# Render Images from Data Sources
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/json-apis-and-ajax/render-images-from-data-sources/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,70 @@ title: Create a Block Element Bootstrap Button
|
||||
---
|
||||
# Create a Block Element Bootstrap Button
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-block-element-bootstrap-button/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-block btn-default">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,78 @@ title: Create a Bootstrap Button
|
||||
---
|
||||
# Create a Bootstrap Button
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-bootstrap-button/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
|
||||
<!-- ADD Bootstrap Styled Button -->
|
||||
<button class="btn btn-default">Like</button>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
</html>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,13 @@ title: Create a Bootstrap Headline
|
||||
---
|
||||
# Create a Bootstrap Headline
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-bootstrap-headline/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,16 @@ title: Create a Bootstrap Row
|
||||
---
|
||||
# Create a Bootstrap Row
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-bootstrap-row/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,70 @@ title: Create a Custom Heading
|
||||
---
|
||||
# Create a Custom Heading
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-a-custom-heading/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,23 @@ title: Create Bootstrap Wells
|
||||
---
|
||||
# Create Bootstrap Wells
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/create-bootstrap-wells/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<div class="well"></div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div class="well"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,33 @@ title: Give Each Element a Unique id
|
||||
---
|
||||
# Give Each Element a Unique id
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/give-each-element-a-unique-id/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1"></button>
|
||||
<button class="btn btn-default target" id="target2"></button>
|
||||
<button class="btn btn-default target" id="target3"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4"></button>
|
||||
<button class="btn btn-default target" id="target5"></button>
|
||||
<button class="btn btn-default target" id="target6"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,15 @@ title: House our page within a Bootstrap container-fluid div
|
||||
---
|
||||
# House our page within a Bootstrap container-fluid div
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,33 @@ title: Label Bootstrap Buttons
|
||||
---
|
||||
# Label Bootstrap Buttons
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/label-bootstrap-buttons/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,33 @@ title: Label Bootstrap Wells
|
||||
---
|
||||
# Label Bootstrap Wells
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/label-bootstrap-wells/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
<button class="btn btn-default target"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,90 @@ title: Line up Form Elements Responsively with Bootstrap
|
||||
---
|
||||
# Line up Form Elements Responsively with Bootstrap
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-7">
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
</div>
|
||||
<div class="col-xs-5">
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,73 @@ title: Make Images Mobile Responsive
|
||||
---
|
||||
# Make Images Mobile Responsive
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/make-images-mobile-responsive/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
When using Bootstrap, if you want an image to be responsive, all you have to do is add the class `img-responsive` to it.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive">
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,88 @@ title: Responsively Style Checkboxes
|
||||
---
|
||||
# Responsively Style Checkboxes
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/responsively-style-checkboxes/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
You can use Bootstrap’s col-xs-* classes on form elements, too! This way, our checkboxes will be evenly spread out across the page, regardless of how wide the screen resolution is.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,76 @@ title: Responsively Style Radio Buttons
|
||||
---
|
||||
# Responsively Style Radio Buttons
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/responsively-style-radio-buttons/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
@ -3,8 +3,18 @@ title: Split Your Bootstrap Row
|
||||
---
|
||||
# Split Your Bootstrap Row
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/split-your-bootstrap-row/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6"></div>
|
||||
<div class="col-xs-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
</details>
|
||||
@ -3,8 +3,84 @@ title: Style Text Inputs as Form Controls
|
||||
---
|
||||
# Style Text Inputs as Form Controls
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/style-text-inputs-as-form-controls/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-8">
|
||||
<h2 class="text-primary text-center">CatPhotoApp</h2>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
<p>Things cats <span class="text-danger">love:</span></p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
</div>
|
||||
</div>
|
||||
<input type="text" class="form-control" placeholder="cat photo URL" required>
|
||||
<button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,70 @@ title: Taste the Bootstrap Button Color Rainbow
|
||||
---
|
||||
# Taste the Bootstrap Button Color Rainbow
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<button class="btn btn-primary btn-block">Like</button>
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,34 @@ title: Use Comments to Clarify Code
|
||||
---
|
||||
# Use Comments to Clarify Code
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/use-comments-to-clarify-code/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<!-- Only change code above this line. -->
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,88 @@ title: Use the Bootstrap Grid to Put Elements Side By Side
|
||||
---
|
||||
# Use the Bootstrap Grid to Put Elements Side By Side
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
## Problem Explanation
|
||||
Bootstrap uses a responsive grid system that makes it easier to put elements into rows and tell each element's relative width.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
|
||||
Note that in this illustration, the `col-md-_` class is being used. Here, md means medium, and _ is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, Monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: Monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h2 class="red-text text-center">CatPhotoApp</h2>
|
||||
|
||||
<p>Click here for <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
|
||||
<div class="row">
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-primary">Like</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-info">Info</button>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<button class="btn btn-block btn-danger">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<form action="/submit-cat-photo">
|
||||
<label><input type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
<label><input type="checkbox" name="personality"> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Crazy</label>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</div>
|
||||
```
|
||||
</details>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
@ -3,8 +3,45 @@ title: Delete Your jQuery Functions
|
||||
---
|
||||
# Delete Your jQuery Functions
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/delete-your-jquery-functions/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
To delete the functions it is just as any other piece of code that you want to remove, select it and delete with the keyboard.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,43 @@ title: Disable an Element Using jQuery
|
||||
---
|
||||
# Disable an Element Using jQuery
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/disable-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,39 @@ title: Learn How Script Tags and Document Ready Work
|
||||
---
|
||||
# Learn How Script Tags and Document Ready Work
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/learn-how-script-tags-and-document-ready-work/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
});
|
||||
</script>
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,44 @@ title: Remove an Element Using jQuery
|
||||
---
|
||||
# Remove an Element Using jQuery
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/remove-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
|
||||
@ -3,8 +3,48 @@ title: Target a Specific Child of an Element Using jQuery
|
||||
---
|
||||
# Target a Specific Child of an Element Using jQuery
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/target-a-specific-child-of-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,47 @@ title: Target the Children of an Element Using jQuery
|
||||
---
|
||||
# Target the Children of an Element Using jQuery
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/target-the-children-of-an-element-using-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,44 @@ title: Use appendTo to Move Elements with jQuery
|
||||
---
|
||||
# Use appendTo to Move Elements with jQuery
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/front-end-libraries/jquery/use-appendto-to-move-elements-with-jquery/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line. -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Comparison with the greater than operator (>)
|
||||
title: Comparison with the Greater Than Operator
|
||||
---
|
||||
# Comparison with the Greater Than Operator (>)
|
||||
# Comparison with the Greater Than Operator
|
||||
|
||||
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Comparisons with the && (logical AND) operator
|
||||
title: Comparisons with the Logical AND operator
|
||||
---
|
||||
# Comparisons with the && (logical AND) operator
|
||||
# Comparisons with the Logical AND operator
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
@ -3,7 +3,37 @@ title: Iterate with JavaScript For Loops
|
||||
---
|
||||
# Iterate with JavaScript For Loops
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Hints
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
### Hint 1
|
||||
```javascript
|
||||
for(var i = 0; i < 5; i++) { // There are 3 parts here
|
||||
```
|
||||
|
||||
There are three parts to for loop. They are separated by semicolons.
|
||||
|
||||
1. The initialization: `var i = 0;` - This code runs only once at the start of the loop. It's usually used to declare the counter variable (with `var`) and initialize the counter (in this case it is set to 0).
|
||||
|
||||
2. The condition: `i < 5;` - The loop will run as long as this is `true`. That means that as soon as `i` is equal to 5, the loop will stop looping. Note that the inside of the loop will never see `i` as 5 because it will stop before then. If this condition is initially `false`, the loop will never execute.
|
||||
|
||||
3. The increment: `i++` - This code is run at the end of each loop. It's usually a simple increment (`++` operator), but can really be any expression. It is used to move the counter (`i`) forward (or backwards, or whatever).
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
var ourArray = [];
|
||||
for (var i = 0; i < 5; i++) {
|
||||
ourArray.push(i);
|
||||
}
|
||||
|
||||
var myArray = [];
|
||||
for (var i = 1; i < 6; i++) {
|
||||
myArray.push(i);
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,7 +3,27 @@ title: Logical Order in If Else Statements
|
||||
---
|
||||
# Logical Order in If Else Statements
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Hints
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
### Hint 1
|
||||
So be careful while using the `if`, `else if` and `else` statements and always remember that these are executed from top to bottom. Keep this in mind placing your statements accordingly so that you get the desired output.
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
function orderMyLogic(val) {
|
||||
if(val < 5) {
|
||||
return "Less than 5";
|
||||
} else if (val < 10) {
|
||||
return "Less than 10";
|
||||
} else {
|
||||
return "Greater than or equal to 10";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,7 +3,27 @@ title: Quoting Strings with Single Quotes
|
||||
---
|
||||
# Quoting Strings with Single Quotes
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
String values in JavaScript may be written with single or double quotes, so long as you start and end with the same type of quote. Unlike some languages, single and double quotes are functionally identical in JavaScript.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
```
|
||||
"This string has \"double quotes\" in it"
|
||||
```
|
||||
|
||||
The value in using one or the other has to do with the need to escape quotes of the same type. If you have a string with many double quotes, this can be difficult to read and write. Instead, use single quotes:
|
||||
|
||||
```
|
||||
'This string has "double quotes" in it. And "probably" lots of them.'
|
||||
```
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```javascript
|
||||
var myStr = '<a href="http://www.example.com" target="_blank">Link</a>';
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Make Links Navigatable with HTML Access Keys
|
||||
title: Make Links Navigable with HTML Access Keys
|
||||
---
|
||||
# Make Links Navigatable with HTML Access Keys
|
||||
# Make Links Navigable with HTML Access Keys
|
||||
|
||||
|
||||
---
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
---
|
||||
title: Cascading CSS Variables
|
||||
title: Inherit CSS Variables
|
||||
---
|
||||
# Cascading CSS Variables
|
||||
# Inherit CSS Variables
|
||||
|
||||
---
|
||||
## Problem Explanation
|
||||
|
||||
@ -3,8 +3,74 @@ title: Set the id of an Element
|
||||
---
|
||||
# Set the id of an Element
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/set-the-id-of-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,18 @@ title: Style the HTML Body Element
|
||||
---
|
||||
# Style the HTML Body Element
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/style-the-html-body-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</details>
|
||||
@ -3,8 +3,48 @@ title: Use Abbreviated Hex Code
|
||||
---
|
||||
# Use Abbreviated Hex Code
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-abbreviated-hex-code/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
Red, which is `#FF0000` in hex code, can be shortened to `#F00`. That is, one digit for red, one digit for green, one digit for blue.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
This reduces the total number of possible colors to around 4,000. But browsers will interpret `#FF0000` and `#F00` as exactly the same color.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #F00;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.red-text {
|
||||
color: #F00;
|
||||
}
|
||||
.fuchsia-text {
|
||||
color: #F0F;
|
||||
}
|
||||
.cyan-text {
|
||||
color: #0FF;
|
||||
}
|
||||
.green-text {
|
||||
color: #0F0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1 class="red-text">I am red!</h1>
|
||||
|
||||
<h1 class="fuchsia-text">I am fuchsia!</h1>
|
||||
|
||||
<h1 class="cyan-text">I am cyan!</h1>
|
||||
|
||||
<h1 class="green-text">I am green!</h1>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,78 @@ title: Use an id Attribute to Style an Element
|
||||
---
|
||||
# Use an id Attribute to Style an Element
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
|
||||
<style>
|
||||
.red-text {
|
||||
color: red;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: Lobster, monospace;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.thick-green-border {
|
||||
border-color: green;
|
||||
border-width: 10px;
|
||||
border-style: solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.smaller-image {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.silver-background {
|
||||
background-color: silver;
|
||||
}
|
||||
|
||||
#cat-photo-form {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h2 class="red-text">CatPhotoApp</h2>
|
||||
<main>
|
||||
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
|
||||
|
||||
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
<div class="silver-background">
|
||||
<p>Things cats love:</p>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<p>Top 3 things cats hate:</p>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<form action="/submit-cat-photo" id="cat-photo-form">
|
||||
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
|
||||
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
|
||||
<label><input type="checkbox" name="personality" checked> Loving</label>
|
||||
<label><input type="checkbox" name="personality"> Lazy</label>
|
||||
<label><input type="checkbox" name="personality"> Energetic</label><br>
|
||||
<input type="text" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,61 @@ title: Use Clockwise Notation to Specify the Margin of an Element
|
||||
---
|
||||
# Use Clockwise Notation to Specify the Margin of an Element
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
Instead of specifying an element’s `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` attributes, you can specify them all in one line, like this: `margin: 10px 20px 10px 20px;`.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```css
|
||||
.green-box {
|
||||
background-color: green;
|
||||
margin: 40px 20px 20px 40px;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
margin: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
margin: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,48 @@ title: Use Clockwise Notation to Specify the Padding of an Element
|
||||
---
|
||||
# Use Clockwise Notation to Specify the Padding of an Element
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<style>
|
||||
.injected-text {
|
||||
margin-bottom: -25px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-style: solid;
|
||||
border-color: black;
|
||||
border-width: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.yellow-box {
|
||||
background-color: yellow;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.red-box {
|
||||
background-color: crimson;
|
||||
color: #fff;
|
||||
padding: 20px 40px 20px 40px;
|
||||
}
|
||||
|
||||
.blue-box {
|
||||
background-color: blue;
|
||||
color: #fff;
|
||||
padding: 40px 20px 20px 40px;
|
||||
}
|
||||
</style>
|
||||
<h5 class="injected-text">margin</h5>
|
||||
|
||||
<div class="box yellow-box">
|
||||
<h5 class="box red-box">padding</h5>
|
||||
<h5 class="box blue-box">padding</h5>
|
||||
</div>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,23 @@ title: Use Hex Code for Specific Colors
|
||||
---
|
||||
# Use Hex Code for Specific Colors
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-hex-code-for-specific-colors/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Problem Explanation
|
||||
With CSS, we use 6 hexadecimal number to represent colors. For example, `#000000` is the lowest possible value, and it represents the color black.
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
This is the same as `#RRGGBB` which can also be simplified to `#RGB`.
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
@ -3,8 +3,16 @@ title: Use RGB values to Color Elements
|
||||
---
|
||||
# Use RGB values to Color Elements
|
||||
|
||||
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/use-rgb-values-to-color-elements/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
|
||||
---
|
||||
## Solutions
|
||||
|
||||
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
|
||||
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
||||
|
||||
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
background-color: rgb(0, 0, 0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
</details>
|
||||
Reference in New Issue
Block a user