https://i124.fastpic.org/big/2024/1225/96/9cb7798e8ec967b9e099249b07f6db96.jpg
100 Days Of Code - 2023 Web Development Bootcamp
Last updated 11/2022
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 33.28 GB | Duration: 79h 18m
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
What you'll learn
How the web works and how to get started as a web developer
Learn web development in 100 days (optional - you can also pick a different pace)
Build websites, web apps and web services (and understand what these "things" are)
Build frontend user interfaces with HTML, CSS & JavaScript
Build backend processes with NodeJS, Express & SQL + NoSQL databases
Add advanced features like user authentication, file upload or database queries to websites
Requirements
NO prior web development or programming knowledge is required! We'll start from scratch!
You only need a computer or Mac to get started!
Description
Join the most comprehensive web development bootcamp on Udemy!This course will teach you web development and turn you into a web developer in 100 days - or allow you to refresh key essentials and expand your existing knowledge!Becoming a web developer is a great choice because web development opens up many career paths and web development skills are required in pretty much every business that exists today - and of course this will only increase in the future!It's not just about websites - it's also about "behind the scenes" services used by mobile apps like Uber or AirBnB. It's about rich web apps like Google Docs as well as browser games. And of course also about regular websites like Facebook, online blogs, online shops like Amazon and much, much more!Hence it's no wonder, that web developers are in high demand! And, besides great job perspectives, as a web developer, you can of course also easily build your own digital business!This Course Is For You!This course will teach you web development from the ground up and thanks to the "100 Days Of Code Challenge" which is incorporated into this course (though it's optional to commit to it!), you can become a web developer in 100 days with help of this course!No prior web development knowledge is required at all to get started with this course. We will explore all important basics, all fundamentals and all key concepts together, step by step.But this course is also for advanced students who already do have web development knowledge! It's a deep-dive course and hence you will be able to expand your existing knowledge by diving deeper into key fundamentals like HTML, CSS or NodeJS and also by exploring advanced concepts like handling payments, building REST APIs or website security.Since it's a huge course, the course is built in a modular way. This means, that you can take it step by step, lecture by lecture but you can also jump right into the course sections that are most interesting to you. Of course, we recommend the "step-by-step" approach for beginners - simply because all the lectures and sections build up on each other. But as a more experienced developer, you can of course skip basics that aren't interesting to you!The 100 Days Of Code ChallengeWe built this course with the "100 Days Of Code Challenge" in mind - a challenge (not invented by us) that aims to keep you motivated to code for at least 1 hour per day for 100 days.Since this is a huge course (with around 80 hours of content!) it can be very overwhelming. And we know that many students never finish a course.That's a pitty, because this course is packed with content, exercises, quizzes, assignments and demo projects! We build a browser-game, a blog, a travel website, an online shop and much, much more. Therefore, we provide clear guidance on how you can take this course from A to Z within 100 days by spending 1 to 2 hours per day watching videos and learning. As part of the course, you get access to a companion website that provides a clear structure and you also find annotations right in the course curriculum. Of course taking this "100 Days" challenge is totally optional though! You can take the course at your own pace as well and skip any content you're not interested in!Try It Risk-FreeThis course comes with a 30 day money-back guarantee. If you find out that it's not for you, you can get your money back, no questions asked!What You Will LearnThis is a huge course, packed with content and it's the web development bootcamp we would have loved to have when we learned web development.Here's a summary of the key concepts we'll explore as part of this course:How the web worksCore technologies: HTML, CSS & JavaScriptUnderstand how HTML documents are structured and how HTML elements are used correctlyLearn core CSS concepts like the box model, flexbox, positioning, units and much moreExplore advanced CSS concepts like building responsive websites, layouts, custom CSS properties, CSS grid & moreLearn browser-side JavaScript from the ground upUnderstand what the "DOM" is and how you can manipulate it via JavaScriptExplore browser / user events and how to handle them with JavaScriptBuild tons of projects (e.g. a Tic-Tac-Toe browser game) to practice and fully understand all these technologiesDive into backend development with NodeJS & ExpressJSLearn what NodeJS is and how it worksBuild basic backend-driven websites with advanced concepts like dynamic routing or dynamic templatesLearn how to work with databases - SQL & NoSQL (and what that is)Practice how to use SQL / NoSQL with NodeJS & ExpressDive into advanced concepts like authentication, website security, coding patterns, file uploads, user input validation and so much more!Again: Build plenty of projects (e.g. a complete online shop, from the ground up!) to practice all advanced concepts as wellLearn how to use third-party packages and services (e.g. Stripe for payments) in your websitesMove on to more specialized, advanced concepts like building REST APIsExplore frontend JavaScript frameworks like Vue.js to build even more powerful web user interfacesAnd so much more - simply check out the full curriculum to get a complete list!We'd love to start this journey with you, so let's get started!Max & Manuel
Overview
Section 1: Introduction [Day 1]
Lecture 1 Welcome to This Course! [Day 1]
Lecture 2 What Is "Web Development" & How Does The Web Work? [Day 1]
Lecture 3 The Three Key Programming Languages [Day 1]
Lecture 4 How The Web Works: A Deep Dive [Day 1]
Lecture 5 What About The "www"? [Day 1]
Lecture 6 The 100 Days of Code Challenge! [Day 1]
Lecture 7 How To Get The Most Out Of This Course [Day 1]
Lecture 8 Stuck in the Course? We Got you Covered! [Day 1]
Lecture 9 Join Our Learning Community!
Lecture 10 How To Use The Attached Code [Day 1]
Section 2: Building a First Website: HTML & CSS Basics [Days 1 - 5]
Lecture 11 Module Introduction [Day 1]
Lecture 12 How to Create a Website [Day 1]
Lecture 13 Creating our First HTML Page [Day 1]
Lecture 14 Setting Up a Development Environment [Day 2]
Lecture 15 Why Visual Studio Code? [Day 2]
Lecture 16 Understanding HTML Elements [Day 2]
Lecture 17 Which HTML Elements Exist? [Day 2]
Lecture 18 Adding Another HTML Element [Day 2]
Lecture 19 Exploring HTML Attributes [Day 2]
Lecture 20 Getting Started with CSS (Day 2)
Lecture 21 More CSS Styling [Day 2]
Lecture 22 Working with Colors [Day 3]
Lecture 23 Formatting our Code [Day 3]
Lecture 24 Working with the Browser Developer Tools [Day 3]
Lecture 25 Adding a Link [Day 3]
Lecture 26 You can Nest HTML Elements! [Day 3]
Lecture 27 Using Global CSS Styles [Day 3]
Lecture 28 CSS Code Formatting [Day 3]
Lecture 29 The HTML Document Skeleton & Metadata [Day 3]
Lecture 30 Visual Studio Code Shortcuts & Tricks [Day 3]
Lecture 31 Code Comments [Day 3]
Lecture 32 First Summary [Day 3]
Lecture 33 Styling the Anchor Element Also with Pseudo Hover [Day 4]
Lecture 34 Why it's Called Cascading Style Sheets [Day 4]
Lecture 35 Storing CSS Code in External Files [Day 4]
Lecture 36 The Void Element Syntax [Day 4]
Lecture 37 Multiple Files & Requests [Day 4]
Lecture 38 Selecting Single Elements with the ID Selector [Day 4]
Lecture 39 Working with "font-size" and "px" [Day 4]
Lecture 40 Using Other Fonts from Google Fonts [Day 4]
Lecture 41 Understanding How HTML & CSS Handle Text & Whitespace [Day 5]
Lecture 42 Adding an Image [Day 5]
Lecture 43 Styling the Image & Using the Body Tag [Day 5]
Lecture 44 Styling the Overall Page Background [Day 5]
Lecture 45 Adding a Second HTML File [Day 5]
Lecture 46 A Word About File Name Conventions [Day 5]
Lecture 47 Using a Shared CSS File [Day 5]
Lecture 48 Organizing Source Files in Folders [Day 5]
Lecture 49 Summary [Day 5]
Section 3: Diving Deeper Into HTML & CSS [Days 6 - 8]
Lecture 50 Module Introduction [Day 6]
Lecture 51 Using the Live Server Extension [Day 6]
Lecture 52 The Development Server & The Local Website Address [Day 6]
Lecture 53 Understanding Lists [Day 6]
Lecture 54 Creating Lists [Day 6]
Lecture 55 Understanding Parents, Children, Containers & More [Day 6]
Lecture 56 Understanding Cascading, Inheritance & Specificity [Day 6]
Lecture 57 Styling the Full Week Page [Day 6]
Lecture 58 Introducing the CSS Box Model [Day 7]
Lecture 59 Using the CSS Box Model [Day 7]
Lecture 60 Creating HTML Layouts [Day 7]
Lecture 61 Theory: Selectors & Combinators [Day 7]
Lecture 62 Using Selectors & Combinators [Day 7]
Lecture 63 Understanding Classes [Day 7]
Lecture 64 Block vs Inline Elements [Day 7]
Lecture 65 Styling Differences Between Block & Inline Elements [Day 8]
Lecture 66 Understanding Margin Collapsing [Day 8]
Lecture 67 The "box-shadow" Property [Day 8]
Lecture 68 Your Challenge! [Day 8]
Lecture 69 Creating the HTML Layout [Day 8]
Lecture 70 Styling the Main Section [Day 8]
Lecture 71 Styling Images & Working with Negative Margins [Day 8]
Lecture 72 Finishing Touches [Day 8]
Lecture 73 Module Summary [Day 8]
Lecture 74 A List Of All CSS Selectors [Day 8]
Section 4: HTML & CSS - Practice & Summary [Days 9 - 10]
Lecture 75 Module Introduction [Day 9]
Lecture 76 Your Task! [Day 9]
Lecture 77 Creating the Core Structure [Day 9]
Lecture 78 Adding the Header Content [Day 9]
Lecture 79 Adding Header Styling [Day 9]
Lecture 80 Spacing & the CSS Box Model [Day 9]
Lecture 81 Adding the Main Content [Day 9]
Lecture 82 Styling the Main Content [Day 10]
Lecture 83 Styling List Items & Links [Day 10]
Lecture 84 Adding the Footer [Day 10]
Lecture 85 Introducing New HTML Elements [Day 10]
Lecture 86 Organizing our Files [Day 10]
Lecture 87 Module Summary [Day 10]
Section 5: Serving A Website (Hosting & Deployment) [Day 11]
Lecture 88 Module Introduction [Day 11]
Lecture 89 What is "Hosting" & "Deployment"? [Day 11]
Lecture 90 Hosting a First Static Website (Example Deployment on Netlify) [Day 11]
Lecture 91 More Information On Netlify & HTTPS [Day 11]
Lecture 92 Adding a Favicon [Day 11]
Lecture 93 Relative vs Absolute Paths [Day 11]
Lecture 94 Share Your Website! [Day 11]
Section 6: Introducing Version Control with Git & GitHub [Days 11 - 14]
Lecture 95 Module Introduction [Day 11]
Lecture 96 What are Git & GitHub? [Day 11]
Lecture 97 Command Line Interface (CLI) vs Graphical User Interface (GUI) [Day 11]
Lecture 98 Optional: MacOS Terminal (z Shell) Crash Course [Day 11]
Lecture 99 Optional: Windows Command Prompt (cmd) Crash Course [Day 12]
Lecture 100 Git: MacOS Installation [Day 12]
Lecture 101 Git: Windows Installation [Day 12]
Lecture 102 Understanding the Git Basics [Day 12]
Lecture 103 Initializing the Repository & Creating our First Commit [Day 12]
Lecture 104 Activating the "Code Lense" in Visual Studio Code [Day 13]
Lecture 105 Understanding Branches, Merging & Fixing Merge Conflicts [Day 13]
Lecture 106 Deleting Branches & Commits, Reverting Staged & Unstaged Changes [Day 13]
Lecture 107 Onwards to GitHub - What & Why? [Day 13]
Lecture 108 Creating a GitHub Account & a Remote Repository [Day 13]
Lecture 109 Please Read: Windows Users Only
Lecture 110 Understanding the Personal Access Token & "git clone" [Day 14]
Lecture 111 Collaborating on Projects - Collaborators & Organizations [Day 14]
Lecture 112 Contributing to Projects - Forks & Pull Requests [Day 14]
Lecture 113 Wrap Up [Day 14]
Section 7: Understanding HTML & CSS Layouts & Positioning [Days 15 - 20]
Lecture 114 Module Introduction [Day 15]
Lecture 115 Project Overview - What we Will Build [Day 15]
Lecture 116 Project Setup [Day 15]
Lecture 117 Creating the Landing Page Structure [Day 15]
Lecture 118 Adding the Page Logo [Day 15]
Lecture 119 Adding the Page Navigation [Day 15]
Lecture 120 Introducing CSS Flexbox [Day 15]
Lecture 121 Aligning Flex Items [Day 15]
Lecture 122 Your Flexbox Challenge! [Day 16]
Lecture 123 Adding Flexbox to our Project [Day 16]
Lecture 124 Adding a Background Image [Day 16]
Lecture 125 Creating a Container for the Hero-Content [Day 16]
Lecture 126 Positioning Elements [Day 16]
Lecture 127 Styling the Hero Content [Day 16]
Lecture 128 Understanding Fixed & Absolute Positioning [Day 16]
Lecture 129 Working with % Units & Creating a Top Navigation Bar [Day 17]
Lecture 130 Finishing the Header [Day 17]
Lecture 131 Introducing the "Highlights" Section [Day 17]
Lecture 132 Creating the HTML Code [Day 17]
Lecture 133 Building the Flex Container [Day 17]
Lecture 134 Flex Item Layout [Day 17]
Lecture 135 Styling Images with "object-fit" [Day 17]
Lecture 136 Styling Text [Day 17]
Lecture 137 Please Read: Adding "justify-content" [Day 17]
Lecture 138 Understanding Parent - Child Margin Collapsing [Day 18]
Lecture 139 Working with CSS Functions - Linear Gradients [Day 18]
Lecture 140 The Next Step [Day 18]
Lecture 141 Creating a Footer Section [Day 18]
Lecture 142 Styling the Footer [Day 18]
Lecture 143 Places Page - Overview & Preparations [Day 18]
Lecture 144 Creating the Card Content [Day 18]
Lecture 145 Using "position: static" [Day 18]
Lecture 146 Creating the Card Look [Day 19]
Lecture 147 Understanding "overflow" & Your Challenge! [Day 19]
Lecture 148 Solving the Challenge [Day 19]
Lecture 149 Creating all Cards [Day 19]
Lecture 150 The CSS Grid - Theory [Day 19]
Lecture 151 Understanding the "nth-type" Selector & "grid-template-columns" [Day 19]
Lecture 152 Your Grid Challenge [Day 20]
Lecture 153 Working with Unicode UTF-8 [Day 20]
Lecture 154 Finishing Touches [Day 20]
Lecture 155 Module Summary [Day 20]
Lecture 156 Optional: Diving Deeper Into "position", Flexbox & the Grid [Day 20]
Section 8: Understanding Responsive Web Design [Days 20 - 24]
Lecture 157 Module Introduction [Day 20]
Lecture 158 Project Overview [Day 20]
Lecture 159 Please Read: Optional Lectures [Day 20]
Lecture 160 Optional: Your Challenge - Creating the HTML Structure [Day 20]
Lecture 161 Optional: Challenge Solution - The HTML Structure [Day 20]
Lecture 162 Optional: Styling the Header [Day 21]
Lecture 163 Optional: Styling the "main" Section [Day 21]
Lecture 164 What is Responsive Design? [Day 21]
Lecture 165 The Problem with Pixels [Day 21]
Lecture 166 Introducing "em" & "rem" [Day 21]
Lecture 167 Applying "em" & "rem" for the Font Size [Day 22]
Lecture 168 Deep Dive: "em" vs "rem" vs "%" [Day 22]
Lecture 169 Updating the Project Units [Day 22]
Lecture 170 Comparing Desktop & Mobile First Design [Day 22]
Lecture 171 Understanding Media Queries [Day 22]
Lecture 172 Adding Media Queries to the Project [Day 23]
Lecture 173 Your Media Queries Challenge! [Day 23]
Lecture 174 Side Drawer & Hamburger Icon - Theory [Day 23]
Lecture 175 Creating the Hamburger Button [Day 23]
Lecture 176 Creating the Side Drawer [Day 23]
Lecture 177 Understanding HTML Fragments [Day 23]
Lecture 178 Understanding the Target Selector [Day 24]
Lecture 179 Finishing the Side Drawer [Day 24]
Lecture 180 Introducing the "z-index" Property [Day 24]
Lecture 181 Module Summary [Day 24]
Section 9: Creating Beautiful Websites [Days 24 - 25]
Lecture 182 Module Introduction [Day 24]
Lecture 183 T
Видео
