Frontend Development: JavaScript

🚀 ReDI Fall 2020 🚀

Lecture

HTML and CSS basics

& Wireframing

Protips for submitting homework

  • Read description carefully
  • Before submitting results read description one more time
  • Ask questions if task is not clear

Concept: Wireframing

Important part of the web development process.

Focus on the general concept, not the details.

Wireframing

It's not meant to be pretty, but to help you visualize your idea.

Wireframing

Also called a "paper protoype". It's not a contract, it is the first step in the process of web design

And remember to update your wireframes as you go!

Wireframing

How to start?

Online resources:

  • Figma
  • Moqups
  • Lucidchart
  • Photoshop
  • ... even Paint!
  • Use any app you are already familiar with

Best tool: Pen & paper :)

Concept: Pair Programming

It works!

Basic HTML Demo

Let's create the smallest possible website

Create a file called index.html and use this code


                <!DOCTYPE html>
                <html>
                    <head>
                        <meta charset="utf-8">
                        <title>My first page</title>
                    </head>
                    <body>
                        <h1>Hello World!</h1>
                    </body>
                </html>
Let's add a couple more things

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

Working with CSS

There are at 3 main ways to specify the "style" your website should use:

  1. "Inline styling" as shown above.
  2. Set the style in the <head> element.
  3. Import your CSS file.

As always, both have pros and cons. Ask your teachers or friends about their preferred way :)

Setting style on the <head> tag

Important concepts:

  1. Element Ids: Cannot be more than 1 element with the same ID
  2. Class names: Many elements can have the same class name
Example

              <!DOCTYPE html>
              <html>
                <head>
                  <meta charset="utf-8" />
                  <title>My first page</title>
                  <style>
                    #green-paragraph {
                      color: green;
                    }
                    .pink-paragraph {
                      color: pink;
                    }
                  </style>
                </head>
                <body>
                  <h1>Hello World!</h1>
                  <p>Welcome to Redi demo. This is normal text.</p>
                  <p style="color: red">This is normal text, but "red" color.</p>
                  <p id="green-paragraph">
                    This green color style is set by and ID in the style header.
                  </p>
                  <p class="pink-paragraph">
                    This pink color style is set by a class name on the style header.
                  </p>
                </body>
              </html>

Live demo...

Practice pair programming

Homework

Complete the following courses of FCC:

From the Responsive Web Design Certification section:

  • Basic HTML and HTML5
  • Basic CSS
  • Applied Visual Design (Optional)

If you get stuck, use slack or stackoverflow (remember those SO points! 😁)

Homework

From the JavaScript Algorithms and Data Structures Certification section:

  • Basic Javascript
    (*only* until the "Shopping List" exercise)

If you finish early feel free to ask us on slack for more challenges