DEV Community: CadenCGS

React.js, React Hooks, and Redux

CadenCGS — Mon, 01 Feb 2021 02:23:22 +0000

React.js

React.js is one of the most important things to know as a Full-Stack Developer. React provides an innovative way to integrate JavaScript into your web pages. React was initially developed by Facebook as an open-end UI to help developers make better static web pages. it has not transformed into one of the most useful skills a programmer can have today.

React Hooks

React Hooks is on of the newest features in React 16.8, and it changes everything. They let you use state and other backwards-compatible React features without writing a class. One of the most common uses of hooks in React is importing data from APIs. By pinging a link, react can download data from anywhere in the web, and integrate it into your website. Many popular applications today have usable API's such as Spotify, Twitter, YouTube, Amazon, and even Rick and Morty!

Redux

Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it's mostly used as a state management tool with React, you can use it with any other JavaScript framework or library. It maintains the state of an entire application in a single immutable state tree (object), which can't be changed directly.

My React App

In my class we created a react app to learn about using react and hooks grab and utilize API's from the internet. We used the Rick and Morty API. One certain link returns a .json file that contains a list of numerous Rick and Morty characters. Our job as students was to import this API and use integrated CSS to style it how we please.

I used this method to import the API. By using Axios, a node package we installed, we can grab the API from the internet, and download the .json data file that is returned. By using our .then (res =>) we send the newly acquired data to render and be displayed on our page.

In this next picture above I used integrated CSS to design each object that is imported our our API's .json file. Our parts named c.image, c.name, c.status, and c.location are all properties imported per character object.

I wanted to add a bit extra and ad a colored circle next to the status of each character with the corresponding meanings:

Green - Alive
Red - Dead
Orange - Unknown

Although it is a small feature, I believe it adds a lot more to the overall feel and functionality of the website.

This was the final result of my website :)

Sources

My Class Teacher: Matthew Larrubia
React Crash Course: https://daveceddia.com/react-getting-started-tutorial/

NPM Packages

CadenCGS — Sun, 17 Jan 2021 14:12:06 +0000

Introduction

NPM Packages are a set of addons per say that can be added on to your JavaScript files. The serve the purpose of being able to manage, change, and execute different packages and files within your code. Beyond this NPM packages can work with source control to give you a better and more organized flow in your Git Repository. NPM Packages are most commonly used through the command line , whether its an OS CMD or an in-editor CMD.

Here are 3 NPM Packages I a going to recommend and show you today:

npm-gui
detect-installed
test-all-versions

Package 1: npm-gui

npm-gui is a useful tool for programmers that may be starting out with NPM Packages. This addon grants the user a graphical user interface, or gui, to manage and execute packages. For those who may struggle with the command line, this graphical interface creates an ease in the use of multiple packages in both management and organization.

The gui portion of this package can be accessed through a localhost address in your default browser. This can be activated through a command line prompt of ~/$ npm-gui localhost:9000. Once this is command is pushed through you just run that address into your browser and you're ready to go.

Package 2: detect-installed

detect-installed is another useful tool for programmers. This package checks multiple aspects of a newly installed package, such as whether it was installed globally locally, as well as it's path. This global or local checks will indicate to the programmer where that package can be accessed from, and the path check indicated how they can access it.

You can install detect-install by running $ npm install detect-installed --save through the console, and then in your package.json file you input this line: const detectInstalled = require('detect-installed').

Package 3: test-all-versions

test-all-versions is the final useful tool I will be talking about. This addons runs your code against all current versions of a given dependency. The usefulness in this is that maybe a dependency or package that you are using works with an earlier or later version of another dependency. This package looks for these incompatibility issues and lets the user become aware, so that they can be fixed.

The package is put into use by $ tav [options] [<module> <semver> <command> [args...]]. Once all these inputs are filled, the command will be ran. This is an example: tav mysql ^2.0.0 node test.js.

Sources

