Intro to Web Development

Brought to you by Kelsey Chan and Kelsey Wong

Hands on the orange typewriter in a park — Photo by Marvin Meyer on Unsplash

Outline

Classroom expectations
HTML content
CSS styling
JavaScript interactivity

Classroom expectations

We won't give you all the answers.
This will be challenging.
Collaborate with your peers to solve problems.
Ask questions when you need help.

Outline

Classroom expectations
HTML content
CSS styling
JavaScript interactivity

HTML content

HTML is a markup language that defines the structure of a web page.

<p>Some text here.</p>

<a href="https://www.google.com">Link to
          Google</a>

HTML content

                <div>
                  <p>Some text here.</p>
                  <p>Some <b>bold</b> text below.</p>
                </div>

HTML can be nested

                <!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8"/>
                    <meta name="viewport" content="width=device-width">
                    <title>Add your title here!</title>
                  </head>
                  <body>
                    <p>Here is some <b>bold</b> text.</p>
                  </body>
                </html>

                <!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8"/>
                    <meta name="viewport" content="width=device-width">
                    <title>Add your title here!</title>
                  </head>
                  <body>
                    <p>Here is some <b>bold</b> text.</p>
                  </body>
                </html>

                <!DOCTYPE html>
                <html>
                  <head>
                    <meta charset="utf-8"/>
                    <meta name="viewport" content="width=device-width">
                    <title>Add your title here!</title>
                  </head>
                  <body>
                    <p>Here is some <b>bold</b> text.</p>
                  </body>
                </html>

Outline

Classroom expectations
HTML content
CSS styling
JavaScript interactivity

CSS styling

CSS is a language that defines the styles on a web page.
It can be used to specify the colors, fonts, and layouts for a web page.

A CSS rule

        h1 {
          font-size: 32px;
          color: blue;
        }

h1 is the selector

font-size and color are properties

32px and blue are values

CSS selectors

        <p>Reviews of Harry Potter and the Sorcerer's Stone</p>
        <p>Kelsey's review...</p>
        <p>Anna's review...</p>
        <p>Emily's review...</p>

CSS selectors

        <p>Reviews of Harry Potter and the Sorcerer's Stone</p>
        <p>Kelsey's review...</p>
        <p>Anna's review...</p>
        <p>Emily's review...</p>

Tag

p { ... }

CSS selectors

        <p>Reviews of Harry Potter and the Sorcerer's Stone</p>
        <p class="review">Kelsey's review...</p>
        <p class="review">Anna's review...</p>
        <p class="review">Emily's review...</p>

Class

.review { ... }

CSS selectors

        <p>Reviews of Harry Potter and the Sorcerer's Stone</p>
        <p class="review" id="my-review">...</p>
        <p class="review">...</p>
        <p class="review">...</p>

ID

#my-review { ... }

Go through the HTML and CSS sections at your own pace!

coda.io/@kelsey/intro-to-web-development

Remember you can ask your peers and mentors for help 😎

Outline

Classroom expectations
HTML content
CSS styling
JavaScript interactivity

JavaScript interactivity

JavaScript is a language that we can use to make our web page interactive.
It can be used to specify responses to button clicks, dynamic styling, or animations on a web page.

Loading our scripts

The following HTML element tells the browser to apply the code in script.js to the HTML file:

        <script src="script.js"></script>

Accessing the HTML elements

In our script, we can use the document variable to refer to our HTML document. The document has many helpful functions, like:

        document.getElementById("my-id");
        document.getElementsByTagName("body");
        document.querySelectorAll("div.some_class")

Adding event listeners

To make our web page interactive, we can add event listeners. This allows us to run certain code whenever an event (e.g. a button click) occurs.

        let myButton = document.getElementById("my-button");
        myButton.addEventListener("click", function() {
          alert("Surprise!");
        });

Feel free to continue the HTML and CSS sections or start on the JavaScript portion

coda.io/@kelsey/intro-to-web-development

Remember you can ask your peers and mentors for help 😎