HTML And Front-end Architecture

Meet the C&C #LadyDevs

Amy Norris

Amy Norris


Alex Herron

Alex Herron


Lulu Coa

Lulu Coa

Curriculum Director

Gabi Dombrowski

Gabi Dombrowski

Mentor Director

Kim Watt

Kim Watt

Marketing Director

Vanessa Shultz

Vanessa Shultz

Presentation Director



Technical Materials Director

Our Host this Evening

Dimensional Innovations


Drink Served

Laura Kozak

Laura Kozak

Join us on...


Carolyn Westhoff





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!

girls drinking

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


  • Contains content you see

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

  • Boring to look at by itself

  • Our focus for today


  • 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!


  • 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

Happy Octocat

What is HTML?





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

Happy Octocat


  • Tell browser how to display content inside

  • Book-ends (most cases, you have to have a pair: opening tag and closing tag)

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:

Opening closing tag example

My cat is very grumpy.

More About Open and Close Tags

More HTML elements can be inside tags

Example from MDN:

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

My cat is very grumpy.

Grumpy cat

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>

<!DOCTYPE html>

  • Very top of the HTML document

  • Tells browser what version of HTML is being used


  • Starts the beginning of the document

  • Wrapper of <head> & <body> elements


  • 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


  • Second element inside of a <html> tag

  • Content visible to the reader

Work Time



cat typing

HTML Content Tags

Happy cat

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

  • <!-- Comment -->: 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:

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

<q cite="">
  We realize the importance of our voices only
  when we are silenced.

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!
  <h1>Watermelon Moscow Mule</h1>
  <h2>A fruity twist on a classic cocktail</h2>
     This is one of my favorites! I find it
     refreshing on a hot day. The garnish adds a
     hint of sophistication met with pure
    <h2>This drink consists of:</h2>
      <li>Lime juice</li>

Hey girl

Hey Girl

Debugging Tools

Overwhelmed cat

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 -

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

Classic way to Debug

  • Comment out code

  • Uncomment code

  • Repeat until you find the issue

Classic Way to Debug

  • Rubber ducky

Work Time



cat typing

HTML Tag Attributes

Yummy cat


  • 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-*:


  • Supported in all HTML elements

  • Uniquely identifies an element

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


  • Supported in all HTML elements

  • Used to group elements

  • Use class over id

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



  • Specific to image element

  • <img src="" alt="Arc logo" />


  • 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

Hey girl

Hey Girl


Document Object Model

Battle cat

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
DOM Model

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



cat typing


A11y love

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


  • accessibility

  • 11 letters between the "a" and "y"

  • Another common numeronym is i18n for internationalization


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


  • 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.)


  • Think how everyone can operate on your site

  • Avoid things that could trigger seizures or other reactions


  • Use predictable and consistent navigation & actionable components

  • Include useful feedback and error handling

  • Include help where needed (such as tooltips)


  • 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?

Work Time



cat typing

Introduction to Front-End Architecture

Paint cat


  • Good architecture is fundamental in building houses

  • Same applies to applications/websites

  • Different applications/websites can require different structures


  • 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

Coding & Cocktails

Keep up with us

#LadyDevs       #KCWiT