HTML And Front-end Architecture

Meet the C&C #LadyDevs

Amy Norris

Director

Alex Herron

Co-Director

Lulu Coa

Curriculum Director

Gabi Dombrowski

Mentor Director

Kim Watt

Marketing Director

Vanessa Shultz

Presentation Director

TBD

Technical Materials Director

Our Host this Evening

Dimensional Innovations

Drink Served

Laura Kozak

Join us on...

#generation-x

#tabletop-games

#movies

#cats_and_doggos

Our mentors

are super heroes!

Before We Get Started...

This stuff is a challenge!

Don’t be discouraged if you don’t finish each worksheet section before the next presentation section begins.

We cover a lot of difficult material that will take time to understand. We are here (and on Slack after the session) to help!

Tonight's Agenda:
HTML & Front-end Architecture

What is Web Development & Intro to HTML
HTML Content Tags
HTML Attributes & the DOM
Accessibility (A11y)
Intro to Front-End Architecture

First, we drink!

What is a Web Development?

Stages involved in building a website

What is a Website?

Collection of files understood by the browser

Website files include:

Code files: HTML, CSS, JavaScript
Extra files: images & videos

The Code Files

HTML - contains content you see
CSS - styles for the site
JavaScript - defines behavior of the website

HTML

Contains content you see

Defines the structure of the content (navigation, header, footer, lists)

Boring to look at by itself

Our focus for today

CSS

Styles for the site

Decorates HTML content by adding visual appeal

Handles layout of content

Join us for our next session to dive into CSS!

JavaScript

Defines behavior of the website

Muscles that power a website

Handles interactions, such as button clicks

Join us later this year when we cover JavaScript

HTML, CSS, and JavaScript working together

HTML Basics

What is HTML?

Hyper

Text

Markup

Language

What is HTML?

Most fundamental building block of web pages

Syntax that tells the browser how to display the page

Used for the meaning of the content, not how it is formatted

What is HTML?

Type (header, body) versus style (font, color, background)

HTML files have a .html extension

Edited with plain text editor / IDE (Integrated Development Environment)

Windows Notepad or Mac TextEditor

Where in the World Would You See HTML?

Every website has at least one index.html file

index.html: main entry to a website (like your website homepage)

We'll see an example of this in our project tonight

HTML Syntax

Open/Close Tags

The opening tag has the tag name in angle brackets (< >)

The closing tag has a forward slash (/) before the tag name (</ >)

Open/Closed Tags

Example from MDN:

My cat is very grumpy.

More About Open and Close Tags

More HTML elements can be inside tags

Example from MDN:

<div>
                  <p>
                      My cat is very <em>very</em> grumpy.
                    </p>
                </div>

My cat is very grumpy.

Self-closing Tags

<img src="/images/ryan-gosling.gif" height="460px" />

Do NOT need a closing tag

Unable to add more HTML inside of tags

Required HTML Tags

Every HTML page requires 4 tags in this order:

<!DOCTYPE html>
              <html>
                  <head>...</head>
                  <body>...</body>
              </html>

`<!DOCTYPE html>`

Very top of the HTML document

Tells browser what version of HTML is being used

`<html>`

Starts the beginning of the document

Wrapper of <head> & <body> elements

`<head>`

First element inside of a <html> tag

Content invisible to the reader

Gives the browser important information about how to interpret the HTML on the page

Other valid tags inside of <head>:

<title> Text that displays in browser tab

<meta charset="utf-8">
Character encoding that can be explicitly set/UTF-8

Metadata for search engines and more

<link> Linked files

Linked File Tag Examples

<link rel="stylesheet" href="/css/style.css"></link>

Add CSS linked files

<script src="/javascript-file.js"></script>

Add JavaScript linked files

`<body>`

Second element inside of a <html> tag

Content visible to the reader

Work Time

Worksheet: https://bit.ly/cc-worksheets

Slides: https://bit.ly/cc-html-slides

HTML Content Tags

HTML Content Tags

Live inside the <body> to give your content structure and meaning

HTML Content Tags

Examples include:

Headings, Paragraphs, Ordered/Unordered Lists

Hyperlinks, Images, Videos, Audio

Tables, Figures

Interactive elements such as Buttons, Inputs, Selects

HTML Content Tag Examples

Navigation, Footer, Address, Quotations, Articles, and Sections

Divider or Span: containers that group content

: notes or reminders

Semantic HTML

Way of organizing content

Use tags that best convey content meaning

