Category: Codes

Basic CSS: Give a Background Color to a div Element

<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:…

Basic CSS: Add Rounded Corners with border-radius

<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:…

Basic CSS: Add Borders Around Your Elements

<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;}.smaller-image {width: 100px;}</style><h2 class="red-text">CatPhotoApp</h2><main><p…

Basic CSS: Size Your Images

<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;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here…

Basic CSS: Specify How Fonts Should Degrade

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"><style>.red-text {color: red;}h2 {font-family: Lobster;}p {font-size: 16px;font-family: monospace;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here to…

Basic CSS: Import a Google Font

<style>.red-text {color: red;}p {font-size: 16px;font-family: monospace;}</style><h2 class="red-text">CatPhotoApp</h2><main><p class="red-text">Click here to view more <a href="#">cat photos</a>.</p><a…

Basic CSS: Set the Font Family of an Element

<style>.red-text {color: red;}p {font-size: 16px;}</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…

Basic CSS: Change the Font Size of an Element

<style>.red-text {color: red;}</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 src="https://bit.ly/fcc-relaxing-cat" alt="A…

Basic CSS: Style Multiple Elements with a CSS Class

<style>.red-text {color: red;}</style><h2 class="red-text">CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute…

Basic CSS: Use a CSS Class to Style an Element

<style>h2 {color: blue;}</style><h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange…

Basic CSS: Use CSS Selectors to Style Elements

<h2 style="color: red">CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange…

Basic HTML and HTML5: Nest Many Elements within a Single div Element

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Create a Set of Checkboxes

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Use HTML5 to Require a Field

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Add a Submit Button to a Form

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Create a Form Element

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Add Placeholder Text to a Text Field

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Create an Ordered List

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying…

Basic HTML and HTML5: Turn an Image into a Link

<h2>CatPhotoApp</h2><main><p>Click here to view more <a href="#">cat photos</a>.</p><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on…

Basic HTML and HTML5: Make Dead Links Using the Hash Symbol

<h2>CatPhotoApp</h2><main> <p>Click here to view more <a href="http://freecatphotoapp.com" target="_blank">cat photos</a>.</p> <img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange…