OPEN COURSE

MODULE 4 - Adding CSS

Cascading Style Sheets (CSS) tell the browser how to display the text and other content that you write in HTML.

Note that CSS is case-sensitive so be careful with your capitalization.

CSS has been adopted by all major browsers and allows you to control:

On its own, HTML is pretty boring. CSS is needed to give the text style in terms of the font, size, and color. The bulk of CSS is usually written in a separate file with a filename like style.css in order to help keep HTML and CSS code organized.

There are three main ways to apply CSS styling. You can apply inline styles directly to HTML elements with the style attribute.

Alternatively, you can place CSS rules within style tags in an HTML document. Finally, you can write CSS rules in an external style sheet, then reference that file in the HTML document.

I-We-You Do

What do you recognize in the .css file that relates to what is happening in the .html file?

To connect these two files, the HTML page needs to refer to the CSS file as seen in the example below when we add < link href="style.css" rel="stylesheet" type="text/css" /> to HTML

Add CSS to repl.it below:

h1 { font-family: 'Times New Roman'; font-size: 64px; color: red; }

p { font-family: Arial; font-size: 12px; color: grey; }

In this section, you'll see how adding CSS styles to the elements of your FoodPhoto Website can change it from simple text to something more.

Let's look at another example.

h1 { color: black; font-family: 'Serif'; font-size: 18px; }

The color property refers to text color. The value black sets the color of the text.

The font-family applies a specific font to the text.

The font -size applies to a specifice size of the text.

Take Home Practice

For this assignment you will be styling the Food web page.

Add < link href="style.css" rel="stylesheet" type="text/css" /> into your current HTML code in previous assignment

Add CSS Styles to the story you created in the script.css

Your style declaration should end with a ; .

Remember once you are done with your assignment, submit link of your repl.it code and your full name Submit Here

MODULE 5 - Intro to Javascript

Why Javascript

JavaScript is a high-level programming language that all modern web browsers support. It is also one of the core technologies of the web, along with HTML and CSS that you may have learned previously.

When it comes to programming, everyone has to start somewhere. In this program, you will focus first on learning JavaScript. Why? It's sometimes called the programming language of the web.

This section will cover basic JavaScript programming concepts, which range from variables, operators and comments.

Comments are lines of code that JavaScript will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.

Adding comments

There are two ways to write comments in JavaScript:

Using // will tell JavaScript to ignore the remainder of the text on the current line:

// This is an in-line comment.

You can make a multi-line comment beginning with /* and ending with */:

This is how you use a multi-line comment /* */

I-We-You do exercise

Create a // style comment that contains at least five letters.

Create a /* */ style comment that contains at least five letters.

How to declare Variables

Variable names can be made up of numbers, letters, and $ or _, but may not contain spaces or start with a number.

The assignment operator, or “=” sign, is actually very misleading for anyone that is learning to code for the first time.

You are taught about the concept of the equals sign for your entire life in math class, but in JavaScript, the concept of a variable is actually is different.

By the end of this tutorial, you will understand the “=” in variable assignment, variables and more.

Reassigning Values to Variables

The let keyword allows you to create mutable variables whose values can be changed. If you used the const keyword, it would mean that the value is immutable and unchangeable. You'd learn more of const as you advance in JS.

In JavaScript, unlike math, you can simply assign a new value to the variable. Our days variable currently stands for the 7 days in a week. But what if we wanted it to stand for the 5 weekdays? Here is the code we could use.

IMPORTANT: In JavaScript we end statements with semicolons as seen above and below. Copy and paste in Repl.it

Using the let keyword above

In line 2, we create the days variable with a value of 7.

On line 4, we re-assign the value of the variable. It is now 5.

On line 6, the days truck arrives with the value of 5.

In the GIF above, line 4 puts a new value in the truck that is later used in line 6.

Here is what happens in line 6.

The variable days is not “equal” to anything! It merely carries around the value that you assign to it.

I-We-You Do

Try it! Copy and paste the above in repl.it below:

NOTE: Variables allow you to store and track various items and values in your program.

No Take Home Assignment Here. Practice all above exercises

MODULE 6 - Variable Assignment Operators

The name of the variable is on the left side of the assignment operator, while the value is on the right side.

In the code below is an example of an assignment operator.

We declared a variable (x). Value assigned to the variable (215). Console.log(x) prints the value in the variable x. (NOTE: console.log's are expressions for your code for now)

let x = 215;

console.log(x);// prints out 215

I-We-You Do

Addition, Mathematical and Assignment operators.

COPY AND PASTE THIS INTO THE script.js BELOW:

Addition Example

let y = 5 + 7; // y = 12

console.log(y);

Test these other Examples on repl.it.

//subtraction

let x = 8 - 6; x = 2 //change the numbers

console.log(x);

//multiplication

let j = 4 * 3; j = 12

console.log("j is " + j); // we can add words together, so change the letters!

//division

let b = 10 / 5; b = 2 console.log("y + b is " + (z + b));//change letters

I-We-You Do 2

// declare two variables here

// output your two variables using console.log()

Take Home Practice

1. In the repl.it below, copy and paste the code into your repl.it. How would you print the answer and what answers do you think it will print out?

let x = "42" + 7;

let y = "42" - 7;

2.What opening and closing tags do you use to link Javascript in your HTML code to make it work? Do your research, write your your answer in the email you send. Example: My answer is - < main> < /main> tags

Once you are done with your assignment, submit link of your repl.it code and attach the document with your number 2 answers Submit Here