Mohammad AlGhadban

JavaScript Part 1

2022-08-30T00:00:00+00:00

Review

Let’s take one more glance at the concepts we just learned:

Data is printed, or logged, to the console, a panel that displays messages, with console.log().
We can write single-line comments with // and multi-line comments between /* and */.
There are 7 fundamental data types in JavaScript: strings, numbers, booleans, null, undefined, symbol, and object.
Numbers are any number without quotes: 23.8879
Strings are characters wrapped in single or double quotes: ‘Sample String’
The built-in arithmetic operators include +, -, *, /, and %.
Objects, including instances of data types, can have properties, stored information. The properties are denoted with a . after the name of the object, for example: ‘Hello’.length.
Objects, including instances of data types, can have methods which perform actions. Methods are called by appending the object or instance with a period, the method name, and parentheses. For example: ‘hello’.toUpperCase().
We can access properties and methods by using the ., dot operator.
Built-in objects, including Math, are collections of methods and properties that JavaScript provides.
Here are a few more resources to add to your toolkit:

Codecademy Docs: JavaScript

Codecademy Workspaces: JavaScript

Make sure to bookmark these links so you have them at your disposal.

Grid part2

2022-08-12T00:00:00+00:00

Advanced CSS Grid:

You have learned many new properties to use when creating a layout using CSS Grid! Let’s review:

grid-template-areas specifies grid named grid areas
grid layouts are two-dimensional: they have a row, or inline, axis and a column, or block, axis.
justify-items specifies how individual elements should spread across the row axis
justify-content specifies how groups of elements should spread across the row axis
justify-self specifies how a single element should position itself with respect to the row axis
align-items specifies how individual elements should spread across the column axis
align-content specifies how groups of elements should spread across the column axis
align-self specifies how a single element should position itself with respect to the column axis
grid-auto-rows specifies the height of rows added implicitly to the grid
grid-auto-columns specifies the width of columns added implicitly to the grid
grid-auto-flow specifies in which direction implicit elements should be created

This is a great time to experiment with the code in the code editor and try any of the properties you want to practice more! When you’re ready, move on!

Grid

2022-08-12T00:00:00+00:00

Introduction to Grid in CSS:

At this point, we’ve covered a great deal of different ways to manipulate the grid and the items inside it to create interesting layouts.

grid-template-columns defines the number and sizes of the columns of the grid
grid-template-rows defines the number and sizes of the rows of the grid
grid-template is a shorthand for defining both grid-template-columns and grid-template-rows in one line
row-gap puts blank space between the rows of the grid
column-gap puts blank space between the columns of the grid
gap is a shorthand for defining both row-gap and column-gap in one line
grid-row-start and grid-row-end makes elements span certain rows of the grid
grid-column-start and grid-column-end makes elements span certain columns of the grid
grid-area is a shorthand for grid-row-start, grid-column-start, grid-row-end, and grid-column-end, all in one line

You have seen how to set up and fill in a grid and you now have one more CSS positioning technique to add to your toolkit! Let’s do some practice to solidify these skills.

HTML:

<!DOCTYPE html>
<html>
<head>
  <link rel='stylesheet' href='style.css'></head>
  
<body>
  <div class="grid">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
    <div class="box d">D</div>
    <div class="box e">E</div>
  </div>
</body>

</html>

CSS:

.grid {
  border: 2px blue solid;
  height: 500px;
  width: 500px;
  display: grid;
  grid-template: repeat(2, 200px) / 25% 25% 2fr 1fr;
  gap: 10px 15px;
}

.box {
  background-color: beige;
  color: black;
  border-radius: 5px;
  border: 2px dodgerblue solid;
}

.a{
grid-area: 1 / span 2/ 1 / 3;
}

FLex Box part 1

2022-07-26T00:00:00+00:00

Introduction to Flex box Part1

You know everything necessary to begin using it in your own projects.

