How To Build Kick-A** Websites

Introduction to Front-end Development

Hello

let emma = new Person();

  • Software Engineer @ LogMeIn 💻
  • Prior Front-end Developer @ IBM 📍 Austin, TX
  • Cat Mom 😸
  • Book Enthusiast 🤓

What is Front-end Development?

Front-end development is the practice of developing the face of the web page that users interact with.

Front-end vs back-end
Front-end vs back-end vs design
Human as webpage
Front-end jobs
Front-end skills
Front-end timeline

How Do I Build A Website?

  1. Write the content in an HTML template
  2. Add CSS styling to make it pretty
  3. Add JavaScript to trigger actions
  4. Host it online
html

<!DOCTYPE html>

  • HTML stands for Hypertext Markup Language
  • Uses a series of tags to define page structure
  • DOM, or Document-Object Model, represents the page as a series of nodes so programs can change the structure
  • The head tag contains meta-data about the program
  • The body tag contains the visible page content

You should always use semantic HTML5 elements (not div & span) to lay out your content.

Anatomy of an HTML element

  • Opening tag is the name of the element (in this case, p), wrapped in opening and closing angle brackets
  • Closing tag is the same as the opening tag, except that it includes a forward slash before the element name
  • Content is the content of the element
  • Element is the opening tag, the closing tag, and the content
  • Attribute contain extra information about the element that you don't want to appear in the actual content
html example

Anatomy of an HTML page

  • <!DOCTYPE html> tells the browser what document type the file is
  • <html> wraps all the content on the entire page, and is sometimes known as the root element
  • <head> acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers
  • <body> contains all the content that you want to show to web users when they visit your page
  • <title> sets the title of your page, which is the title that appears in the browser tab
html

{css}

  • CSS stands for Cascading Style Sheets
  • Used to describe how elements should be rendered on the screen
  • Use with HTML elements by adding classes and ids to the element

Anatomy of CSS

  • Selector are patterns used to select the element you want to style
  • Attribute is the property of the selector you want to change
  • Value is the value you want your attribute to have
css example

Classes & ID

  • Classes and IDs are used to select specific HTML elements
  • Classes can be used on multiple HTML elements to define a "type" or class of element, and are used in css with a .
  • IDs can only be used on one HTML element to define a unique item for styling, and are used in css with a #
css example
css example
css example

Ways to Include CSS into HTML

  • Inline (not recommended)
  • <style> within the HTML file
  • Import from an external stylesheet with <link rel="stylesheet">
css imports
css imports
css imports
js

.js()

  • JavaScript is used to add behavior to web pages
  • ES6, ECMAScript 6, ES2015
  • Use event listeners to alter HTML elements
  • Multi-paradigm language
  • Loosely typed

JS Data Types

  • Boolean
  • Null
  • Undefined
  • Number
  • String
  • Object
  • Symbol
js

Const, let var

  • const means the identifier cannot be re-assigned & declares local block-scope
  • let means the variable can be re-assigned & declares local block-scope
  • var declares a variable
js

So what does this look like in a webpage?

Let's check out an example

Cool...but how can I learn more?

Online Courses

  • Online courses
  • Blogs
  • Books
  • APIs

@emmabostian

emma.bostian@logmein.com