Skip to content
This repository has been archived by the owner on Feb 22, 2022. It is now read-only.

Latest commit

 

History

History
463 lines (328 loc) · 10.9 KB

01-html-basics.md

File metadata and controls

463 lines (328 loc) · 10.9 KB
Raw

class: frontpage

Front-End Web Development

01 Orientation and introduction to HTML

Learning Objectives

In this lesson, you will:

  • Get set up with everything we need for the course.
  • Create HTML documents using common element tags.
  • Inspect web pages using the browser’s developer tools.
  • Describe the relationship between HTML, CSS, and JavaScript in websites.

Meet the Team - Abigail Coe

  • Software Engineer at Red Badger
  • Former Antiques Conservator
  • General Assembly 2016
  • World’s second best crochet artist
  • Humble
  • English Lit graduate
  • Oolong nerd
  • Not as much of a dork as that all sounds

Meet the Team - Alex Wheldon

  • Automation Engineer at Splash
  • Used to work in account management at advertising production agencies
  • GA Alumni 2020
  • Unashamedly love Lego
  • Crossing all fingers that I can finally go see live music again this year

Meet the Team - Declan Slevin

  • Test Lead at Red Badger
  • Currently transitioning to become a Junior Software Engineer
  • Fun fact: Pedro and I joined Red Badger a week apart and worked together on the RB internal site as our first project
  • Completed the FEWD course at General Assembly in 2019
  • Studied digital film-making, animation and visual effects at university
  • Unabashed emo-kid/metalhead and video/board game nerd

Meet the Team - Pedro Martin

Tell us a highlight from a random year

  • Go to the random year generator
  • Enter your year of birth
  • Tell us your name?
  • Tell us a highlight from your life that happened that year
  • Where are you in the world?
  • One thing you’re hoping to get out of this course?
  • Your favourite ice cream flavour?
  • Popcorn 🍿

The Student Experience

  • Open and friendly learning environment
  • Supportive, collaborative
  • Friendly yet challenging
  • Learn by doing - and making mistakes!
  • Be curious - ask lots of questions
  • Remember: no question is a stupid question

Our Promise

  • We’ll focus on practical skills
  • We’ll teach you how to continue learning

Learn by Doing

  • Throughout the course we'll be creating lots of small projects to learn the various languages and techniques.

  • The goal is to work towards creating a final project of your choosing and presenting it to the class on the final session

Process First, Syntax Second

  • This course is very practical but aims to teach you a process so you can replicate the material in your own projects.

  • You don't need to remember everything we cover in detail. You just need to remember the gist of it so you look things up online and in the notes.

Course Outline

  1. Intro to HTML
  2. Intro to CSS
  3. Box Model
  4. CSS Selectors, Specificity & Floats
  5. Flexbox
  6. Positioning
  7. Responsive Web development
  8. Responsive Web development lab 🧪
  9. Intro to JavaScript
  10. Document Object Model
  11. Conditional statements
  12. Arrays and loops
  13. CSS animations
  14. JavaScript plugins
  15. Forms
  16. API Requests and Responses
  17. Git and Sass
  18. Accessibility and SVG
  19. UI Frameworks / Final Project Lab 🧪
  20. Final Project Presentation

Homework weeks 1-6

Project work weeks 7-10

Install Fest

Tools We’ll Use

Install Fest

Step by Step

  • Download and install Slack desktop app and sign in
  • Make sure you have access to the private Slack channel for the class
  • Download and install VS Code (for Mac or Windows)
  • Install the VS Code extensions
  • Sign up for a Google Account (if you don’t have one already)
  • Send us your Google Account email via Slack
  • Create a free account on codepen.io

How the Web Works?

Request and response cycle
  1. Browser send a HTTP request to the server
  2. Requests for dynamic resources are forwarded to server-side code (application)
  3. Application interprets the request, reads required information from the database
  4. Combines the retrieved data with HTML templates
  5. Sends back a response containing the generated HTML
  6. Browser read response and re render