display: flex changes an element to a block-level container with flex items inside of it.
display: inline-flex allows multiple flex containers to appear inline with each other.
justify-content is used to space items along the main axis.
align-items is used to space items along the cross axis.
flex-grow is used to specify how much space (and in what proportions) flex items absorb along the main axis.
flex-shrink is used to specify how much flex items shrink and in what proportions along the main axis.
flex-basis is used to specify the initial size of an element styled with flex-grow and/or flex-shrink.
flex is used to specify flex-grow, flex-shrink, and flex-basis in one declaration.
flex-wrap specifies that elements should shift along the cross axis if the flex container is not large enough.
align-content is used to space rows along the cross axis.
flex-direction is used to specify the main and cross axes.
flex-flow is used to specify flex-wrap and flex-direction in one declaration.
Flex containers can be nested inside of each other by declaring display: flex or display: inline-flex for children of flex containers.

Example:

important code:

.cards {
  background-color: #ffc200;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

The whole code:

HTML:

<!doctype html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700,400italic' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="header">
    <div class="container">
      <h1>Headlines.</h1>
      <ul>
        <li><a href="3">About</a></li>
        <li><a href="#expertise">Our Services</a></li>
        <li><a href="3">Our Team</a></li>
        <li><a href="#footer">Contact Us</a></li>
      </ul>
    </div>
  </div>
  <div class="jumbotron">
    <div class="container">
      <h2>We <span>collect and curate</span>
articles, opinions, and images
from around the world.</h2>
    </div>
  </div>
  <div class="banner">
    <div class="container">
      <h2>The Bottom Line.</h2>
      <p>We deliver the news that is relevant to you.</p>
    </div>
  </div>
  <div class="container">
    <h2 id="expertise">Our Expertise.</h2>
    <div class="main">
      <div class="spacer">
        <div class="cards">
          <div class="col">
            <img src="https://content.codecademy.com/projects/headlines/p1.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p6.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p8.jpg">
          </div>
          <div class="col">
            <img src="https://content.codecademy.com/projects/headlines/p2.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p5.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p7.jpg">
          </div>
          <div class="col">
            <img src="https://content.codecademy.com/projects/headlines/p3.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p4.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p9.jpg">
            <img src="https://content.codecademy.com/projects/headlines/p10.jpg">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <h3>Headlines.</h3>
    <p>1000 7th Avenue</p>
    <p>New York, NY</p>
    <p>(484) 192 - 8372</p>
  </div>
</body>
</html>

CSS:

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Libre Baskerville', sans-serif;
}

img {
  margin: 10px auto;
  height: auto;
  width: auto;
}

ul {
  text-align: right;
}

h1 {
  font-size: 20px;
}

/*Sizing*/

.container {
  margin: 0 auto;
}

.spacer {
  max-width: 1200px;
  margin: auto;
}

.main {
    background-color: #ffc200;
}

/*Header Section*/

.header {
  padding: 30px 0px 40px;
  margin-left: 50px;
  margin-right: 50px;
}

.header li {
  list-style: none;
  display: inline-block;
}

.header li a {
  color: #333;
  margin:0;
  border:0px;
}

/*Jumbotron Section*/

.jumbotron {
  background-color: #fff;
  max-width: 1200px;
  margin-left: 50px;
}

.jumbotron h2 {
  font-size: 50px;
  margin-bottom: 70px;
}

.jumbotron h2 span {
  color:#ffc200;
}

.jumbotron p {
  text-shadow: 0 0;
  font-size: 16px;
  color: #666;
  margin-bottom: 0;
}

/*Banner Section*/
.banner {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/*Expertise Section*/
.cards {
  background-color: #ffc200;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.col {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
}

#expertise {
  padding: 20px;
  background-color: #ffc200;
  margin: 0;
  text-align: center;
}

/*Footer Section*/
.footer {
  padding: 60px 0px;
  background-color: #000;
  color: #fff;
}

.footer h3 {
  font-size: 20px;
  margin-left: 20px;
}

.footer p {
  font-size:12px;
  margin-bottom: 0;
  margin-left: 20px;
}

CSS part4

2022-07-16T00:00:00+00:00

Introduction to CSS Part4

In this lesson we covered the concept of using breadcrumbs as a secondary navigation method for a site:

