How To Build Kick-A** Websites
Introduction to Front-end Development
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.
How Do I Build A Website?
- Write the content in an HTML template
- Add CSS styling to make it pretty
- Host it online
- 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
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
- 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
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 #
Ways to Include CSS into HTML
- Inline (not recommended)
- <style> within the HTML file
- Import from an external stylesheet with <link rel="stylesheet">
- ES6, ECMAScript 6, ES2015
- Use event listeners to alter HTML elements
- Multi-paradigm language
- Loosely typed
JS Data Types
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
So what does this look like in a webpage?
Cool...but how can I learn more?
- Online courses