Semantic HTML

For example, you can quote Malala Yousafzai using a <span> or semantically correct <q> tag:


            <span>

              We realize the importance of our voices only 
  when we are silenced.
            
</span>


            
              <q cite="https://www.goodreads.com/book/malala">

                We realize the importance of our voices only 
  when we are silenced.

              </q>

We realize the importance of our voices only when we are silenced.

We realize the importance of our voices only when we are silenced.

Semantics Improve:

Search engines and discoverability (SEO)

Accessibility and creating inclusive websites

Keeps code organized

HTML Standards & Best Practices

Case sensitivity

Indent nested tags

Every tag should have a close tag that coordinates with an open tag (with the exception of self-closing tags)

HTML Standards & Best Practices

Use line breaks in code for readability
(don't try to mash code together)

Be semantic!


            <div>
              <h1>Watermelon Moscow Mule</h1>
              <h2>A fruity twist on a classic cocktail</h2>
              <p>
                
              This is one of my favorites! I find it 
    
              refreshing on a hot day. The garnish adds a 
    
              hint of sophistication met with pure 
    
              enlightenment.
            
              </p>
              <div>

                  <h2>This drink consists of:</h2>
                  <ul>

                
                        <li>Watermelon</li>

                        <li>Vodka</li>

                        <li>Lime juice</li>

                
                    </ul>

              
                </div>

            
            </div>

Hey girl

Debugging Tools

Debugging Tools

We are human

Humans make mistakes

Tools help troubleshoot unexpected outcomes

Dev Tools in Browser

Inspect elements on any webpage

Ways you can inspect elements:

Right click & inspect
Windows: CTRL + SHIFT + I
Mac: CMD + OPT + I
F12 and open tab for Elements

Validating Your Code

W3C HTML Validator - https://validator.w3.org/

Scans HTML for mistakes
via direct URL, file upload, or direct input (copy/paste)

Look It Up

Even those of us in development jobs don't know everything...

...we do know how to utilize resources to find out what we need to know to solve a specific issue

Resources to Look It Up

Google

W3 Schools

Stack Overflow

Peers: ask co-workers or KCWiT on Slack!

Classic way to Debug

Comment out code

Uncomment code

Repeat until you find the issue

Classic Way to Debug

Rubber ducky

Work Time

Worksheet: https://bit.ly/cc-worksheets

Slides: https://bit.ly/cc-html-slides

HTML Tag Attributes

Attributes

Values added to HTML elements

Change or adjust the element's behavior

Set inside the opening tag (including self-closing tags)

attributeName="value here"

Standard attributes

Supported in all HTML elements

Only applied to specific elements

Custom attributes used for unique needs

Important Attributes

id

class

href

src

data-*:

id

Supported in all HTML elements

Uniquely identifies an element

<p id="#hot-toddy"></p>

class

Supported in all HTML elements

Used to group elements

Use class over id

<p class="hot-toddy"></p>

href

Specific to hyperlink element

Provides URL of link

<a href="https://arc.net/">Click here to learn about Arc</a>

Click here to learn about Arc

src

Specific to image element


              <img src="https://arc.net/images/logo.png" alt="Arc logo" />

data-*

Custom attributes specific to a website's needs


            <div data-menuItem="3">Hot Toddy</div>

Helpful attribute list:

MDN Attributes

Helpful Tip About Paths

Used for links and files

Provides location to image, file, page, or website

Can be absolute or relative

Relative Paths

Used for images, files, and links to other pages on the current website domain

Relative to the current page

index.html /about/stars.html

Absolute Paths

Used for images, files, and links to other pages on a different website domain

Always includes the domain

http://heygirl.io/ https://awkwardfamilyphotos.com/coach/

Hey girl

DOM

Document Object Model

Document Object Model

Web document as data representation

Browser parses the HTML you write and turns it into the DOM

Visual representation of the DOM will match the HTML code you wrote

Reasons DOM differs from code:

Mistakes in your HTML

Browser will attempt to fix mistakes

JavaScript

Can manipulate the DOM (add, change, or remove content, etc.)

Work Time

Worksheet: https://bit.ly/cc-worksheets

Slides: https://bit.ly/cc-html-slides

A11y

What Is It?

A11y is a numeronym (type of abbreviation) for accessibility

Numeronym: takes the first and last letters of a word & replaces the letters inside with a number representing the letters replaced

Numeronym

accessibility

11 letters between the "a" and "y"

Another common numeronym is i18n for internationalization

Accessibility

Making things more usable by members of the disabled community

Why Be Accessible?

A better experience for ALL your users

Legal obligations (such as ADA) depending on your website

Expands your audience

What is POUR?

Mnemonic for the four principles to increase accessibility

Perceivable
Operable
Understandable
Robust

Perceivable

Provide text alternatives for any non-text content

Pay attention to things like contrast (especially in text)

Provide alternative ways to interact with things like video
(captions, video descriptions, sign language, etc.)

Operable

Think how everyone can operate on your site

Avoid things that could trigger seizures or other reactions

Understandable

Use predictable and consistent navigation & actionable components

Include useful feedback and error handling

Include help where needed (such as tooltips)

Robust

Maximize compatibility with current assistive technology

How Can We Be More Accessible?

Follow HTML standards and use semantic HTML

Include information like "alt" text on images

Use ARIA attributes where needed

Add keyboard navigation

Use descriptive URLs for screen readers

How Can We Be More Accessible?

Use sufficient color contrast

Add label to form fields

Avoid tiny fonts

Avoid flashing content

How Can We Be More Accessible?

Provide visible indication of focus ( :hover with mouse and :focus without mouse)

Add captions or transcripts for audio/videos

How Can We Be More Accessible?

Check your website with an accessibility checker:

https://www.accessibilitychecker.org/

Lighthouse Chrome Tool

Work Time

Worksheet: https://bit.ly/cc-worksheets

Slides: https://bit.ly/cc-html-slides

Introduction to Front-End Architecture

Introduction

Good architecture is fundamental in building houses

Same applies to applications/websites

Different applications/websites can require different structures

Introduction

We'll cover basics that can be reused for most of your projects

Of course you can customize as your project requires

What is Front-End Architecture?

Simple definition: Where files & assets go (how they're organized)

Why Is It Important?

"Easy" to write code. Hard to write maintainable code.

This increases as:

New features are added

Size of your team scales

Architecture May Vary

Individual/team preferences

Project requirements (mobile and/or desktop?)

Frameworks used

What Does This Look Like?

Mostly conceptual

Architecture May Include:

Naming conventions

File organization

Asset organization

Architecture Examples

Directory namings such as imgs vs images

Organizing by section of site or type of asset, such as app/about/css vs app/css/about

How We Applied Front-End Architecture Tonight

We organized image assets

We'll continue to practice Front-End Architecture concepts

What's Next

Find a friend
Take the quiz
Join Slack
Finish tonight's worksheet
Find an online tutorial on Front End Architecture
Register for next month's event

Keep up with us

codingandcocktails.kcwomenintech.org

#LadyDevs #KCWiT

#CodingAndCocktailsKC

HTML And Front-end Architecture

Meet the C&C #LadyDevs

Our Host this Evening

Drink Served

Laura Kozak

Join us on...

Our mentors

are super heroes!

Before We Get Started...

This stuff is a challenge!

Tonight's Agenda: HTML & Front-end Architecture

First, we drink!

What is a Web Development?

What is a Website?

Website files include:

The Code Files

HTML

CSS

JavaScript

HTML Basics

What is HTML?

What is HTML?

What is HTML?

Where in the World Would You See HTML?

HTML Syntax

Tags

Open/Close Tags

Open/Closed Tags

More About Open and Close Tags

Self-closing Tags

Required HTML Tags

<!DOCTYPE html>

<html>

<head>

Linked File Tag Examples

<body>

Work Time

HTML Content Tags

HTML Content Tags

HTML Content Tags

HTML Content Tag Examples

Semantic HTML

Semantic HTML

Semantics Improve:

HTML Standards & Best Practices

HTML Standards & Best Practices

Debugging Tools

Debugging Tools

Dev Tools in Browser

Validating Your Code

Look It Up

Resources to Look It Up

Classic way to Debug

Classic Way to Debug

Work Time

HTML Tag Attributes

Attributes

Standard attributes

Important Attributes

id

class

href

src

data-*

Helpful attribute list:

Helpful Tip About Paths

Relative Paths

Absolute Paths

DOM

Document Object Model

Document Object Model

Reasons DOM differs from code:

Work Time

A11y

What Is It?

Numeronym

Accessibility

Why Be Accessible?

What is POUR?

Perceivable

Tonight's Agenda:
HTML & Front-end Architecture

`<!DOCTYPE html>`

`<html>`

`<head>`

`<body>`