Use breadcrumbs to indicate where a user is and the extent of the site
Breadcrumbs are implemented using unordered lists in HTML with custom CSS styling
Three types of breadcrumbs exist:
location - based on hierarchical structure of site
attribute - based on attributes of current page or item
path - unique to a user’s journey on the site
Path-based breadcrumbs can be confusing, only use if needed
Ensure breadcrumbs will add value before adding to a site

Example:

.breadcrumb li{
  display: inline;
}

.breadcrumb li.location+li.location::before{
  padding:10px;
  color:blue;
  content: ">"
}

.breadcrumb a:hover{
  text-decoration: underline;
}

.breadcrumb li.attribute a {
  color: gray;
}
.breadcrumb li.attribute::after {
  content: "x";
  color: red;
  font-size: 10px;
  vertical-align: super;
}

making arrows of breadcrumbs:

.breadcrumb {
  text-align: left;
}
// ................................. making the body of the arrow:

.breadcrumb li {
  float: left;
}


.breadcrumb a {
  color: #fff;
  background: darkcyan;
  text-decoration: none;
  position: relative;
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-right: 15px;
  padding: 0 5px;
}

// ...................................... making it an arrow:

.breadcrumb a::before,
.breadcrumb a::after {
  content: "";
  position: absolute;
  border-color: darkcyan;
  border-style: solid;
  border-width: 15px 5px;
}
.breadcrumb a::before {
  left: -10px;
  border-left-color: transparent;
}
.breadcrumb a::after {
  left: 100%;
}
.breadcrumb a::after {
  left: 100%;
  border-color: transparent;
  border-left-color: darkcyan;
}

// ................................. styling

.breadcrumb a:hover {
  background-color: blue;
}
.breadcrumb a:hover::before {
  border-color: blue;
  border-left-color: transparent;
}
.breadcrumb a:hover::after {
  border-left-color: blue;
}

CSS part1

2022-07-08T00:00:00+00:00

Introduction to CSS Part1

Let’s review what you learned so far:

The basic anatomy of CSS syntax written for both inline styles and stylesheets.
Some commonly used CSS terms, such as ruleset, selector, and declaration.
CSS inline styles can be written inside the opening HTML tag using the style attribute.
Inline styles can be used to style HTML, but it is not the best practice.
An internal stylesheet is written using the <style> element inside the <head> element of an HTML file.
Internal stylesheets can be used to style HTML but are also not best practice.
An external stylesheet separates CSS code from HTML, by using the “.css”.file extension.
External stylesheets are the best approach when it comes to using HTML and CSS.
External stylesheets are linked to HTML using the <link> element.
Take this knowledge to the next lesson, where you start learning how to select HTML elements to style!

Here are a few more resources to add to your toolkit:

Codecademy Docs: CSS

Codecademy Workspaces: CSS

Example:

HTML file: Index.HTML

<head>
  <title>Vacation World</title>
  <link href='style.css' rel='stylesheet'>
</head>

CSS file: Style.CSS

p {
  color: green;
}

CSS part2

2022-07-08T00:00:00+00:00

Introduction to CSS Part2

Throughout this lesson, you learned how to select HTML elements with CSS and apply styles to them. Let’s review what you learned:

CSS can select HTML elements by type, class, ID, and attribute.
All elements can be selected using the universal selector.
An element can have different states using the pseudo-class selector.
Multiple CSS classes can be applied to one HTML element.
Classes can be reusable, while IDs can only be used once.
IDs are more specific than classes, and classes are more specific than type. That means IDs will override any styles from a class, and classes will override any styles from a type selector.
Multiple selectors can be chained together to select an element. This raises the specificity but can be necessary.
Nested elements can be selected by separating selectors with a space.
Multiple unrelated selectors can receive the same styles by separating the selector names with commas.

Example:

HTML file:

<!DOCTYPE html>
<html>

<head>
  <title>Vacation World</title>
  <link href='style.css' rel='stylesheet'>
</head>

