Frontend Development: JavaScript

🚀 ReDI Fall 2020 🚀

Lecture

Connect together

What we will do today

HTML/CSS/JS let's connect
Demo: button and counter
Exercises

Connect together

Last lesson we've seen 3 ways to specify "style"

"Inline styling".
Set the style in the <head> element.
Import your CSS file.

Import CSS file


              <!DOCTYPE html>
              <html>
                  <head>
                      <meta charset="utf-8">
                      <title>My first page</title>
                      <link rel="stylesheet" href="stylesheet.css" type="text/css">
                  </head>
                  <body>
                      <h1>Hello World!</h1>
                      <p>Welcome to Redi demo. This is normal text.</p>
                      <p>This is normal text, but "red" color.</p>
                  </body>
              </html>

Let's see it in action!

We're not limited to only css imports!

We can import JS files but in slightly different way.

JS import


              <!DOCTYPE html>
              <html>
                  <head>
                      <meta charset="utf-8">
                      <title>My first page</title>
                      <link rel="stylesheet" href="stylesheet.css" type="text/css">
                      <script src="script.js" defer></script>
                  </head>
                  <body>
                      <h1>Hello World!</h1>
                      <p>Welcome to Redi demo. This is normal text.</p>
                      <p>This is normal text, but "red" color.</p>
                  </body>
              </html>

Let's see it in action!

Let's go one step further...

Now we will mix all together and see what we can do with it.

Life coding time!

Practice time!

How are you?

Feel brave? :)

Please do the following:

Crate a layout with Good and Awsome buttons
Apply styles to them (include css file to your htmls file)
Try to define some logic which will happen on click for those buttons
Print some text on the screen upon click

More exercises

TBD