Codecademy JavaScript Functions and CSS ( a review)

Review Functions

Give yourself a pat on the back, you just navigated through functions!

In this lesson, we covered some important concepts about functions:

• A function is a reusable block of code that groups together a sequence of statements to perform a specific task.
• A function declaration :
  
• A parameter is a named variable inside a function's block which will be assigned the value of the argument passed in when the function is invoked:
• 
• To call a function in your code:
  
• ES6 introduces new ways of handling arbitrary parameters through default parameters which allow us to assign a default value to a parameter in case no argument is passed into the function.
• To return a value from a function, we use a return statement.
• To define a function using function expressions:
  
• To define a function using arrow function notation:
• Function definition can be made concise using concise arrow notation:
  

It's good to be aware of the differences between function expressions, arrow functions, and function declarations. As you program more in JavaScript, you'll see a wide variety of how these function types are used.

CSS --- Review: Layout

Great job! In this lesson, you learned how to control the positioning of elements on a web page.

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

1. The position property allows you to specify the position of an element in three different ways.
2. When set to relative, an element's position is relative to its default position on the page.
3. 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.
4. 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.
5. 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.
6. The display property allows you control how an element flows vertically and horizontally a document.
7. inline elements take up as little space as possible, and they cannot have manually-adjusted width or height.
8. block elements take up the width of their container and can have manually-adjusted heights.
9. inline-block elements can have set widthand height, but they can also appear next to each other and do not take up their entire container width.
10. The float property can move elements as far left or as far right as possible on a web page.
11. 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.

-----------------------------------------------------------------------------

CLI - A Review

MANIPULATION

Generalizations

Congratulations! You learned how to use the command line to view and manipulate the filesystem. What can we generalize so far?

• Options modify the behavior of commands:
  • ls -a lists all contents of a directory, including hidden files and directories
  • ls -l lists all contents in long format
  • ls -t orders files and directories by the time they were last modified
  • Multiple options can be used together, like ls -alt
• From the command line, you can also copy, move, and remove files and directories:
  • cp copies files
  • mv moves and renames files
  • rm removes files
  • rm -r removes directories
• Wildcards are useful for selecting groups of files and directories

CSS GRID ESSENTIALS

Review

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
• grid-gap puts blank space between rows and/or columns of the grid
• 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

ADVANCED CSS GRID

Grid Auto Rows and Grid Auto Columns

CSS Grid provides two properties to specify the size of grid tracks added implicitly: grid-auto-rows and grid-auto-columns.

grid-auto-rows specifies the height of implicitly added grid rows. grid-auto-columns specifies the width of implicitly added grid columns.

grid-auto-rows and grid-auto-columns accept the same values as their explicit counterparts, grid-template-rowsand grid-template-columns:

• pixels (px)
• percentages (%)
• fractions (fr)
• the repeat() function

<body>
  <div>Part 1</div>   
  <div>Part 2</div>
  <div>Part 3</div>
  <div>Part 4</div>
  <div>Part 5</div>
</body>

body {
  display: grid;
  grid: repeat(2, 100px) / repeat(2, 150px); 
  grid-auto-rows: 50px;
}

In the example above, there are 5 <div>s. However, in the section rule set, we only specify a 2-row, 2-column grid — four grid cells.

The fifth <div> will be added to an implicit row that will be 50 pixels tall.

If we did not specify grid-auto-rows, the rows would be auto-adjusted to the height of the content of the grid items.

These properties are declared on grid containers