<body>
  <img src='https://content.codecademy.com/courses/freelance-1/unit-2/explorer.jpeg' />
  <h1 class='title uppercase' id='article-title'>Top Vacation Spots</h1>
  <h5 class='author-class' id='author-id'>By: Stacy Gray</h5>
  <h6 id='publish-time'>Published: 2 Days Ago</h6>

  <p>The world is full of fascinating places. Planning the perfect vacation involves packing up, leaving home, and experiencing something new.</p>

  <h2 class='destination heading-background'>1. Florence, Italy</h2>
  <div class='description'>A city-size shrine to the Renaissance, Florence offers frescoes, sculptures, churches, palaces, and other monuments from the richest cultural flowering the world has known. Names from its dazzling historical past; Dante, Michelangelo, Galileo, Machiavelliare are some of the most resonant of the medieval age. <a href='https://www.nationalgeographic.com/travel/destination/florence' target='_blank'>Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Museums</li>
      <li>Bike Tours</li>
      <li>Historical Monuments</li>
    </ul>
  </div>

  <h2 class='destination heading-background'>2. Beijing, China</h2>
  <div class='description'>A city in the midst of reinventing itself and continuing to build on the success of the 2008 Summer Olympics, Beijing is a place of frenzied construction. New housing, new roads, and new sports venues seem to spring up overnight. At the same time, the capital of the Peoples Republic of China remains an epicenter of tradition, with the treasures of nearly 2,000 years as the imperial capital still on view in the famed Forbidden City and in the luxuriant pavilions and gardens of the Summer Palace.
    <a href='https://www.nationalgeographic.com/travel/destination/beijing' target='_blank'>Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Biking</li>
      <li>Historical Sites</li>
      <li>Restaurants and Dining</li>
    </ul>
  </div>

  <h2 class='destination heading-background'>3. Seoul, South Korea</h2>
  <div class='description'>The Korean capital is a city of contrasts. Fourteenth-century city gates squat in the shadow of 21st-century skyscrapers, while the broad Han River is back-dropped by granite mountains rising in the city center complete with alpine highways speeding around their contours and temples nestling among their crags. Fashionable, gadget-laden youths battle for sidewalk space with fortune-tellers and peddlers, while tiny neighborhoods of traditional cottages contrast with endless ranks of identical apartments.
    <a href='https://www.nationalgeographic.com/travel/destination/seoul' target='_blank'>Learn More</a>.
    <h5>Top Attractions</h5>
    <ul>
      <li>Parasailing</li>
      <li>Segway Tours</li>
      <li>Spas and Resorts</li>
    </ul>
  </div>

  <h2 class='heading-background'> More Destinations </h2>
  <ul>
    <li><h4 class='destination'>Jackson Hole, Wyoming</h4></li>
    <li><h4 class='destination'>Cape Town, South Africa</h4></li>
    <li><h4 class='destination'>La Paz, Bolivia</h4></li>
  </ul>

  <p>&mdash;Best of luck with your travels, and be sure to send pictures and stories. We'd love to hear them!</p>


</body>

</html>

CSS file:

{
  border: 1px solid red;
}

p {
  color: green;
}

h1 {
  color: maroon;
}

.title {
  color: teal;
}

.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: cursive;
}

a[href*='florence'] {
  color: lightgreen;
}

a[href*='beijing'] {
  color: lightblue;
}

a[href*='seoul'] {
  color: lightpink;
}

a:hover {
  color:darkorange;
}

.heading-background {
  background-color: aqua;
}

#publish-time {
  color: lightgray;
}

h5 {
  color: yellow;
}

.author-class {
  color: pink;
}

#author-id {
  color: cornflowerblue;
}

h2.destination {
  font-family: Tahoma;
}

.description h5 {
  color: blueviolet;
}

li h4 {
  color: gold;
}

h4 {
  color: dodgerblue;
}

li,
h5 {
  font-family: monospace;
}

Throughout this lesson, you learned concepts including:

The font-family property defines the typeface of an element.
font-size controls the size of text displayed.
font-weight defines how thin or thick text is displayed.
The text-align property places text in the left, right, or center of its parent container.
Text can have two different color attributes: color and background-color. color defines the color of the text, while background-color defines the color behind the text.
CSS can make an element transparent with the opacity property.
CSS can also set the background of an element to an image with the background-image property.
The !important flag will override any style, however it should almost never be used, as it is extremely difficult to override.

Example:

