VetsInTech Week 1 - Day 1

START HERE.

What are we doing?

Here are the learning objectives:

html syntax

opening and closing tag
self closing tag
attributes (relative path becomes relevant here)
parent and child tags
documentation when you get stuck

html concepts

inline vs block

Block Elements for Day 1

div
ul
ol
li
h1 - h6
p
form

inline elements for day 1

span
img
input
a
button

underlying file system concept

absolute vs relative path

Why?

Because it is used in your emails, websites are everywhere and in just about every business. It has become somewhat of a life skill to be familiar with HTML. To call yourself a web developer, a skill that you need to develop is being able to look at an mock up design and implement it with HTML, CSS, and JS code. In order to do that you need to understand the elements that make up that website.

How do you know if you are doing well? How do you know if you are on track to be a Front End Developer?

If you can answer the questions or do these tasks below (and please don't just say in your head yes. Even if you can do it, for practice actually implement these in each section)

In 1 - structure/part1.html, did you change Hello, World! to Hello, WhatEverYourNameIsHere! and see you changes in the browser?
In 2 - Tags/part2.html, can you change the image src to an image you found off of the internet?
In 2 - Tags/part2.html, can you add an a-tag to link to the part2.html file in the same directory?
In 3 - More Tags, can you change the table into a media player where song name, song artist, album name are the columns, and you made up three songs of your choice?
What do we call src and alt on img tags?
In 4 - Linking/home.html, what does the link tag do?
What is the difference between Inline and Block elements?
Why is it important to understand the difference between Inline or Block elements?

Things students forget

image tags need a width and height to show
image tags need the exact relative path to the image as the value of the src attribute
if you are using live-server you need to host the image and video files with the html file for it to show
when using a table there some default settings like verical alignment which you can change and see in chrome dev tools

Extra time

correct prework
Mac users install and use spectacle
Everyone install Live-Server and VS Code
go to the video website and download a good video to practice with for tomorrow's lesson.
look ahead to this weekend's homework assignment and start working on it.
Hot seat in the meantime

Resources

Visual Studio Code
HTML Cheatsheet
Spectacle
HTML Dog Tag List
W3Schools Tag List
Quackit HTML Tag List

Baph57/1st-Day