Welcome back to

#2 class of FED

ReDI School Munich - Spring 2021

Welcome back to

#2 class of FED

ReDI School Munich - Spring 2021

How are you?

Recap

Recap

Recap

  • ✅ Visual Studio Code
  • ✅ Git installed
  • ✅ GitHub account created
  • ✅ Our first contact with HTML
  • ✅ Homework 👀

Introduction to HTML

Introduction to HTML

What's HTML?

Introduction to HTML

What's HTML?

  • It's basically where you add content to a page
  • HTML stands for Hypertext Markup Language
  • Why knowing HTML
  • W3C standards

Introduction to HTML

Basic Structure

Introduction to HTML

Basic Structure

Introduction to HTML

Basic Structure

👉 The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in.

👉 <html> tag indicates that this web page is written in HTML.

👉 the <head> element contains title and meta data of your web document.

👉 <title> tag contains the web page title.

👉 the <body> tag contains the content and its structure of your entire web page.

👉 the <h1> represents the level of heading of your web page. (we'll dip dive on this)

👉 the <p> is simply a paragraph text that can be displayed at anywhere on your page. 🙂

Inspecting elements

Inspecting elements

Inspecting elements

Why?

Inspecting elements

Why?

  • ✅ Re-order elements
  • ✅ Manipulate elements
  • ✅ Debug 👉 stands for identifying and removing errors from code
  • ☑️ We can all do that together ❤️

Let's do that together!

Let's do that together!

Reminder: Make sure you always have the following steps settled locally before the class starts.

Let's do that together!

  • ✅ First, copy and paste the index.html file from previous homework and paste into a new folder (e.g. lesson2/index.html)
  • ✅ Open your Visual Studio Code
  • ✅ Open the folder you just created
  • ✅ In your browser, open the index.html by typing file:// in your address bar
  • ☑️ Now it's time to inspect elements all together! ❤️

Now it's time to inspect elements all together! ❤️

demo being presented

More structural tags, for you

More structural tags, for you

Let's learn a few other tags in HTML which will be important in the upcoming lessons and topics

More structural tags, for you

Let's learn a few other tags in HTML which will be important in the upcoming lessons and topics

  • <div> defines a division or a section in an HTML document.
  • <img> used to embed an image in an HTML page. (remember: img is a void element - there is no closing tag)
  • <a> defines a hyperlink, which is used to link from one page to another. (`a` as in anchor)
  • <!-- SOME COMMENT --> specifies a comment in a page (only visible for developers).

👇🏼 The ones you know already

  • <p> represents a paragraph.
  • <h1>, <h2> ... <h6> used to define HTML headings, from most to less important.

More structural tags, for you

Reminder: Some of those tags contain important attributes!

More structural tags, for you

Reminder: Some of those tags contain important attributes!

"OK, but what are attributes of a tag?" 🤔💭

More structural tags, for you

👉 Attributes are special words used inside the opening tag to control the element's behaviour.

Some of the <img> attributes
Some of the <a> attributes

Reference: HTML elements reference 🔗

It's another demo time! 🎥

Let's all focus in the demo and afterwards we'll be doing a in-class exercise.

Group exercise!

Group exercise!

Let's get into group of 4 to build the following in-class exercise together:

Group exercise! 🤘

Let's get into group of 4 to build the following website together in about 15 minutes:

  • After the rooms are broken into groups, choose a person internally to be a leader and share their screen;
  • Group Leader should ask for your favorite 3 animals within the room;
  • Create the index.html and 3 different htmls with your favorite ones (e.g. dog.html);
  • For each animal, display an image of this animal;
  • For each animal, place an anchor of this animal to wikipedia;
  • Group Leader (or someone else) present to the other students your page and the final code (3 minutes per group);

  • Reminder 1 : Me and another teacher will be helping you in case you have questions through the exercise!
  • Reminder 2 : We'll be measuring timing box and we'll let you know when it's two (2) minutes to go!

Let's fill the seats!

Let's fill the seats!

Teacher will send you the link and password through our Zoom chat.

Introduction to CSS

Introduction to CSS

What's CSS?

Quick Introduction to CSS

What's CSS?

  • CSS is the code that styles your web content
  • CSS stands for Cascading Style Sheets
  • Why knowing CSS
  • W3C standards

For now, let's use "inline" CSS

For now, let's use "inline" CSS

For now, let's use "inline" CSS

You most likely remember our tag attributes from some of the tags, don't ya?

For now, let's use "inline" CSS

Q: Still, why "inline" and what does that mean❓

A: It means we want to make sure we add styles for a few components to get an idea of how CSS works

👉 We will dive deeper into CSS in the next lesson.

It's another demo time! 🎥 yep, again...

Reference: HTML best practices 🔗

👉 We will also dive deeper into inspecting elements and their styles in the upcoming lessons.

Homework

👉 Anyone color blind? Talk to me privately and I can propose a different exercise for you!

  • First goal is to create an html site where you use the elements and styles shown in the lesson
  • Create a site where you try out for example eight of the css properties listed here
  • Feel free to add images, if you want. They are completely optional and a plus.
  • Assignment will be displayed in Google classroom soon.
  • If you don't remember how to send the homework, please check this link.

Questions❓