Tell the difference...

Please, tell us the difference between:

Frontend vs Backend

Frontend vs. Backend

The development process can be broken into two areas:

Front-End

  • How things look to the user
  • Involves: images, content, structure
  • HTML, CSS, and JavaScript

Back-End

  • How things work
  • Involves: “business logic” and “data”
  • Ruby, PHP, C++, Java, etc.

Tell the difference...

Please, tell us the difference between:

Website vs Webpage vs Web server

The 3 Layers of the Web

3 layers of the web
  • HTML is the markup language that we use to structure and give meaning to our web content.
  • CSS is a language of style rules that we use to apply styling to our HTML content.
  • JavaScript is a scripting language that enables you to manipulate dynamically content and style.

Intro to HTML

HTML (Hypertext Markup Language) is not a programming language; it is a markup language used to tell your browser how to structure the web pages you visit.

My cat is very grumpy

<p>My cat is very grumpy</p>

Anatomy of an HTML element

Nesting elements

What is the difference?

<p>My cat is <strong>very</strong> grumpy.</p>

between

<p>My cat is <strong>very grumpy.</p></strong>

Nesting elements

Good:

<p>My cat is <strong>very</strong> grumpy.</p>

Bad:

<p>My cat is <strong>very grumpy.</p></strong>

Block versus inline elements

There are two important categories of elements in HTML which you should know about. They are block-level elements and inline elements.

Block

  • They will appear on a new line from whatever content went before it, and any content that goes after it will also appear on a new line.
  • Tend to be structural elements on the page that represent, for example, paragraphs, lists, navigation menus, footers, etc.
  • A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.
<p>Paragraph</p>
<nav>
  <ul>
    <li>list item</li>
  </ul>
</nav>

Inline

  • Are contained within block-level elements and surround only small parts of the document’s content, not entire paragraphs and groupings of content.
  • Will not cause a new line to appear in the document; they would normally appear inside a paragraph of text.
  • For example an <a> element (hyperlink) or emphasis elements such as <em> or <strong>.
<p>
  Here is a link to <a href="www.ga.co">General Assembly</a>. Here is an
  <em>emphasis</em>. and here is a <span>common wrapper</span>
</p>

Empty elements

Are self closing elements

<img
  src="https://api.peteroftheday.com/random"
  alt="A random Picture of Peter Martin"
/>
<hr />
<input type="color" id="color" />

HTML text fundamentals

Headings and Paragraphs

<p>I am a paragraph, oh yes I am.</p>
<h1>I am the title of the story.</h1>

HTML text fundamentals

Implementing structural hierarchy

<h1>Star Wars</h1>
<p>By George Lucas</p>

<h2>Episode IV: A New Hope</h2>
<p>It is a period of civil war. Rebel spaceships ...</p>

<h2>Episode V: The Empire Strike Back</h2>
<p>It is a dark time for the Rebellion...</p>
<h3>EXT. GALAXY - PLANET HOTH</h3>
<p>
  A Star Destroyer moves through space, releasing Imperial probe robots from its
  underside.
</p>

HTML text fundamentals

Why do we need semantics?

<h1>This is a top level heading</h1>
<span style="font-size: 32px; margin: 21px 0;">
  Is this a top level heading?
</span>

HTML text fundamentals

Lists

Unordered

<ul>
  <li>milk</li>
  <li>eggs</li>
  <li>bread</li>
  <li>hummus</li>
</ul>

HTML text fundamentals

Lists

Ordered

<ol>
  <li>Drive to the end of the road</li>
  <li>Turn right</li>
  <li>Go straight across the first two roundabouts</li>
  <li>Turn left at the third roundabout</li>
  <li>The school is on your right, 300 meters up the road</li>
</ol>

Code along

Press release exercise

solution

class: frontpage

Front-End Web Development

End of presentation