GithubHelp home page GithubHelp logo

01_html_basics's Introduction

Lesson 01 - Introduction + HTML Basics

In our first lesson, we will introduce ourselves to one another and you will learn the art of good HTML markup.

Agenda

  • Introduction to GA and Instructional Team
  • Tools and Resources for FEWD
  • HTML Structure and the Document Object Model
  • HTML tags
  • Semantic HTML

Objectives

By the end of this class, you will:

  • Know other classmates and instructor by name
  • Reviewed class syllabus that outlines lessons, expectations and assignments
  • Understand basic tools required for the course (Slack, Sublime, Chrome)
  • Have a high level understanding of what the DOM is
  • Understand regular and void HTML tags, Head / Body of HTML document
  • Have a good understanding of basic HTML content tags
  • BONUS: Semantic HTML best practices and when to use various HTML tags

Materials


HTML Tags & CSS Selectors Review

HTML Basics

HTML vs HTML5

HTML5 is HTML with a few additions The Doctype tells you if the page is HTML5 ready.

<!DOCTYPE html>

HTML HISTORY

HTML History

Note: image retrieved from http://www.onbile.com/info/wp-content/uploads/2013/09/Timeline-of-web-technologies-639x168.jpg on October 1, 2013.

HTML Syntax

HTML Syntax

HTML Syntax

HTML Syntax

Content Tags

Heading Elements

<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . .</h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Content Tags

Text Elements

<p>This is a paragraph</p>
<code>This is some computer code</code>

Content Tags

Unordered list

<ul>
</ul>

Content Tags

Unordered list item

  <li>First item</li>
  <li>Next item</li>

Content Tags

Ordered list with list items

<ol>
  <li>First item</li>
  <li>Next item</li>
</ol>

Content Tags

links

<a href="www.google.com">First item</a>

GeneralAssemb.ly

General Assembly Press Release

press_release

01_html_basics's People

Contributors

marcwright avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.