body {
  /* Old browsers */
  background: #141E30;
  /* Chrome 10-25, Safari 5.1-6 */
  background: -webkit-linear-gradient(-45deg, #35577D, #141E30);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  background: linear-gradient(-45deg, #35577D, #141E30);
  margin: 0;
  padding: 0;
}

h1 {
  color: #FFF !important;
  font-size: 2em;
  padding-top: 100px;
  width: 100%;
  font-family: Georgia;
  text-align: center;
}

h2 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.5);
  font-weight: 100;
  font-size: 22px;
  line-height: 24px;
  padding-bottom: 30px;
  text-align: left;
  width: 70%;
  font-family: Georgia;
}

p {
  color: aliceblue;
  line-height: 1.3em;
  text-align: left;
  width: 100%;
  font-family: Helvetica;
  font-size: 18px;
  font-weight: bold;
}

.byline {
  font-family: Helvetica;
  color: rgba(255, 255, 255, 0.5);
  float: left;
  font-size: 14px;
  padding-left: 10px;
  text-transform: uppercase;
}

.caption {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 14px;
  margin-left: 20px;
  padding: 10px;
  position: relative;
  top: 80%;
  width: 60%;
  background-color: white;
  color: black;
}

.content {
  padding: 40px;
}

.image {
  background-image: url('https://content.codecademy.com/courses/freelance-1/unit-2/soccer.jpeg');
  background-size: cover;
  background-position: center;
  height: 300px;
}

.writer-img {
  -webkit-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  -moz-box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  box-shadow: 5px 0px 5px 0px rgba(0, 0, 50, 0.97);
  float: left;
  width: 50px;
}

Documentation: CSS

MDN The provided link goes directly to the go-to documentation for CSS (Cascading Style Sheets). This is helpful if you would like a comprehensive resource for understanding the key concepts of CSS and understanding how to debug common CSS problems.

Instead of trying to remember it all, use the documentation as a readily available resource for syntax or implementation help!

CSS part3

2022-07-08T00:00:00+00:00

Introduction to CSS Part3

In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HTML and CSS topics. Let’s take a minute to review what you learned:

The box model comprises a set of properties used to create space around and between HTML elements.
The height and width of a content area can be set in pixels or percentages.
Borders surround the content area and padding of an element. The color, style, and thickness of a border can be set with CSS properties.
Padding is the space between the content area and the border. It can be set in pixels or percent.
Margin is the amount of spacing outside of an element’s border.
Horizontal margins add, so the total space between the borders of adjacent elements is equal to the sum of the right margin of one element and the left margin of the adjacent element.
Vertical margins collapse, so the space between vertically adjacent elements is equal to the larger margin.
margin: 0 auto horizontally centers an element inside of its parent content area, if it has a width.
The overflow property can be set to display, hide, or scroll, and dictates how HTML will render content that overflows its parent’s content area.
The visibility property can hide or show elements.
In the default box model, box dimensions are affected by border thickness and padding.
The box-sizing property controls the box model used by the browser.
The default value of the box-sizing property is content-box.
The value for the new box model is border-box.
The border-box model is not affected by border thickness or padding.

Example:

*{
  box-sizing: border-box;
}
body {
  background-color: white;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  font-weight: 100;
  letter-spacing: 2px;
  padding: 20px;
}

.navigation  li.logo {
  color: black;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 4px;
}

.donate{
  visibility: hidden;
}

#banner {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_tahoe.jpeg");
  background-size: cover;
  background-position: bottom center;
  height: 700px;
  width: 100%;
}

#banner .content h1 {
  border: 3px solid white;
  position: relative;
  top: 50px;
  width: 400px;
  margin: 0 auto;
}

#main {
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  width: 400px;
  height: 1000px;
  overflow: scroll;
}

h1 {
  color: white;
  font-size: 42px;
  font-weight: 600;
  text-align: center;
}

h2 {
  border: 1px dotted red;
  color: red;
  font-size: 14px;
  line-height: 48px;
  padding: 20px 30px;
  margin: 30px 20px;
  text-align: center;
}

h3 {
  color: red;
  font-size: 26px;
  font-weight: 700;
  padding: 20px 10px;
}

