[Udemy] Notes on "The Web Developer Bootcamp"

最新推荐文章于 2022-08-14 18:10:43 发布

madao_yw

最新推荐文章于 2022-08-14 18:10:43 发布

阅读量776

点赞数 1

分类专栏：公开课

本文链接：https://blog.csdn.net/madao_yw/article/details/90575255

版权

公开课专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Section 3: HTML Basics
Section 4: HTML Intermediate
Section 5: CSS Basics
- 5.41 selector { property: value}
- 5.42 http://www.csszengarden.com/
- 5.45 Color in CSS
  - colorpicker.com
  - color system
    - Hexadecimal (#000000:black; #FF0000:red; #00FF00:green; #FFFFFF:white);
    - RGB: (rgb(0, 255, 0));
    - RGBA
- 5.46 Background and Border
  - Background and color
  - Background and image
    - background: url();
    - background-repeat: no-repeat;
    - background-size: cover;
  - Border
    - border-color: purple.
    - border-width: 5px;
    - border-style: solid/dashed/…;
    - OR border: 5px solid purple;
- 5.48 Selectors Basic Todo List
  - Element Selector; ID Selector; Class Selector
- 5.49 Introduction to Chrome Inspector
- 5.50 More Advanced Selectors
  - 30 css selectors you must memorize
    - star selector; descendant selector; adjacent selector; attribute selector; nth-of-type; …;
- 5.52 Specificity and Cascade
Section 6: Intermediate CSS
- 6.56 Unit Objectives
- 6.57 Texts and Fonts
  - font-family; font-size; font-weight; line-height; text-align; text-decoration;
  - CSS Font Stack: www.cssfontstack.com
- 6.58 More Texts and Fonts
- 6.59 Notes on Google Fonts
  - https://www.udemy.com/the-web-developer-bootcamp/learn/lecture/6674650#overview
- 6.61 Introduction to the box model
- 6.62 Image Gallery Code
- 6.68 CSS Blog From Scratch
Section 7: Bootstrap (Useful CSS Library)
- 7.73 How to upgrade Bootstrap 3 to 4. https://www.udemy.com/the-web-developer-bootcamp/learn/lecture/6706118#overview
- 7.74 What is Bootstrap?
- 7.75 Adding Bootstrap to a Project
- 7.76 Forms and Inputs
  - Jumbotron; Container
  - Forms
    - form-control; form-group; form-inline
- 7.77 Nav Bars
- 7.79 The Grid System
- 7.82 Bootstrap-Based Image Galley
  - A few important notes: https://www.udemy.com/the-web-developer-bootcamp/learn/lecture/6195846#overview
- 7.83 Font awesome
  - http://fontawesome.io/
- 7.85 Landing Page
Section 8: Bootstrap 4!
- 8.88 A History of Bootstrap 4
- 8.89 The Bootstrap 4 Documentation
- 8.90 Changes from Bootstrap 3 to 4
- 8.91 Bootstrap 4 Code/Solutions Download
- 8.92 Getting Started With Bootstrap 4
- 8.93 Bootstrap 4 Colors and Backgrounds
- 8.94 Typography
- 8.95 New Fancy Spacing Utilities
- 8.96 Responsive Breakpoints
- 8.97 Bootstrap4 Navbars
- 8.98 The New Display Utility
Section 9: Flexbox and Layout
- 9.99 Bootstrap 4: Flexbox
- 9.100 Flexbox Utilities Part 2
  - Direction
- 9.101 Navs and Flexbox
- 9.102 The Bootstrap 4 Grid
- 9.103 PATTERN PROJECT Part 1
- 9.104 PATTERN PROJECT Part 2
- 9.105 The Grid + Flexbox
- 9.106-9.111 Museum of Candy Project Part 1-5
Section 10: Introduction to Javascript
- 10.113 The JavaScript Console
- 10.114 Primitives
  - Numbers, Strings, Booleans, null and undefined
- 10.115 Primitives Exercises
  - "hello"length % “h1\”.length
  - The answer is 2.
- 10.116 Variables
  - JavaScript variables should be camel case.
- 10.117 Null and Undefined
- 10.118 Useful Built-In Methods
- 10.119 Writing JavaScript in a Separate File
- 10.120 JS Stalker Exercise
- 10.121 JS Stalker Exercise: SOLUTION
- 10.122 Aga Calculator Exercise
- 10.123 Age Calculator Exercise: SOLUTION
Section 11: Javascript Basics: Control Flow
- 11.125 Boolean Logic
  - null == undefined //true
  - 对于JavaScript中比较运算符，可能大家用的比较多的是==、对于 ===”很多人可能很陌生。表示恒等，首先比较两边的变量数据类型是否相等，其次比较两边的变量的数值是否相等；表示相等即仅仅比较两边变量的数值是否相等。
  - “===”首先计算其操作数的值，然后比较这两个值，比较过程没有任何类型转换
  - 相等运算符“==”如果两个操作数不是同一类型，那么相等运算符会尝试一些类型转换，然后进行比较
- 11.127 Logical Operators
  - &&, ||, !
- 11.128 Conditions
- 11.130 Guessing Game Code Along
- 11.132 Introduction to Loops
- 11.133 While Loop Exercises
- 11.134 While Loops Problem Set
- 11.136 Annoy-O-Matic Code Along
- 11.138 Intro to For Loops
Section 12: Javascript Basics: Functions
- 12.143 Introduction to Functions
- 12.144 Arguments
- 12.146 The Return Keyword
- 12.147 Quiz
- 12.150 Scope Code Along
- 12.152 Higher Order Functions Code Along
Section 13: Javascript Basics: Arrays
- 13.154 Introduction to Arrays
- 13.155 Arrays Methods
  - push and pop
  - shift and unshift
  - indexOf
  - slice
- 13.159 Array Iteration
  - arr.forEach(someFunction)
- 13.162 Todo List Code Along
Section 14: Javascript Basics: Objects
- 14.166 Introduction to Objects
  - you cannot use dot notation if the property starts with a number
  - you can lookup using a variable with bracket notation
  - you cannot use dot notation for property names with spaces
- 14.167 Comparing Objects and Arrays
- 14.168 Nested Objects and Arrays
- 14.170 Movie Database Exercise
- 14.171 Adding Methods to Objects
- 14.172 The Keyword This
  - underscore.org
Section 15: DOM Manipulation (DOM: Document Object Model)
- 15.175 Defining the DOM
- 15.176 Select and Manipulate
- 15.177 Note about UI changes in new versions of Chrome
- 15.178 Important Selector Methods
- 15.179 Selector Exercise
- 15.180 Note about next lecture (Manipulating Style)
- 15.181 Manipulating Style
- 15.182 Manipulating Text and Content
- 15.183 Manipulating Attributes
- 15.184 Note about changing in the Google logo in the next lecture
- 15.185 Playing With Google Code Along
Section 16: Advanced DOM Manipulation
- 16.186 Introduction to Events
- 16.187 Color Toggle Exercise
- 16.188 Score Keeper Project Part 1
- 16.189 Note about Score Keeper Project Part 2
- 16.190 Score Keeper Project Part 2
- 16.191 Other Types of Events: Todo List
- 16.192 Note regarding counting events exercise
- 16.193 Counting Events Exercise
Section 17: Color Game Project
Section 18:Introduction to jQuery (though Lot’s of people are moving away from jQuery)
- 18.2 youmightnotneedjquery.com
- 18.3 Linking To jQuery
- 18.4 jQuery Selectors
  - select elements with $(selector)
  - use .css(property, value) to style
- 18.6,7,8 Methods Text and HTML
  - val(); text(); attr(); html(); addClass(); removeClass(); toggleClass();
Section 19: Advanced jQuery
- 19.1,2,3 click(); keypress(); on();
- 19.4 effects: fadeOut(); fadeIn(); fadeToggle(); slideDown(); slideUp; slideToggle;
Section 20: Todo List
Section 21: Project
Section 22: Backend Basics
- 22.1 stackshare.io/reddit/reddit ; stackshare.io/stacks
- 22.2 HTTP in Depth; postman
Section 25: Server Side Framework
- 25.4 Route Parameters
  - app.get("/r/:subredditName", function(req, res) {console.log(req); console.log(req.params); var subreddit = req.params.subredditName; res.send(“WELCOME TO THE” + subreddit.toUpperCase() + “SUBREDDIT!”); res.send(“WELCOME TO A SUBREDDIT!”)};
  - Summary:
    - Show the * route matcher
    - Write routes containing route parameters
    - Discuss route order
Section 26: Express Intermediate
- 26.1 Intro to EJS
  - #Rendering HTML and Templates
    - Using res.render() to render HTML(from an EJS file)
    - Explain what EJS is and why we use it
    - Pass variables to EJS templates
- 26.2 Logic in EJS (EJS Control Flow)
  - <%= %>: to display
  - <% %>: pure logit
  - Show examples of control flow in EJS templates
  - Write if statements in an EJS file
  - Write loops in an EJS file
- 26.3 Styles and Partials
  - Show how to properly include public assets
  - Properly configure our app to use EJS
  - Use partials to dry up our code
- 26.4 Post Request
  - Write post routes, and test them with Postman
  - Use a form to send a post request
  - Use body parser to get form data
Section 27: Working with API’s
- 27.1 Intro to API(Application Programming Interface)
  - programmableWeb
- 27.2 Data Formats
  - xml(extended markup language)
  - json(javascript object notation)
Section 28: YelpCamp Basics
- 28.1 YelpCamp Initial Setup
  - Add Landing Page
  - Add Campgrounds Page that lists all campgrounds (Each Campground has Name and Image)
- 28.2 Layout and Basic Styling
  - Create out header and footer partials
  - Add in Bootstrap
- 28.3 Creating New Campgrounds
  - Setup new campground POST route
  - Add in body-parser
  - Setup route to show form
  - Add basic unstyled form
- 28.4 Style the campgrounds page
  - Add a better header/title
  - Make campgrounds display in a grid
- 28.5 Style the Navbar and Form
  - Add a navbar to all templates
  - Style the new campground form
Section 29: Databases
- 29.1 Intro to databases
  - What is a database (A collection of information/data; Has an interface)
  - SQL(relational) vs. NoSQL(non-relational)
- 29.2 Intro to MongoDB
  - What is MongoDB
  - Why MongoDB
- 29.3 Our First Mongo Commands
  - mongod/mongo/help/show dbs/use/insert/find/update/remove
- 29.4 Mongoose
  - What Is Mongoose?
  - Why are we using it?
  - Interact with a Mongo Database using Mongoose
  - asynchronous nature of callback functions
    The Cat.create() and Cat.find() are asynchronous queries, which means that the code won’t wait for the first asynchronous call to finish before executing the next asynchronous call.
    
    Basically, Cat.find() can execute and finish faster, then print the found cats before the new cat was created with Cat.create().
    
    So, that behaviour can be expected because these mongoose queries are asynchronous (meaning that they take some time to finish, the quicker one will show up first, even if it may be below in the code). To read more about the asynchronous nature of Node.js (JavaScript), see here: https://www.udemy.com/the-web-developer-bootcamp/learn/v4/questions/3409328
    
    Read more information about the asynchronous nature of Node.js here:
    
    https://www.udemy.com/the-web-developer-bootcamp/learn/v4/questions/2836872
    
    https://www.udemy.com/the-web-developer-bootcamp/learn/v4/questions/2241780
    
    https://www.udemy.com/the-web-developer-bootcamp/learn/v4/questions/2970276
    
    You can also check Ian’s answer here: https://www.udemy.com/the-web-developer-bootcamp/learn/v4/questions/5679559
Section 30: Data Persistence
- 30.1 YelpCamp Add Mongoose
  - Install and configure mongoose
  - Setup campground model
  - Use campground model inside of our routes
- 30.2 Update Deprecation WARNING
- 30.3/30.4 YelpCamp Show Page
  - Review the RESTful routes we’ve seen so far
  - Add description to our campground model
  - Show db.collection.drop()
  - Add a show route/template

Name	Url/Path	HTTP Verb	Description	Mongoose Method
Index	/dogs	GET	Display a list of all dog	Dog.find()
New	/dogs/new	GET	Display form to make a new dog	N/A
Create	/dogs	POST	Add new dog to DB	Dog.create()
Show	/dogs/:id	GET	Shows info about one dog	Dog.findById()
Edit	/dogs/:id/edit	GET	Show edit form for one dog	Dog.findById()
Update	/dogs/:id	PUT	Update a particular dog, then redirect somewhere	Dog.findByIdAndUpdate()
Destroy	/dogs/:id	DELETE	Delete a particular dog, then redirect somewhere	Dog.findByIdAndRemove()

Section 31: RESTful Routing (Representational state transfer)
- 31.1 Intro to REST - a mapping between HTTP routes CRUD(create read update destroy)
  - CREATE; READ; UPDATE; DESTROY
  - 7 restful routes
- 31.2 Index
  - Setup the Blog App
  - Create the Blog model
  - Add INDEX route and template
- 31.3 Basic Layout
  - Add Header and Footer Partials
  - Include Semantic UI
  - Add Simple Nav
- 31.4 New and Create
  - Add NEW route
  - Add NEW template
  - Add CREATE route
  - Add CREATE template
- 31.5 Show
  - Add Show route
  - Add Show template
  - Add links to show page
  - Style show template
- 31.6 Edit/Update
  - Add Edit Route
  - Add Edit Form
  - Add Update Route
  - Add Update Form
  - Add Method-Override
- 31.7 Destroy
  - Add Destroy Route
  - Add Edit and Destroy Links
- 31.8 Final Updates
  - Sanitize blog body
  - Style Index
  - Update REST Table
Section 32: Data Associations
- 32.1 Intro to Associations
  - Define associations
  - Discuss one: one, one:many, and many: many relationships
- 32.2 Embedding Data
  - Example: Post, User;
- 32.3 Referencing Date
  - create; retrieve
- 32.4 Module.Exports(clean up)
Section 33: YelpCamp: Comments
- 33.1 Refactor Mongoose Code
  - Create a models directory
  - Use module.exports
  - Require everything correctly
- 33.2 Seeds file
  - Add a seeds.js file
  - Run the seeds file every time the server starts
- 33.3 Add comment model and display the comments in the show page
- 33.4 Comment New/Create
  - Discuss the nested routes
  - Add the comment new and create routes
  - Add the new comment form
- 33.5 Style Show Page
  - Add sidebar to show page
  - Display comments nicely
Section 34: Authentication
- 34.1 Intro to Authentication
  - What tools are we using? (Passport, Passport local, Passport local mongoose)
  - Walk through auth flow
  - Discuss sessions (Express-Session)
- 34.2 Auth Code Along Part 1
  - Set up folder structure
  - Install needed packages
  - Add root route and template
  - Add secret route and template
- 34.3 Auth CodeAlong Part 2
  - Create User model
  - Configure passport
- 34.4 Auth CodeAlong Part 3
  - Add Register routes
  - Add Register form
- 34.5 Auth CodeAlong Part 4
  - Add Login routes
  - Add Login form
- 34.6 Auth CodeAlong Part 5
  - Add Logout Route
  - Add isLoggedIn middleware
  - Still able to go to the secret page after logout? See solution here: https://www.udemy.com/the-web-developer-bootcamp/learn/lecture/3861688#questions/2167016
35 YelpCamp: Authentication
- 35.1 Add User Model
  - Install all packages needed for auth
  - Define User model
- 35.2 Register
  - Configure Passport
  - Add register routes
  - Add register template
- 35.3 Login
  - Add login routes
  - Add login template
- 35.4 Logout/Navbar
  - Add logout route
  - Prevent user from adding a comment if not signed in
  - Add links to navbar
  - Show/hide auth link correctly
- 35.5 Show/Hide Links
  - Show/hide auth links in navbar correctly
36 YelpCamp: Cleaning Up
- 36.1 Refactor The Routes
  - Use Express router to reorganize all routes
- 36.2 Users + Comments
  - Associate users and comments
  - Save author’s name to a comment automatically
- 36.3 Users + Campgrounds
  - Prevent an unauthenticated user from creating a campground
  - Save username+id to newly created campground