完整的 2023 年 Web 开发训练营
- 1 - FrontEnd Web Development
- 1 - What Youll Get in This Course
- 5 - How Does the Internet Actually Work
- 6 - How Do Websites Actually Work
- 7 - How to Get the Most Out of the Course
- 8 - How to Get Help When Youre Stuck
- 2 - Introduction to HTML
- 11 - What is HTML
- 12 - How to Download the Course Resources
- 13 - HTML Heading Elements
- 14 - HTML Paragraph Elements
- 15 - Self Closing Tags
- 16 - Project Movie Ranking
- 17 - How to Ace this Course
- 3 - Intermediate HTML
- 18 - The List Element
- 19 - Nesting and Indentation
- 20 - Anchor Elements
- 21 - Image Elements
- 22 - Project Birthday Invite
- 23 - Tip from Angela Habit Building with the Calendar Trick
- 4 - MultiPage Websites
- 25 - Computer File Paths
- 26 - What are Webpages
- 27 - The HTML Boilerplate
- 28 - Project Portfolio Website
- 29 - How to Host Your Website for Free with GitHub
- 30 - Introduction to Capstone Projects
- 5 - Introduction to CSS
- 32 - Why do we need CSS
- 33 - How to add CSS
- 34 - CSS Selectors
- 35 - Project Colour Vocab Website
- 36 - Tip from Angela Dealing with Distractions
- 6 - CSS Properties
- 38 - CSS Colours
- 39 - Font Properties
- 40 - Inspecting CSS
- 41 - The CSS Box Model Margin Padding and Border
- 42 - Project Motivational Poster Website
- 7 - Intermediate CSS
- 43 - The Cascade Specificity and Inheritance
- 44 - Combining CSS Selectors
- 45 - CSS Positioning
- 46 - Project CSS Flag
- 47 - Tip from Angela Nothing Easy is Worth Doing
- 8 - Advanced CSS
- 48 - CSS Display
- 49 - CSS Float
- 50 - How to Create Responsive Websites
- 51 - Media Queries
- 52 - Project Web Design Agency Website
- 53 - Tip from Angela How to Deal with Procrastination
- 9 - Flexbox
- 54 - Display Flex
- 55 - Flex Direction
- 56 - Flex Layout
- 57 - Flex Sizing
- 58 - Project Pricing Table
- 59 - Tip from Angela Building a Programming Habit
- 10 - Grid
- 60 - Display Grid
- 61 - Grid Sizing
- 62 - Grid Placement
- 63 - Project Mondrian Painting
- 11 - Bootstrap
- 64 - What is Bootstrap
- 65 - Bootstrap Layout
- 66 - Bootstrap Components
- 67 - Project TinDog Startup Website
- 12 - Web Design School Create a Website that People Love
- 68 - Introduction to Web Design
- 69 - Understanding Colour Theory
- 70 - Understanding Typography and How to Choose a Font
- 71 - Manage ATTENTION with effective User Interface UI Design
- 72 - User Experience UX Design
- 73 - Web Design in Practice Lets apply what weve learnt
- 14 - Introduction to Javascript ES6
- 76 - Introduction to Javascript
- 77 - Javascript Alerts Adding Behaviour to Websites
- 78 - Data Types
- 79 - Javascript Variables
- 80 - Javascript Variables Exercise Start
- 81 - Javascript Variables Exercise Solution
- 82 - Naming and Naming Conventions for Javascript Variables
- 83 - String Concatenation
- 84 - String Lengths and Retrieving the Number of Characters
- 85 - Slicing and Extracting Parts of a String
- 86 - Challenge Changing Casing in Text
- 87 - Challenge Changing String Casing Solution
- 88 - Basic Arithmetic and the Modulo Operator in Javascript
- 89 - Increment and Decrement Expressions
- 90 - Functions Part 1 Creating and Calling Functions
- 91 - Functions Part 1 Challenge The Karel Robot
- 94 - Functions Part 2 Parameters and Arguments
- 95 - Life in Weeks Solution
- 96 - Functions Part 3 Outputs Return Values
- 97 - Challenge Create a BMI Calculator
- 98 - Challenge BMI Calculator Solution
- 99 - Tip from Angela Set Your Expectations
- 15 - Intermediate Javascript
- 100 - Random Number Generation in Javascript Building a Love Calculator
- 101 - Control Statements Using IfElse Conditionals Logic
- 102 - Comparators and Equality
- 103 - Combining Comparators
- 104 - Introducing the Leap Year Code Challenge
- 105 - Leap Year Solution
- 106 - Collections Working with Javascript Arrays
- 107 - Adding Elements and Intermediate Array Techniques
- 108 - Whos Buying Lunch Solution
- 109 - Control Statements While Loops
- 111 - Control Statements For Loops
- 112 - Introducing the Fibonacci Code Challenge
- 113 - Fibonacci Solution
- 114 - Tip from Angela Retrieval is How You Learn
- 16 - The Document Object Model DOM
- 115 - Adding Javascript to Websites
- 116 - Introduction to the Document Object Model DOM
- 118 - Selecting HTML Elements with Javascript
- 119 - Manipulating and Changing Styles of HTML Elements with Javascript
- 120 - The Separation of Concerns Structure vs Style vs Behaviour
- 121 - Text Manipulation and the Text Content Property
- 122 - Manipulating HTML Element Attributes
- 123 - Tip from Angela The 20 Minute Method
- 17 - Boss Level Challenge 1 The Dicee Game
- 124 - Challenge The Dicee Challenge
- 132 - The Solution to the Dicee Challenge
- 134 - Tip from Angela Learning Before you Eat
- 18 - Advanced Javascript and DOM Manipulation
- 135 - What Well Make Drum Kit
- 137 - Adding Event Listeners to a Button
- 138 - Higher Order Functions and Passing Functions as Arguments
- 140 - How to Play Sounds on a Website
- 141 - A Deeper Understanding of Javascript Objects
- 142 - How to Use Switch Statements in Javascript
- 143 - Objects their Methods and the Dot Notation
- 145 - Using Keyboard Event Listeners to Check for Key Presses
- 146 - Understanding Callbacks and How to Respond to Events
- 147 - Adding Animation to Websites
- 149 - Tip from Angela Dealing with Lack of Progress
- 19 - jQuery
- 150 - What is jQuery
- 151 - How to Incorporate jQuery into Websites
- 152 - How Minification Works to Reduce File Size
- 153 - Selecting Elements with jQuery
- 154 - Manipulating Styles with jQuery
- 155 - Manipulating Text with jQuery
- 156 - Manipulating Attributes with jQuery
- 157 - Adding Event Listeners with jQuery
- 158 - Adding and Removing Elements with jQuery
- 159 - Website Animations with jQuery
- 160 - Tip from Angela Mixing Knowledge
- 20 - Boss Level Challenge 2 The Simon Game
- 161 - What Youll Make The Simon Game
- 185 - Tip from Angela Dealing with Frustration
- 21 - The Unix Command Line
- 186 - Install Git Bash on Windows
- 187 - Understanding the Command Line Long Live the Command Line
- 188 - Command Line Techniques and Directory Navigation
- 189 - Creating Opening and Removing Files through the Command Line
- 190 - Tip from Angela Sleep is My Secret Weapon
- 22 - Backend Web Development
- 191 - Backend Web Development Explained
- 23 - Nodejs
- 192 - What is Nodejs
- 195 - The Power of the Command Line and How to Use Node
- 196 - The Node REPL Read Evaluation Print Loops
- 197 - How to Use the Native Node Modules
- 198 - The NPM Package Manager and Installing External Node Modules
- 199 - Tip from Angela Step Up to the Challenge
- 24 - Expressjs with Nodejs
- 200 - What is Express
- 201 - Creating Our First Server with Express
- 202 - Handling Requests and Responses the GET Request
- 204 - Understanding and Working with Routes
- 205 - What Well Make A Calculator
- 207 - Calculator Setup Challenge Solution
- 208 - Responding to Requests with HTML Files
- 209 - Processing Post Requests with Body Parser
- 211 - Solution to the BMI Routing Challenge
- 212 - Tip from Angela How to Solidify Your Knowledge
- 25 - APIs Application Programming Interfaces
- 213 - Why Do We Need APIs
- 214 - API Endpoints Paths and Parameters
- 215 - API Authentication and Postman
- 216 - What is JSON
- 217 - Making GET Requests with the Node HTTPS Module
- 218 - How to Parse JSON
- 219 - Using Express to Render a Website with Live API Data
- 220 - Using Body Parser to Parse POST Requests to the Server
- 221 - The Mailchimp API What Youll Make
- 222 - Setting Up the Sign Up Page
- 223 - Posting Data to Mailchimps Servers via their API
- 224 - Adding Success and Failure Pages
- 225 - Deploying Your Server with Heroku
- 226 - Tip from Angela Location Location Location
- 26 - Git Github and Version Control
- 227 - Introduction to Version Control and Git
- 228 - Version Control Using Git and the Command Line
- 229 - GitHub and Remote Repositories
- 231 - Gitignore
- 232 - Cloning
- 233 - Branching and Merging
- 235 - Forking and Pull Requests
- 236 - Tip from Angela Spaced Repetition
- 27 - EJS
- 237 - What Well Make A ToDoList
- 239 - Templates Why Do We Need Templates
- 240 - Creating Your First EJS Templates
- 241 - Running Code Inside the EJS Template
- 242 - Passing Data from Your Webpage to Your Server
- 243 - The Concept of Scope in the Context of Javascript
- 244 - Adding PreMade CSS Stylesheets to Your Website
- 245 - Understanding Templating vs Layouts
- 246 - Understanding Node Module Exports How to Pass Functions and Data between Files
- 247 - Tip from Angela Use Accountability in your Favour
- 28 - Boss Level Challenge 3 Blog Website
- 248 - A New Challenge Format and What Well Make A Blog
- 249 - Setting Up the Blog Project
- 250 - Challenge 1
- 251 - Challenge 1 Solution
- 252 - Challenge 2
- 253 - Challenge 2 Solution
- 254 - Challenge 3
- 255 - Challenge 3 Solution
- 256 - Challenge 4
- 257 - Challenge 4 Solution
- 258 - Challenge 5
- 259 - Challenge 5 Solution
- 260 - Challenge 6
- 261 - Challenge 6 Solution
- 262 - Challenge 7
- 263 - Challenge 7 Solution
- 264 - Challenge 8
- 265 - Challenge 8 Solution
- 266 - Challenge 9
- 267 - Challenge 9 Solution
- 268 - Challenge 10
- 269 - Challenge 10 Solution
- 270 - Challenge 11
- 271 - Challenge 11 Solution
- 272 - Challenge 12
- 273 - Challenge 12 Solution
- 274 - Challenge 13
- 275 - Challenge 13 Solution
- 276 - Challenge 14 and Solution
- 277 - Challenge 15
- 278 - Challenge 15 Solution
- 279 - Express Routing Parameters
- 280 - Challenge 16
- 281 - Challenge 16 Solution
- 282 - Challenge 17
- 283 - Challenge 17 Solution
- 284 - Challenge 18
- 285 - Challenge 18 Solution
- 286 - Challenge 19
- 287 - Challenge 19 Solution
- 288 - Challenge 20
- 289 - Challenge 20 Solution
- 290 - Challenge 21
- 291 - Challenge 21 Solution
- 292 - Tip from Angela When Life Gives You Lemons
- 29 - Databases
- 293 - Databases Explained SQL vs NOSQL
- 30 - SQL
- 294 - SQL Commands CREATE Table and INSERT Data
- 295 - SQL Commands READ SELECT and WHERE
- 296 - Updating Single Values and Adding Columns in SQL
- 297 - SQL Commands DELETE
- 298 - Understanding SQL Relationships Foreign Keys and Inner Joins
- 299 - Tip from Angela Find All the Hard Working People
- 31 - MongoDB
- 300 - Installing MongoDB on Mac
- 301 - Installing MongoDB on Windows
- 302 - MongoDB CRUD Operations in the Shell Create
- 303 - MongoDB CRUD Operations in the Shell Reading Queries
- 304 - MongoDB CRUD Operations in the Shell Update
- 305 - MongoDB CRUD Operations in the Shell Delete
- 306 - Relationships in MongoDB
- 307 - Working with The Native MongoDB Driver
- 309 - Tip from Angela Daily Routines
- 32 - Mongoose
- 310 - Introduction to Mongoose
- 311 - Reading from Your Database with Mongoose
- 312 - Data Validation with Mongoose
- 313 - Updating and Deleting Data Using Mongoose
- 314 - Establishing Relationships and Embedding Documents using Mongoose
- 315 - Tip from Angela Deep Work
- 33 - Putting Everything Together
- 316 - Lets take the ToDoList Project to the Next Level and Connect it with Mongoose
- 317 - Rendering Database Items in the ToDoList App
- 318 - Adding New Items to our ToDoList Database
- 319 - Deleting Items from our ToDoList Database
- 320 - Creating Custom Lists using Express Route Parameters
- 321 - Adding New Items to the Custom ToDo Lists
- 322 - Revisiting Lodash and Deleting Items from Custom ToDo Lists
- 323 - Tip from Angela One Step at a Time
- 34 - Deploying Your Web Application
- 324 - How to Deploy Web Apps with a Database
- 325 - How to Setup MongoDB Atlas
- 326 - Deploying an App with a Database to Heroku
- 327 - Tip from Angela Discipline Breeds Discipline
- 35 - Boss Level Challenge 4 Blog Website Upgrade
- 328 - Challenge Give your Blog a Database
- 335 - Tip from Angela Dealing with Limitations
- 36 - Build Your Own RESTful API From Scratch
- 336 - What is REST
- 337 - Creating a Database with Robo 3T
- 338 - Set Up Server Challenge
- 339 - Set Up Server Solution
- 340 - GET All Articles
- 341 - POST a New Article
- 342 - DELTE All Articles
- 343 - Chained Route Handlers Using Express
- 344 - GET a Specific Article
- 345 - PUT a Specific Article
- 346 - PATCH a Specific Article
- 347 - DELETE a Specific Article
- 349 - Tip from Angela How to Get a Job as Programmer
- 37 - Authentication Security
- 350 - Introduction to Authentication
- 351 - Getting Set Up
- 352 - Level 1 Register Users with Username and Password
- 354 - Level 2 Database Encryption
- 355 - Using Environment Variables to Keep Secrets Safe
- 356 - Level 3 Hashing Passwords
- 357 - Hacking 101
- 358 - Level 4 Salting and Hashing Passwords with bcrypt
- 359 - What are Cookies and Sessions
- 360 - Using Passportjs to Add Cookies and Sessions
- 361 - Level 6 OAuth 20 How to Implement Sign In with Google
- 362 - Finishing Up the App Letting Users Submit Secrets
- 364 - Tip from Angela How to Work as a Freelancer
- 38 - Reactjs
- 365 - What is React
- 366 - What we will make in this React module
- 367 - Introduction to Code Sandbox and the Structure of the Module
- 368 - Introduction to JSX and Babel
- 369 - JSX Code Practice
- 370 - Javascript Expressions in JSX ES6 Template Literals
- 371 - Javascript Expressions in JSX Practice
- 372 - JSX Attributes Styling React Elements
- 373 - Inline Styling for React Elements
- 374 - React Styling Practice
- 375 - React Components
- 376 - React Components Practice
- 377 - Javascript ES6 Import Export and Modules
- 378 - Javascript ES6 Import Export and Modules Practice
- 379 - Windows Local Environment Setup for React Development
- 380 - Mac Local Environment Setup for React Development
- 382 - Keeper App Project Part 1 Challenge
- 383 - Keeper App Part 1 Solution
- 384 - React Props
- 385 - React Props Practice
- 386 - React DevTools
- 387 - Mapping Data to Components
- 388 - Mapping Data to Components Practice
- 389 - Javascript ES6 MapFilterReduce
- 390 - Javascript ES6 Arrow functions
- 391 - Keeper App Project Part 2
- 392 - React Conditional Rendering with the Ternary Operator AND Operator
- 393 - Conditional Rendering Practice
- 394 - State in React Declarative vs Imperative Programming
- 395 - React Hooks useState
- 396 - useState Hook Practice
- 397 - Javascript ES6 Object Array Destructuring
- 398 - Javascript ES6 Destructuring Challenge Solution
- 399 - Event Handling in React
- 400 - React Forms
- 401 - Class Components vs Functional Components
- 402 - Changing Complex State
- 403 - Changing Complex State Practice
- 404 - Javascript ES6 Spread Operator
- 405 - Javascript ES6 Spread Operator Practice
- 406 - Managing a Component Tree
- 407 - Managing a Component Tree Practice
- 408 - Keeper App Project Part 3
- 409 - React Dependencies Styling the Keeper App
- 410 - Tip from Angela How to Build Your Own Product
- 39 - Web3 Decentralised App DApp Development with the Internet Computer
- 411 - What is Web3
- 412 - How does the Blockchain actually work
- 413 - What are DApps Decentralised Apps and how do you develop them
- 414 - What is the Internet Computer ICP
- 416 - Mac Users Installation and Setup for Web3 Development
- 417 - Windows Users Installation and Setup for Web3 Development
- 40 - Build Your First Defi Decentralised Finance DApp DBANK
- 418 - What Youll Build DBANK Inspired by Compound
- 419 - Introduction to the Motoko Language
- 420 - Motoko Functions and the Candid User Interface
- 421 - Motoko Conditionals and Type Annotations
- 422 - Query vs Update Methods
- 423 - Orthogonal Persistance
- 424 - Tracking Time and Calculating Compound Interest
- 425 - Adding HTML and CSS to Create the Frontend for DBANK
- 426 - Connecting the Motoko Backend to our JS Frontend
- 41 - Deploying to the ICP Live Blockchain
- 428 - What are Cycles and the ICP Token
- 430 - How to Claim Free Cycles from Dfinity
- 431 - How to Deploy to the ICP Network
- 432 - How to Convert ICP into Cycles
- 433 - Optional How to Deploy a Static Website onto the ICP Blockchain for Hosting
- 42 - Building DApps on ICP with a React Frontend
- 434 - How to Configure a DFX Created Project to Use React
- 435 - Storing Data on a Canister
- 436 - Retrieving Data from a Canister
- 437 - Deleting and Persistance
- 43 - Create Your Own Crypto Token
- 438 - Tokens and Coins What are they and how are they used
- 439 - Download and Configure the Skeleton Project
- 440 - Using Motoko Hashmaps to Store Token Balances
- 441 - Showing the Users Token Balance on the Frontend
- 442 - Creating the Faucet Functionality Using the Shared Keyword
- 443 - Creating the Transfer Functionality
- 444 - Using the Transfer Functionality in the Faucet
- 445 - Persisting NonStable Types Using the Pre and Postupgrade Methods
- 446 - What is the Internet Identity
- 447 - Authenticating with the Internet Identity
- 448 - Optional Live Deployment to Test Internet Identity Authentication
- 44 - Minting NFTs and Building an NFT Marketplace like OpenSea
- 449 - What Youll Build A Website to Mint Buy and Sell NFTs
- 450 - Minting NFTs
- 451 - Viewing the NFT on the Frontend
- 452 - Enabling the Minting Functionality on the Frontend
- 453 - Displaying Owned NFTs Using the React Router
- 454 - Listing NFTs for Sale
- 455 - Styling the Listed NFTs
- 456 - Creating the Discover Page
- 457 - Buying NFTs
- 45 - Optional Module Ask Angela Anything
- 459 - AAA 1 How to Soak in Programming Concepts and more
- 460 - AAA 2 Schedule for Learning to Code and more
- 461 - AAA 3 How to Start Freelancing and more
- 462 - AAA 4 The Live AMA