p {
  color: grey;
  font-size: 16px;
  line-height: 48px;
  margin-top: 60px;
  padding: 10px 20px;
}

.pull-quote {
  margin: 0 auto;
  width: 400px;
}

.byline {
  border-bottom: 1px solid LightGrey;
  border-top: 1px solid LightGrey;
  color: DarkGrey;
  font-size: 14px;
  font-weight: 200;
}

.share {
  border: 1px solid LightGrey;
  padding: 40px 0px;
  position: relative;
  text-align: center;
  width: 100%;
}

.share a {
  background: red;
  border: 1px solid red;
  border-radius: 3px;
  color: white;
  display: inline-block;
  margin: 10px;
  padding: 14px;
  text-decoration: none;
}

.share a:hover {
  background: white;
  border: 1px solid red;
  color: red;
}

/* Universal Styles */

body {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_foodlogo.png");
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
}

a {
  text-decoration: none;
}

/* Navigation */

nav {
  text-align: center;
}

nav img {
  display: block;
  width: 180;
  margin: 0 auto;
}

nav span {
  display: block;
  font-size: 16px;
  font-weight: 100;
  letter-spacing: 2px;
  margin: 10px 0px;
}

nav a {
  color: #666666;
}

/* Content Container */

.content {
  width: 100%;
  height: 500px;
  margin: 10px auto;
  overflow: scroll;
}

/* Content Header */

.header {
  background-image: url("https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burgerphoto.jpeg");
  background-position: center;
  background-size: cover;
  height: 320px;
}

.header h1 {
  background-color: #05A8AA;
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 40px;
  width: 68%;
  padding: 20px;
  margin: 0 auto;
}

/* Content Body */

.content .body {
  width: 90%;
  margin: 0 auto;
}

.body p {
  color: #333333;
  font-weight: 100;
  line-height: 34px;
  width: 90%;
  margin-top: 18px;
}

/* Content Button */

.button {
  border-radius: 4px;
  color: #05A8AA;
  display: block;
  font-weight: 700;
  width: 200px;
  padding: 20px;
  margin: 40px auto;
  border: 1px solid blue;
}

.button:hover {
  background-color: #05A8AA;
  border: 1px solid #05A8AA;
  color: #FFF;
}

/* Content Nutrition */

ul.nutrition {
  padding: 20px;
}

ul.nutrition li {
  display: inline-block;
  background-color: #05A8AA;
  list-style: none;
  width: 200px;
  padding: 10px 20px;
  margin-bottom: 3px;
}

.nutrition .category {
  color: white;
  font-weight: 100;
  letter-spacing: 2px;
  display: block;
}

.nutrition .value {
  color: white;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 2px;
}

Let’s review what you’ve learned so far:

The position property allows you to specify the position of an element.
When set to relative, an element’s position is relative to its default position on the page.
When set to absolute, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled.
When set to fixed, an element’s position can be pinned to any part of the web page. The element will remain in view no matter what.
When set to sticky, an element can stick to a defined offset position when the user scrolls its parent container.
The z-index of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements.
The display property allows you to control how an element flows vertically and horizontally in a document.
inline elements take up as little space as possible, and they cannot have manually adjusted width or height.
block elements take up the width of their container and can have manually adjusted heights.
inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width.
The float property can move elements as far left or as far right as possible on a web page.
You can clear an element’s left or right side (or both) using the clear property.
When combined with an understanding of the box model, positioning can create visually appealing web pages. So far, we’ve focused on adding content in the form of text to a web page. In the next unit, you’ll learn how to add and manipulate images to a web page.

Example:

body {
  background-color: #FFF;
  margin: 0 auto;
}

header {
  background-color: #466995;
  border-bottom: 1px solid #466995;
  position: fixed;
  width: 100%;
  z-index: 10;
}

ul {
  margin: 30px auto;
  padding: 0 20px;
  text-align: center;
}

li {
  color: #FFF;
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  display: inline-block;
  width: 80px;  
}

li:hover {
  color: #DBE9EE;
}

h1 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 32px;
  font-weight: 300;
  text-transform: uppercase;
}

