完整的前端 Web 开发课程
The Complete Front-End Web Development Course
- 01 - Welcome to the Course!
- 001 Introduction to the course
- 002 Atom setup
- 02 - Web Development Basics - HTML
- 001 HTML document structure
- 002 HTML elements - div and span
- 003 HTML elements - i, b, p, and a
- 004 HTML elements - ul, li, and ol
- 005 HTML elements - header and footer
- 006 HTML elements - section, main, and article
- 007 HTML elements - h1-h6 and aside
- 008 HTML tables
- 009 Project #1 - HTML text site
- 03 - Advanced HTML Concepts
- 001 Images
- 002 Forms
- 003 Inputs
- 004 Checkboxes
- 005 Radio buttons
- 006 Select, option, and buttons
- 007 HTML5 videos
- 008 HTML5 audio
- 009 Doctypes
- 010 Meta tags
- 04 - Introduction to Cascading Style Sheets (CSS)
- 001 Targeting color and background
- 002 Element specificity
- 003 ID targeting, margin, and border
- 004 Padding, margin, and float
- 005 Max-width and background-image
- 006 Switching over to an IDE
- 007 Font weight, style, and family
- 008 Text decorations
- 009 Text spacing
- 010 Text decoration modification
- 011 Text shadow
- 05 - Advanced CSS
- 001 Pseudo-states
- 002 Border radius
- 003 Positions
- 004 Pseudo-elements
- 005 Z-index
- 006 Viewpoint width and height, overflowing content
- 007 Transition property
- 06 - JavaScript for Beginners
- 001 Intro to JavaScript
- 002 Alerts and console logging
- 003 Integers, strings, and variables
- 004 Undefined variables and modifying values of variables
- 005 Boolean operators
- 006 Comparing values
- 007 If statements
- 008 For loops
- 009 Defining functions
- 010 Event handling
- 011 Setting an elements innerHTML
- 07 - More JavaScript Concepts
- 001 Arrays pt.1
- 002 Arrays pt.2
- 003 Arrays pt.3
- 004 Textareas and getting the value of inputs
- 005 Functions - parameters and return values
- 006 Multiple parameters in functions
- 007 Flexible function parameters
- 008 Exercise - find the missing number
- 009 Exercise solution
- 010 Classes explained
- 011 Class constructor, instance variables, and static variables
- 012 Extending classes
- 08 - Getting Started with jQuery
- 001 jQuery setup
- 002 Targeting elements
- 003 Event handling
- 004 Dropdown menus
- 005 Making our dropdown disappear
- 006 Multiple targets, events, and attr method
- 007 Prepend, append, and html
- 008 preventDefault
- 009 event.which and switch properties
- 010 Custom context menu, pageY, and pageX
- 011 is method
- 09 - More jQuery
- 001 Writing our own version of jQuery
- 002 Find method
- 003 First and last
- 004 Focusin and focusout
- 005 Contains, is, and hasClass
- 006 Each method
- 007 Callbacks
- 008 CSS
- 10 - Bootstrap Basics
- 001 Bootstrap setup
- 002 Navbar pt.1
- 003 Navbar pt.2
- 004 Forms pt.1
- 005 Forms pt.2
- 006 Buttons
- 11 - Project #2 - Pipboy from Fallout 4
- 001 Setup
- 002 Navbar
- 003 Main page
- 004 Pipboy image and footer
- 005 Colors
- 006 Font and styling main nav
- 007 Scanlines
- 008 Navigation styling
- 009 Tabs
- 010 Progress bars
- 011 Stat bars
- 012 Footer fixes
- 013 Damage and resistance
- 014 Icons
- 015 Inventory template
- 016 Item list
- 017 Weapon stat container
- 018 Finishing touches with JavaScript
- 12 - Project #3 - Google Chrome Extension
- 001 Problem solving
- 002 Manifest files
- 003 Basic setup
- 004 Getting video URLs
- 005 Injecting JavaScript
- 006 Getting pretty objects for each URL
- 007 Creating download options list
- 008 Communicating between the page and extension
- 009 Chrome downloads API and background scripts
- 010 Receiving messages and downloading files
- 011 Styling our extension and publishing
- 13 - Final Thoughts
- 001 Tips for getting started as a professional web developer
- 14 - BONUS - Coding Another Google Chrome Extension
- 001 Introduction and manifest
- 002 Content scripts
- 003 Messaging different parts of the extension
- 004 Creating share popup
- 005 Icons
- 006 Building an image downloader
- 007 Interacting with the DOM
- 008 Uploading to the Google Chrome Web Store