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; ContainerForms form-control; form-group; form-inline7.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#overview7.83 Font awesome
http://fontawesome.io/7.85 Landing Page
Section 8: Bootstrap 4! 8.88 A History of Bootstrap 48.89 The Bootstrap 4 Documentation8.90 Changes from Bootstrap 3 to 48.91 Bootstrap 4 Code/Solutions Download8.92 Getting Started With Bootstrap 48.93 Bootstrap 4 Colors and Backgrounds8.94 Typography8.95 New Fancy Spacing Utilities8.96 Responsive Breakpoints8.97 Bootstrap4 Navbars8.98 The New Display Utility Section 9: Flexbox and Layout 9.99 Bootstrap 4: Flexbox9.100 Flexbox Utilities Part 2 Direction 9.101 Navs and Flexbox9.102 The Bootstrap 4 Grid9.103 PATTERN PROJECT Part 19.104 PATTERN PROJECT Part 29.105 The Grid + Flexbox9.106-9.111 Museum of Candy Project Part 1-5 Section 10: Introduction to Javascript 10.113 The JavaScript Console10.114 Primitives Numbers, Strings, Booleans, null and undefined 10.115 Primitives Exercises "hello"length % “h1\”.lengthThe answer is 2. 10.116 Variables JavaScript variables should be camel case. 10.117 Null and Undefined10.118 Useful Built-In Methods10.119 Writing JavaScript in a Separate File10.120 JS Stalker Exercise10.121 JS Stalker Exercise: SOLUTION10.122 Aga Calculator Exercise10.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 Conditions11.130 Guessing Game Code Along11.132 Introduction to Loops11.133 While Loop Exercises11.134 While Loops Problem Set11.136 Annoy-O-Matic Code Along11.138 Intro to For Loops Section 12: Javascript Basics: Functions 12.143 Introduction to Functions12.144 Arguments12.146 The Return Keyword12.147 Quiz12.150 Scope Code Along12.152 Higher Order Functions Code Along Section 13: Javascript Basics: Arrays 13.154 Introduction to Arrays13.155 Arrays Methods push and popshift and unshiftindexOfslice 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 numberyou can lookup using a variable with bracket notationyou cannot use dot notation for property names with spaces 14.167 Comparing Objects and Arrays14.168 Nested Objects and Arrays14.170 Movie Database Exercise14.171 Adding Methods to Objects14.172 The Keyword This underscore.org Section 15: DOM Manipulation (DOM: Document Object Model) 15.175 Defining the DOM15.176 Select and Manipulate15.177 Note about UI changes in new versions of Chrome15.178 Important Selector Methods15.179 Selector Exercise15.180 Note about next lecture (Manipulating Style)15.181 Manipulating Style15.182 Manipulating Text and Content15.183 Manipulating Attributes15.184 Note about changing in the Google logo in the next lecture15.185 Playing With Google Code Along Section 16: Advanced DOM Manipulation 16.186 Introduction to Events16.187 Color Toggle Exercise16.188 Score Keeper Project Part 116.189 Note about Score Keeper Project Part 216.190 Score Keeper Project Part 216.191 Other Types of Events: Todo List16.192 Note regarding counting events exercise16.193 Counting Events Exercise Section 17: Color Game ProjectSection 18:Introduction to jQuery (though Lot’s of people are moving away from jQuery) 18.2 youmightnotneedjquery.com18.3 Linking To jQuery18.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 ListSection 21: ProjectSection 22: Backend Basics 22.1 stackshare.io/reddit/reddit ; stackshare.io/stacks22.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 matcherWrite routes containing route parametersDiscuss 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 itPass variables to EJS templates 26.2 Logic in EJS (EJS Control Flow) <%= %>: to display<% %>: pure logitShow examples of control flow in EJS templatesWrite if statements in an EJS fileWrite loops in an EJS file 26.3 Styles and Partials Show how to properly include public assetsProperly configure our app to use EJSUse partials to dry up our code 26.4 Post Request Write post routes, and test them with PostmanUse a form to send a post requestUse 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 PageAdd Campgrounds Page that lists all campgrounds (Each Campground has Name and Image) 28.2 Layout and Basic Styling Create out header and footer partialsAdd in Bootstrap 28.3 Creating New Campgrounds Setup new campground POST routeAdd in body-parserSetup route to show formAdd basic unstyled form 28.4 Style the campgrounds page Add a better header/titleMake campgrounds display in a grid 28.5 Style the Navbar and Form Add a navbar to all templatesStyle 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 MongoDBWhy MongoDB 29.3 Our First Mongo Commands mongod/mongo/help/show dbs/use/insert/find/update/remove 29.4 MongooseWhat 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 mongooseSetup campground modelUse campground model inside of our routes 30.2 Update Deprecation WARNING30.3/30.4 YelpCamp Show Page Review the RESTful routes we’ve seen so farAdd description to our campground modelShow db.collection.drop()Add a show route/template NameUrl/PathHTTP VerbDescriptionMongoose MethodIndex/dogsGETDisplay a list of all dogDog.find()New/dogs/newGETDisplay form to make a new dogN/ACreate/dogsPOSTAdd new dog to DBDog.create()Show/dogs/:idGETShows info about one dogDog.findById()Edit/dogs/:id/editGETShow edit form for one dogDog.findById()Update/dogs/:idPUTUpdate a particular dog, then redirect somewhereDog.findByIdAndUpdate()Destroy/dogs/:idDELETEDelete a particular dog, then redirect somewhereDog.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; DESTROY7 restful routes 31.2 Index Setup the Blog AppCreate the Blog modelAdd INDEX route and template 31.3 Basic Layout Add Header and Footer PartialsInclude Semantic UIAdd Simple Nav 31.4 New and Create Add NEW routeAdd NEW templateAdd CREATE routeAdd CREATE template 31.5 Show Add Show routeAdd Show templateAdd links to show pageStyle show template 31.6 Edit/Update Add Edit RouteAdd Edit FormAdd Update RouteAdd Update FormAdd Method-Override 31.7 Destroy Add Destroy RouteAdd Edit and Destroy Links 31.8 Final Updates Sanitize blog bodyStyle IndexUpdate REST Table Section 32: Data Associations 32.1 Intro to Associations Define associationsDiscuss 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 directoryUse module.exportsRequire everything correctly 33.2 Seeds file Add a seeds.js fileRun the seeds file every time the server starts 33.3 Add comment model and display the comments in the show page33.4 Comment New/Create Discuss the nested routesAdd the comment new and create routesAdd the new comment form 33.5 Style Show Page Add sidebar to show pageDisplay comments nicely Section 34: Authentication 34.1 Intro to Authentication What tools are we using? (Passport, Passport local, Passport local mongoose)Walk through auth flowDiscuss sessions (Express-Session) 34.2 Auth Code Along Part 1 Set up folder structureInstall needed packagesAdd root route and templateAdd secret route and template 34.3 Auth CodeAlong Part 2 Create User modelConfigure passport 34.4 Auth CodeAlong Part 3 Add Register routesAdd Register form 34.5 Auth CodeAlong Part 4 Add Login routesAdd Login form 34.6 Auth CodeAlong Part 5 Add Logout RouteAdd isLoggedIn middlewareStill 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 authDefine User model 35.2 Register Configure PassportAdd register routesAdd register template 35.3 Login Add login routesAdd login template 35.4 Logout/Navbar Add logout routePrevent user from adding a comment if not signed inAdd links to navbarShow/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 commentsSave author’s name to a comment automatically 36.3 Users + Campgrounds Prevent an unauthenticated user from creating a campgroundSave username+id to newly created campground