My Class Teacher: Matthew Larrubia
NPM General Information: https://en.wikipedia.org/wiki/Npm_(software)
npm-gui: https://www.npmjs.com/package/npm-gui
detect-installed: https://www.npmjs.com/package/detect-installed
text-all-versions: https://www.npmjs.com/package/test-all-versions

Git, GitHub, and Open Source Projects

CadenCGS — Sat, 09 Jan 2021 18:05:00 +0000

Introduction

Git and GitHub are used world wide by almost any developer known to man. It is an extremely useful tool that lets developers work on the same file from different locations uploading and transferring the progress each time a developer finishes.

Git vs. GitHub

While both services appear to have the same function, there is a distinct different between the two. Git is open source, and installed on the local machine. Conversely, GitHub is not open source, and is an online service, utilized through a web browser

Git Commands and Interaction with GitHub

-clone: clone is used to clone, or duplicate, an already existing repository into your editor or files

-push: This can be used to push or send your updated but not uploaded files to the GitHub repository

-pull: Conversely from push, pull can rip or take files from the uploaded repository down into you files for editing

-add: Adds a file to you local machine to later be uploaded to the repository

-commit: Uploads the pushed files to the GitHub repository

-branch: Displays all branches within the current repository

-checkout: Changes the current branch that is being worked on to a different branch to work on

GitHub Change Tracking

GitHub also helps developers interact but showing change logs and other useful information within the files. It has useful features such as showing other users what was deleted, added, and comments that are made by the developer who made said changes.

GitHub Branches

Branches are one of the best ways to utilize workflow in GitHub. The main branch, called master, is what is always seen as the actual working and functioning product. Branches can be utilized in order to work on files in the master branches without breaking the rest of a project. They are most commonly used when developers are looking into fixing bugs or creating/testing a new feature that is being added.

Contributing to open Source

Open source is meant to be treated as a coding playground of sorts. It is a place where you can have fun, experiment, and try new things, without worry of judgment or fear of being wrong. Open source projects are places for people to use to become better then they already are, expanding their limits and becoming a better coder. While most of not all open Source project have instructions, this is to keep challenging you to be the best coder you can be, and to also avoid committing something that breaks the project.

When starting an Open Source project, you use a GitHub project called Fork. Forking clones the entire repository and makes a copy that you own and can edit.

Sources

Information: Udemy "The Complete Web Developer 2021: Zero To Mastery" course by Andrei Neagoie
My Class Teacher: Matthew Larrubia

Command Line

CadenCGS — Sat, 09 Jan 2021 00:41:13 +0000

Introduction

Command Line is one of best ways to directly interact with information on you computer. Command line is accessed through the command prompt, or cmd on windows and terminal on mac, and is a way to directly send text to your computer.

What Can You Do With Command Line?

Command line can be used more a multitude from things! In fact, anything you can do on your GUI, or Graphical User Interface, can be done in Command Line, such as create and editing the name of a folder. Comma line can also be used for more complicated things such as accessing a server in another country that your website per say is hosting off of.

Command Line Commands

ls: Lists all of the folders in your current directory
pwd: Displays the current directory
cd {Location}: Switches the pwd to the {Location} as long as it is your current pwd
cd ..: Sets the pwd back one folder, essentially reversing cd {Location}
clear or cls:: Clears the terminal
cd ~: Sets the pwd to the user directory
cd {Location}/{Location}: Sets the pwd two levels deeper but nomenclature must match
open .: Opens the current pwd folder
mkdir {Name}: Makes a folder in the current pwd with the name of {Name}
touch {File Name}.{File Extension}: Creates a file with name {File Name} and a file type of {File Extension}
open -a "{File Name}":: Opens the file or shortcut with the exact name in the quotations
mv {Current File Name}.{File Extension} {New File Name}.{File Extension}: Renames the current file to the new name listed
rm {File Name}.{File Extension}: Removes the specified file
say {text}: The Command Line equivalent of console.log

Introduction

In conclusion, Command Line is the most efficient way to communicate directly with you computer to preform different tasks and actions, although it may seem inefficient at times. Command Line lets you do almost anything, ever deeper than you could imagine, and even deeper than this list I've provided goes.

Sources

Information: Udemy "The Complete Web Developer 2021: Zero To Mastery" course by Andrei Neagoie
My Class Teacher: Matthew Larrubia

DOM Manipulation

CadenCGS — Sun, 13 Dec 2020 00:33:26 +0000

Introduction

DOM Manipulation takes HTML and JavaScript to the next level, by adding another level of depth to the interaction between the two languages. DOM Manipulation stands for Document Object Model, and it lets JavaScript edit the HTML page real time, without the user having to change any of the source code. It can commonly be seen in places like online carts, monetary values like stock market stock values, and so much more!

DOM Selectors

To be able to grab and change different parts of the document, DOM has a series of we call "Selectors". The selectors can be seen and used as follows:

Selectors

getElementsByTagName: This selects all elements giving they have the inputted tag such as h1 or p.
getElementsByClassName: This selects all elements giving they have the inputted class which can be anything as long as its predefined by the developer.
getElementById:This selects all elements giving they have the inputted ID which can be anything as long as its predefined by the developer.
querySelector: This gets the first element found by using the criteria from any of the 3 selectors above.
querySelectorAll: This gets all elements found by using the criteria from any of the 3 selectors above the previous term.
getAttribute: This can be used to replace the first 3 selectors, and it used with the syntax name.getAtrribute("type");
setAttribute: This is partnered with the getAttribute() selector and usually takes the element received by the getAttribute() and sets it to another value.

Style Changers

style.{property}: This is partnered with a selector and it changed a specific style or styles of the received element.
classList.add: This adds a class to the selected element.
classList.remove: This removes a class to the selected element.
classList.toggle: This toggles a class to the selected element.

Value Changers

innerHTML: This edits the HTML text inside of an element or its inner tags such as p or span.

Relation Selectors

parentElement: This gets the parent of a selected element.
children: This gets the children of a selected element.

Event Listeners