h2 {
  color: #333;
  font-family: 'Varela Round', sans-serif;
  font-size: 26px;
  font-weight: 100;
  margin: 0 auto 20px auto;
}

h3 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  text-align: center;
  font-weight: 700;
  text-transform: uppercase;
  padding: 30px;
}

h4 {
  color: #466995;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
  text-transform: uppercase
}

p {
  color: #333;
  font-family: 'Varela Round', sans-serif;
  font-size: 18px;
}

footer {
  background-color: #DBE9EE;
  text-align: center;
  height: 100px;
}

.welcome {
  background-color: #DBE9EE;
  box-sizing: border-box;
  padding: 40px;
  text-align: center;
  width: 100%;
  position: relative;
  top: 50px;
}

.question {
  text-align: center;
  position: relative;
  top: 40px;
}

.answer {
  border: 1px solid #466995;
  margin: 20px;
  display: inline-block;
}

.answer:hover {
  background: #C0D6DF;
  color: #FFF;
}

Button Example:

a{
  color:blue;
  text-decoration: underline;
  cursor: pointer;
}

a:hover{
  text-decoration: none;
}

.nav-link{
  text-decoration: none;
}

.nav-link:hover{
  color: #5495ff
}

.btn {
  background-color: #2176FF;
  border-radius: 2px;
  color: #ffffff;
  font-family: 'Raleway',sans-serif;
  font-size: 16px;
  font-weight: 400;
  padding: 14px;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover {
  background-color: #fff;
  color: #2176FF;
  transition: color .1s ease-in, background-color .1s ease-in;
}
 
.btn:active {
  font-size: 18px;
  transition: font-size .1s ease-in-out;
}

.activity {
  border: 1px solid #2176FF;
  cursor: pointer;
  text-decoration: none;
}
.activity:hover {
  background-color: #fff;
  color: #5495ff;
  transition: color .9s , background-color .9s ;
}
 
.activity:active {
  font-size: 40px;
  transition: font-size .1s;
}

HTML

2022-07-08T00:00:00+00:00

Introduction to HTML

Review Congratulations on completing the first lesson of HTML! You are well on your way to becoming a skilled web developer.

Let’s review what you’ve learned so far:

HTML stands for HyperText Markup Language and is used to create the structure and content of a webpage.
Most HTML elements contain opening and closing tags with raw text or other HTML tags between them.
HTML elements can be nested inside other elements. The enclosed element is the child of the enclosing parent element.
Any visible content should be placed within the opening and closing <body> tags.
Headings and sub-headings, <h1> to <h6> tags, are used to provide titles for sections of content.
<p>, <span> and <div> tags specify text or blocks.
The <em> and <strong> tags are used to emphasize text.
Line breaks are created with the <br> tag.
Ordered lists <ol> are numbered and unordered lists <ul> are bulleted.
Images <img> and videos <video> can be added by linking to an existing source.

Here are a few more resources to add to your toolkit:

Codecademy Docs: HTML

Codecademy Workspaces: HTML

HTML Cheatsheet

##Example

 <body>
 <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least    Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
     <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
   <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
   </ol>
   <h3>Countries with Small Brown Bear Populations</h3>
   <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
    <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="A Brown Bear"/>
    <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" width="320" height="240" controls>
  Video not supported
   </video>
  </div>
</body>

The Brown Bear

About Brown Bears

The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently Least Concern.

There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.

Species

Arctos
Collarus
Horribilis
Nelsoni (extinct)

Features

Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.

Habitat

Countries with Large Brown Bear Populations

Russia
United States
Canada

Countries with Small Brown Bear Populations

Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.

Media

Video not supported

HTML part2

2022-07-08T00:00:00+00:00

Introduction to HTML Part2

HTML Tags

You now know all of the basic elements and set-up you need to structure an HTML page and add different types of content. With the help of CSS, very soon you’ll be creating beautiful websites!

While some tags have a very specific purpose, such as image and video tags, most tags are used to describe the content that they surround, which helps us modify and style our content later. There are seemingly infinite numbers of tags to use (many more than we’ve taught). Knowing when to use each one is based on how you want to describe the content of your HTML. Descriptive, well-chosen tags are one key to high-quality web development. A full list of available HTML tags can be found in Mozilla documentation.

Let’s review what you’ve learned this lesson:

The <!DOCTYPE html> declaration should always be the first line of code in your HTML files. This lets the browser know what version of HTML to expect.
The <html> element will contain all of your HTML code.
Information about the web page, like the title, belongs within the <head> of the page.
You can add a title to your web page by using the <title> element, inside of the head.
A webpage’s title appears in a browser’s tab.
Anchor tags <a> are used to link to internal pages, external pages or content on the same page.
You can create sections on a webpage and jump to them using <a> tags and adding ids to the elements you wish to jump to.
Whitespace between HTML elements helps make code easier to read while not changing how elements appear in the browser.
Indentation also helps make code easier to read. It makes parent-child relationships visible.
Comments are written in HTML using the following syntax: <!– comment –>.

Example:

    <!DOCTYPE html>
<html>

<head>
 <title>Brown Bears</title>
</head>

<body>
  <nav>
   <a href="./index.html">Brown Bear</a>
    <a href="./aboutme.html">About Me</a>
 </nav>
 <h1>The Brown Bear</h1>
 <nav>
   <ul>
      <li><a href="#introduction">Introduction</a></li>
      <li><a href="#habitat">Habitat</a></li>
      <li><a href="#media">Media</a></li>
    </ul>
  </nav>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <p>The brown bear (<em>Ursus arctos</em>) is native to parts of northern Eurasia and North America. Its conservation status is currently <strong>Least Concern</strong>.<br /><br /> There are many subspecies within the brown bear species, including the
  Atlas bear and the Himalayan brown bear.</p>
    <a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">Learn More</a>
    <h3>Species</h3>
    <ul>
      <li>Arctos</li>
      <li>Collarus</li>
      <li>Horribilis</li>
      <li>Nelsoni (extinct)</li>
    </ul>
    <h3>Features</h3>
    <p>Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <ol>
      <li>Russia</li>
      <li>United States</li>
      <li>Canada</li>
    </ol>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.</p>
  </div>
  <div id="media">
   <h2>Media</h2>
    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" />
    <video src="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" height="240" width="320" controls>Video not supported</video>
  </div>
</body>

</html>

Example 2:

<!DOCTYPE html>
<html>
 <head>
   <title>Everyday with Isa</title>
  </head>
  <body>
    <a href="#contacnt"><img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/profile.jpg" />
   <h3>by Isabelle Rodriguez | 1 day ago</h3>
   <h1>An Insider’s Guide to NYFW</h1>
   <img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/image-one.jpeg" />
    <p><a href="https://en.wikipedia.org/wiki/New_York_Fashion_Week" target="_blank">NYFW</a> can be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to give you an insider’s guide and make your first show a pleasurable experience. By taking my tips and tricks, and following your gut, you’ll have an unforgettable experience!</p>
    <h2>Getting Tickets & Picking the Shows</h2>
     <img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/image-two.jpeg" />
    <p>If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or connected my first 2 years so I’m here to help you out. First, plan out which shows are most important to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the designers you want to see most. Lastly, purchase your tickets and get excited!</p>
    <h2>Dressing for the Shows</h2>
       <img src="https://content.codecademy.com/courses/learn-html/elements-and-structure/image-three.jpeg" />
    <p>Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it will show. Remember, NYFW is about expressing yourself and taking in what the designers have chosen to express through their new lines. Also it’s important to wear shoes you’ll be comfortable in all day. Obviously you want to look good, but you’ll be on your feet all day long, so be prepared.</p>
   <h4>Related Content</h4>
    <ul>
      <li>How To Style Boyfriend Jeans</li>
      <li>When Print Is Too Much</li>
      <li>The Overalls Trend</li>
      <li>Fall’s It Color: Blush</li>
    </ul>
    <div id='contacnt'>
      <p><strong>email:</strong> isa@fashionblog.com<br>
      <strong>phone:</strong> 917-555-1098<br>
      <strong>address:</strong> 371 284th St, New York, NY, 10001</p>
    </div>
  </body>
</html>