Another cool thing that can be done with DOM Manipulation. Event Listeners perform action based on the movement of a mouse or other actions. Simple things like mouseEntry,mouseExit`, 'Click', and 'mouseHover' can initiate the beginning of many many actions. A good amount of actions can be see in this list.

Examples

The code above was used in a recent project I am working on fro my class. For those who might just be starting out to DOM Manipulation let's break it down.

The goal of this function was to update the subtotals for each item in a cart we were making. Using product, a class each item is under, we are going to take different elements and edit them per item.

In the variable "price" that we create, we use query selector to find the first element with a class of price on it, seen as the .price within the parenthesis. We are editing the text of a span that reveals our price, so within the parenthesis we are saying we want to edit the span of the first tag that has a class of price on it. Using .innerText is the method we use to edit this text.

In the variable "quanitity", you may see a few differences, but for the most part it is laid out the same as the price variable. instead of span we use input, and this is because we are using an input field rather than just text inside of a span. As well as the change in parenthesis, we are using .value on the end of our variable definition because we want the value of the input that the user has input, since there is no actual text we cannot use .innertext.

In the variable "taxable", you many differences compared to the previous two variables. This because it is an in-line boolean definition instead of a physical element we can see. this is why we use the .dataset before the .tax. We are checking the value of this in-line code rather than pre-defined, text.

the if statement under the variable definitions is much simpler to understand than our variable definitions. After the function has checked whether an item is taxable using our .dataset.tax, it adds thew appropriate amount of tax to each item that is taxable, which in my home state is 7%.

Below the if statement we see the true simpler use of the .innerText method. We can create direct definitions of the defined text. In this example we are taking the price and quantity of the specific product and updating the subtotal for specifically that product, rather than all of them. The reason that a Number() function is used. Price is defined, however it is initially defined as a string, or a series of characters forming text. By running a string through a Number() function we remove all text from a string and return a numerical value, which in our case would give us the numerical value of our price. Although the input value can be received as a number, i ran the Number() function as a precaution, so that our math is guaranteed to come out as a numerical value instead of a NaN, which is short for Not a Number.

Conclusion

In conclusion, we have learned that DOM Manipulation as an innovate and easy way to add more interaction to your web page between your HTML and JavaScript. Users can interact with the web page without even seeing or touching the source code, through a series of autonomously ran regular and relation selectors, style changers, and event listeners. We also went through an example of DOM Manipulation, and analyzed both why and how each bit of code works.

Sources

Events: https://developer.mozilla.org/en-US/docs/Web/Events
Information: Udemy "The Complete Web Developer 2021: Zero To Mastery" course by Andrei Neagoie
My Class Teacher: Matthew Larrubia

JavaScript

CadenCGS — Sat, 21 Nov 2020 21:51:37 +0000

Introduction

JavaScript is a less-than-complex language that lets you implement innovative features onto your webpages. Any time you see dynamic webpages, or anything interactive on a webpage, there is a very high possibility that there is JavaScript behind it. JavaScript can work to make 2D/3D designs, clocks, jukeboxes, and so much more!

JavaScript Elements

JavaScript Types

Number

A Number is the most straightforward type of JavaScript that can be written, it is simply just numbers that can be types into the code.

let x = 23;
console.log(x);
//Output = 23

String

A String is JavaScript is seen as alphabetical characters such as "John Doe" or "The Dog". It can be seen as text, but it must between a set of quotation marks or apostraphes.

let x = "Tulips";
console.log(x);
//Output = Tulips

Boolean

A Boolean is a type of JavaScript Value that yields as only true and false. For example "Dog" == "Cat", this returns as False.

let x = 37;
let y = 42;
let z = Boolean(x == y);
console.log(z);
//Output = "False"

Object

An Object in JavaScript is a variable that contains multiple elements, such as weight, name, color, and other descriptive modifers.

let mrGreen = {
        firstName: "Jacob",
        lastName: "Green",
        occupation: "Entrepreneur",
        age: 45,
        description: "He has a lot of connections",
        color: "green"
    };

Array

An Array in JavaScript is a variable That acts like a list, and can contain a series of other elements such as strings, objects, or other JavaScript compnents.

let list = ["Apple", "Orange", "Banana"];
console.log(list[2])
//Output = "Banana"

JavaScript Comparisons

Comparisons are typically used with Boolean operators, to modify what the Boolean function does.

Not Equal To (!==)

Not Equal To is one of the two simplest statements in all of Boolean operations. It is also straightforward in meaning, meaning something is not equal to another thing.

let x = Boolean(4 !== 3);
console.log(x);
//Output = True

Equal To (===)

Equal To is the other one of the two simplest statements in all of Boolean operations. It is also straightforward in meaning, meaning something is equal to another thing.

let x = Boolean(23 == 23);
console.log(x);
//Output = True

Greater Than or Equal To (>=)

Greater Than or Equal To is a Boolean operator that judges not only whether one number is equal to another, but also whether it is greater than it. It is also straightforward in meaning, meaning something is greater than or equal to another thing.

let x = Boolean(37 >= 23);
let y = Boolean(23 >= 23);
let z = Boolean(18 >= 23);
console.log(x + ", " + y + ", " + z);
//Output = True, True, False

Less Than or Equal To (<=)

Less Than or Equal To is a Boolean operator that judges not only whether one number is equal to another, but also whether it is less than it. It is also straightforward in meaning, meaning something is less than or equal to another thing.

let x = Boolean(37 <= 23);
let y = Boolean(23 <= 23);
let z = Boolean(18 <= 23);
console.log(x + ", " + y + ", " + z);
//Output = False, True, True

Greater Than (>)

Greater Than is a Boolean operator that judges only whether one number greater than another.

let x = Boolean(37 > 23);
let y = Boolean(23 > 23);
let z = Boolean(18 > 23);
console.log(x + ", " + y + ", " + z);
//Output = True, False, False

Less Than (<)

Less Than is a Boolean operator that judges only whether one number less than another.

let x = Boolean(37 < 23);
let y = Boolean(23 < 23);
let z = Boolean(18 < 23);
console.log(x + ", " + y + ", " + z);
//Output = False, False, True

JavaScript Conditionals

Conditionals are typically used to execute a certain code based on a certain case of actions.

If (if (){ })

The If operator executes code simply of the conditions between the brackets is met.

let x = "dog";
if (x == "dog"){
   console.log("X is equal to dog");
}
//Output = "X is equal to dog"

Else If(else if (){ })

The Else If operator executes code only if the conditions are met within the statement's brackets, but are not met within any previous statement's brackets.

let x = "cat";
if (x == "dog"){
   console.log("X is equal to dog");
}

else if (x == "cat"{
   console.log("X is equal to cat");
}
//Output = "X is equal to cat"

Else (else (){ })

The Else operator executes code only if no other if or else if statements are met.

let x = "parrot";
if (x == "dog"){
   console.log("X is equal to dog");
}

else if (x == "cat"){
   console.log("X is equal to cat");
}

else (){
   console.log("X is neither a dog nor a cat");
}
//Output = "X is neither a dog nor a cat"

_JavaScript Loops

Loops are blocks of code that are run over and over either infinitely or until a condition is met.

For (for (statement 1, statement 2, statement 3){ })

For works as a loop until at least two conditions are met. Statement one usually servers as an initial identifier, and it only run once, statement 2 is usually the statement that tells the loop to stop based on the updated value, statement 3 usually the statement that keeps being run until statement 2 is satisfied.

for (i = 0, i < 3, i++){
   console.log(i)
}
//Output = "1"
//Output = "2"
//Output = "3"

While (while (){ })

While is simple to understand, as long as the statement within the brackets are true, the statement will keep repeating.

while (1 == 1){
   console.log("Looping...")
}
//Output = "Looping..."
//Output = "Looping..."
//Output = "Looping..."
//This will continue infinitely

Full-Stack Web Developer Scavenger Hunt

CadenCGS — Wed, 04 Nov 2020 15:16:11 +0000

Introduction

Web Development is everywhere. Every website of this new and advancing age is built on lines and lines of code, including this website that you're sitting here reading from this very moment. Some of you may even be Web Developers yourselves. What does it take to have a career in Full-Stack Web Development?

Skills

Basic Web Development Skills

Basic Web Development skills ensure you have a solid grasp on the layout and creation of web pages. By having basic web development skills, you can create a solid base to any website.

Some of the skills had by Basic Web Developers are:

Putting a Website Online

Putting a website online is the most basic way to get your work out to the public. Once you know how to get your website out there everyone will be able to see and use your website, and from then on you can improve your skill more and more.

Terminal Usage

Knowing how to use the terminal in Web Development makes worlds of a difference. By using the terminal you can speak directly with the computer to execute commands, and help yourself be a more efficient developer.

Git/Github

By using Git/Github, you have the ease of access in saving, downloading, opening, and editing your code from anywhere. You will be able to access your code anywhere not just from your home computer. Not only this, but Git/Github tracks and logs your changes, or commits as they are called, so you can see what was changed or return to an earlier version later in time.

RESTful Web Services

RESTful Web Services are essential in the path top becoming a Web Developer. RESTful Web Services ensure that you content is available and compatible throughout all different sorts of devices from computer screen to phones.

Front End Development Skills

Front End Development Skills help developers be able to make not only neat looking websites but ones that are user friendly. By having a clean, neat and user friendly website, people will not only enjoy your website but will most likely come back to use it again.

Front End Developers tend to have the most skills or the most divisions of skills between the three categories. Between Designing, Front End Engineering, and JavaScript, Front End Development can seem the most tedious.

The skills usually required for Designing are:

Adobe Photoshop, Adobe Sketch, and Adobe Illustrator

By using programs such as Adobe Photoshop, Sketch, and Illustrator, you can edit any images you may already and make images fit more cleanly and nicely into your website. You can also create any images you may need for your website.

Bootstrap

Bootstrap helps developers not only import interactive components to their website, but components that are adaptable between all different types of platforms. These different platforms include monitors, computer screens, iPads, and mobile devices. Bootstrap is one of the most important steps in achieving RESTful Web Services.

Responsive Designs with CSS

By creating a website with a responsive CSS layout, you can create a website that works well with people, and one that is easy to use. Having a responsive CSS layout is one of the most important steps to having a User Friendly website.

The skills usually required for Front End Engineering are:

HTML5

HTML5 is the base of all websites, it is the basic structure that make sup every website. You can think of it as the rebar that the concrete goes over in a building. What's hold that concrete in play is that rebar that is set in place before the concrete is poured.

CSS3

CSS is the touch-up on the HTML to every website. Referring to the example given in the last point, the CSS pf a website would be referred to the concrete that covers the rebar. The concrete can be shaped in any way just as CSS is very customizable and can make a website look almost any way the developer pleases.

The skills usually required for JavaScript are:

Vue.js

Vue.js is an open-source .js tool that specializes in the ease of creating user friendly websites, and single page applications. It is commonly used because of its easy learnability and lightweight usage.

React.js

React.js is an open-source tool that specializes in the ease of creating user friendly UI components. React.js is a front end tool, sine it focuses of what is seen rather than unseen function. React.js is mainly used in single page applications and mobile website development.

Angular.js

Angular.js is a tool used by many big tech companies such as Google. It works similar to bootstrap in that it lets you import components to minimize the amount of code used on each web page, helping it run more efficiently.

JQuery

JQuery specializes in creates an ease of DOM Manipulation. This open-source tool helps web pages become adaptable between devices. By doing this, it can be compared to bootstrap. however, JQuery adapts already present elements, while bootstrap imports the entirety of an adaptable element.

Back End Development Skills

Back End Developers Skills tie the basic web development skills and the front end development skill together is to one perfect website. Back End Developers focus of the functionality of the website. You could have a the best looking website on the internet but if it doesn't work what's the point. The Skills of a Back End Web Developer can be split into two sections: Back End Engineering and Databases.

The skills usually required for Back End Engineering Include:

Node.js

Node.js is an open-source back end development tool that lets you execute code outside of the actual files of the web page. It is most commonly used to work with API's and such on web pages. It is also commonly seen through the use of bots, such as automated bots on an application called Discord

Express.js

Express.js is similar to Node.js in that it works to create API's and integrative web pages. It is known as the "de facto standard framework" for Node.js.

The skills usually required for Databases Include:

MongoDB

MongoDB is classified as a nonSQL database, meaning it has the ability to both store and retrieve data from a database. MongoDB functions off of JSON-like douments.

PostgreSQL

PostgreSQL is a tool that is most commonly used to manage databases and its data. However, because it is SQL based, it is not able to store and retrieve data, only manage it inside the database.

Jobs

Front End Web Developer
Back End Web Developer
Network Security Administrator
Software Engineer
Wireless Network Engineer
Full-Stack Web Developer
Mobile Web Developer

These are some examples of very popular jobs in the web development career field. Web Development is a very desired job at the time, and because so little people actually know how to code, those who can tend to have ease in getting started in this field.

Work Types

Entrepreneurship
Startups
Freelance
Big Tech Companies
Ad Agencies
Remote Work

CSS Grid

CadenCGS — Thu, 22 Oct 2020 19:26:55 +0000

Introduction

CSS grid is a useful tool to help you and your team create more organized and good-looking web pages. It can be used in a variety things from listing and showing organized content to creating the layout of a page. Here is a prime example:

Planning

When starting out on a web page planning is the most important thing. There are many programs that will let you plan out a web page, one of those is called Figma. Figma uses a variety of tools to help you design and plan out web pages both solo and in a group with ease. Here is an example of a Figma layout for a costume purchasing website:

There are many different parts of a Figma that can be seen in this image. One of the most important things to note is the arrows leading from one page to another. These shows the anchor <a> tags leading from one page to another.

We are also able to connect our Terms and Vocabulary section to the planning phase to help us understand the different parts of CSS Grid. The Entirety of the costume area can be identified as a Grid. The spaces between the different costumes is known as the Grid Gap.

Each set of costumes can be organized into rows and columns. The set of costumes grouped left to right can be identified as Columns, and in this case is set with a a code grid-template-columns: 1fr 1fr;.

Here we can see another reference to our vocab sheet with the use if the units fr, meaning fractions, so our grid is evenly divided between two fractions.

By looking at the Figma we also see we have three Rows, which can be identified as the set of costumes which can be grouped up and down. In the Figma our rows can be setup with the code grid-template-rows: 1fr 1fr 1fr;.

This should have us set up at a perfectly spaced grid displaying 6 Cells, or costumes.

Building Stage

When starting on the actual coding of the project, we wanted the cover picture of the website to blend well with the page. We used a simplistic color scheme and blended an orange and black picture of jack-o-lanterns to a black body, making a smooth transition between the cover and the body.

We decided to make our landing/home page a link to three other pages, so that the website in its entirety is more organized.

Home Page

Here you can see a picture of our website, The Costume Emporium's, home page. More specifically you can see the grid we used to layout the three buttons that take you to the different pages where you can buy costumes.

When making our grid for the buttons, this is the code that we used. We start off by using display: grid; to enable us to be able to use CSS Grid within this div. Some of you might be wondering why we used fr for the grid-template-columns but not grid-template-rows, this is because we haven't specified the height of our grid div yet, but we don't want it to last the full page. Therefore we only sized our row to 200px, because it gives us that nice rectangular shape.

As for the rest of the code segment, between grid-gap, padding and height, we just use this to refine and contain the shapes of the cells.

Throughout that last block of CSS, we specified all of the sizing and dimensions for our cells, but we haven't actually made anything inside of these grid cells yet until now.

To start off you can see that we use height: 100% and width: 100%. If you're wondering why, this is because by specifying both width and height tot be 100%, we are not sizing it so bee 100% of the page. we are sizing it to be 100% of the grid cell. This creates ease in the future, in case you ever need to adjust grid cell size, you can adjust all three at once by editing the grid rather than each individual cell.

The remaining code of the block serves to organize the text touch of the text inside of the cell.

this picture shows the code for the cells within the index.html. The <a> tags is what makes each div act as a link/button to the separate pages.

Costume Buying Pages

When we began programming the costume purchasing pages, we wanted to keep the same theme as the homepage, including the navbar and cover image. The content was the main thing being changed.

--Currently Editing Here--

Review

Terms and Vocabulary

Columns: Columns are the groups of cells within a grid that run along the horizontal axis

Rows: Rows are the groups of cells within a grid that run along the vertical axis

Grid: A framework of spaces sections called cells made up of intersecting rows and columns

Grid Cells: A singular box made from the intersection of a row and a column

Grid Gaps: The spaces between each cell in the grid

Grid Area: The section of a grid taken up by content that covers more than one cell

Code Syntax

display: grid: This enables you to be able to use grid within the CSS you modify this with

grid-template-columns: This lets you assign the specific sizes and amounts of columns in your grid

grid-template-row: This lets you assign the specific sizes and amounts of rows in your grid

grid-gap: This lets you assign the size of the gap between the cells in your grid

grid-area: This lets you be able to span one bit on content across multiple cells at a time

grid-column-start: You can use this CSS modification to assign the start of content in a column on your CSS grid

grid-column-end: You can use this CSS modification to assign the end of content in a column on your CSS grid

grid-row-start: You can use this CSS modification to assign the start of content in a row on your CSS grid

grid-row-end: You can use this CSS modification to assign the end of content in a row on your CSS grid

fr: A unit used in CSS Grid identified as fraction, for spilling your page into even fraction when making the columns and rows of your grid