The Advanced Web Developer Bootcamp from Udemy

What's inside

Learning objectives

Make real web applications using cutting-edge technologies
Build responsive applications using modern css technologies like flexbox
Build json apis using node, express and mongodb
Learn the most popular front end library react and master the fundamentals around state, props and the component lifecycle
Use babel and webpack to transpile and bundle code
Understand what the virtual dom is and how react performs reconciliation
Leverage component lifecycle methods with react to include making ajax calls properly
Secure node, express, mongo and react applications on the front-end and back-end using bcrypt and json web tokens
Add routing to a single page application with the most popular routing library for react, react router.
Manage state with a centralized store using redux
Connect redux with a react application to build scalable production applications with client-side state management
Select and manipulate elements in the dom using d3
Build dynamic visualizations using d3 and svg
Use d3 to build scatterplots, histograms, pie charts and force graphs
Build compelling map visualizations with geojson and topojson
Master how to handle asynchronous code using callbacks, promises, generators and async functions
Understand how javascript handles asynchronous code using the event loop with the stack, heap and queue.

Use advanced array methods to build a solid understanding of functional programming
Create dynamic single page applications using ajax
Structure applications with design patterns using closure and modules
Explain how object oriented programming works with a thorough understanding of the keyword this and the new keyword
Refactor code using call, apply and bind to remove duplication
Use jquery to build single page applications and understand the limitations of just using jquery
Create block scope with the let keyword and use the const keyword to prevent variables from being redeclared
Clean up code using arrow functions and master method binding without using the bind keyword
Use default parameters, for of loops and the rest and spread operator to write more concise and more maintainable code
Refactor an es5 application to use es2015
Master the new class syntax and create instance methods, class methods
Implement inheritance in es2015 using extends and super
Leverage newer data structures like maps and sets to better solve problems
Learn cutting edge features to the javascript language with es2016, 2017 as well as experimental javascript additions
Solve problems similar to what you would get in a developer interview or phone screen
Show more
Show less

Make real web applications using cutting-edge technologies
Build responsive applications using modern css technologies like flexbox
Build json apis using node, express and mongodb
Learn the most popular front end library react and master the fundamentals around state, props and the component lifecycle
Use babel and webpack to transpile and bundle code
Understand what the virtual dom is and how react performs reconciliation
Leverage component lifecycle methods with react to include making ajax calls properly
Secure node, express, mongo and react applications on the front-end and back-end using bcrypt and json web tokens
Add routing to a single page application with the most popular routing library for react, react router.
Manage state with a centralized store using redux
Connect redux with a react application to build scalable production applications with client-side state management
Select and manipulate elements in the dom using d3
Build dynamic visualizations using d3 and svg
Use d3 to build scatterplots, histograms, pie charts and force graphs
Build compelling map visualizations with geojson and topojson
Master how to handle asynchronous code using callbacks, promises, generators and async functions
Understand how javascript handles asynchronous code using the event loop with the stack, heap and queue.
Use advanced array methods to build a solid understanding of functional programming
Create dynamic single page applications using ajax
Structure applications with design patterns using closure and modules
Explain how object oriented programming works with a thorough understanding of the keyword this and the new keyword
Refactor code using call, apply and bind to remove duplication
Use jquery to build single page applications and understand the limitations of just using jquery
Create block scope with the let keyword and use the const keyword to prevent variables from being redeclared
Clean up code using arrow functions and master method binding without using the bind keyword
Use default parameters, for of loops and the rest and spread operator to write more concise and more maintainable code
Refactor an es5 application to use es2015
Master the new class syntax and create instance methods, class methods
Implement inheritance in es2015 using extends and super
Leverage newer data structures like maps and sets to better solve problems
Learn cutting edge features to the javascript language with es2016, 2017 as well as experimental javascript additions
Solve problems similar to what you would get in a developer interview or phone screen
Show more
Show less

Syllabus

In these videos we'll introduce the course and instructors!

The Story Of This Course

Curriculum Walkthrough

Learning Paths

Introducing the Team

CSS Animations: Transforms and Transitions

Section Introduction

Introduction To CSS Animations

Why Animations Matter

Intro To Pseudoclasses

Pseudo-Classes: Hover

A very quick quiz, shouldn't take long!

Pseudo-Classes: Focus

Pseudo-Classes: Active

Quick Pseudoclasses Exercise

Building An Animated Button

Introduction to Transform

Transform: Translate

Transform:Scale() and Transform-Origin

Transform: Rotate()

A Note on Vendor Prefixes

Transitions Basics

Transition-Duration and Transition-Property

Transition-Timing-Function and Transition-Delay

Transition Shorthand

CSS Animation Performance

Building An Animated Gallery

CSS Animations: Keyframes

Introduction to Keyframes

Codealong: Animated Rainbow Flashing Text

Other CSS Animation Properties

Exercise: Rising and Setting Sun Animation

Exercise SOLUTION : Rising and Setting Sun Animation

CSS Animation Shorthand

Building an Animated CSS Loading Icon

Advanced CSS: Layout With Flexbox

Introduction To Flexbox

The Magic of Display: Flex

Important Flexbox Terminology

Flex-Direction

Flex-Wrap

Blah

Justify-Content

Flexbox Sidebar Exercise

Flexbox Sidebar Exercise: SOLUTION

Align-Items

Align-Content

Building A Responsive Navbar CODEALONG

Align-Self

Order

flex-basis

flex-grow

Flex-Shrink

Building a Polygon.com Widget

Exercise: Holy Grail Layout

Exercise: Holy Grail Layout SOLUTION

Flexbox Browser Support

Apply their knowledge of Flexbox and CSS Animations to build a website from scratch.

Introducing Matt

In this video, we'll introduce a CSS project using Flexbox and CSS animations. Get ready to build a website from scratch!

In this lesson, we'll walk through the creation of the nav and header area for our startup site, and we'll build a couple of animations with CSS.

NOTE: A few people have (rightly) pointed out that in this video, once we give the nav bar absolute positioning, the links cease to be clickable. To fix this issue, just add a z-index of 1 to the nav bar (this isn't done in the video).

In this lesson, we'll add a couple more sections to our website using Flexbox.

In this lesson, we'll finish building our website with CSS and Flexbox.

In this lesson, we'll use media queries to make the design of our website more responsive.

Async Foundations

Introducing Tim

Introduction

Callback Functions

Codealong: forEach

findIndex Exercise Intro

findIndex

findIndex Solution

The Stack And The Heap

The Stack: An Example

setTimeout and setInterval

Exercise: countDown Function

countDown Exercise Solution

The Event Loop And The Queue

Let's test your knowledge of the Stack, Heap, Queue and Event Loop!

Promise Basics

Promise Chaining

AJAX Part 1: XHR and Fetch

Intro to AJAX

What's the deal with JSON and XML?

Making Our First Request with XMLHTTPRequest

AJAX Workflow: Building The Random Image App

Bitcoin Price Exercise

Bitcoin Price Exercise Solution

Fetch Introduction

Fetch Options

Fetch Error Handling

Fetch Random User Profile Exercise

Fetch Random User Profile Exercise Solution

The Problem With Fetch

AJAX Part 2: jQuery and Axios

jQuery AJAX Introduction

jQuery $.ajax Method

Digging In The jQuery Sourcecode

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Develops a strong foundation for beginners in modern web development, including the latest tools and technologies

Strengthens an existing foundation for intermediate learners in web development, building upon existing skills

Develops professional skills and deep expertise in the latest web development tools, libraries, and frameworks

Offers a comprehensive study of modern web development technologies and frameworks, spanning front-end, back-end, and full-stack practices

Taught by instructors from professional bootcamps with years of experience teaching web development

Requires extensive background knowledge in web development best practices and technologies

Reviews summary

Well-received development bootcamp

Learners say Awesome explanation exposed them to useful tools.

Students find the tools covered in this course to be very useful.

"Exposed me to many useful tools."

The explanations given in this course are great.

"Awesome explanation."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in The Advanced Web Developer Bootcamp with these activities:

Read 'Eloquent JavaScript'

Show steps

Gain a comprehensive understanding of JavaScript fundamentals and concepts by reading this highly recommended book.

View Eloquent JavaScript, 3rd Edition: A Modern... on Amazon

Show steps

Purchase or borrow a copy of 'Eloquent JavaScript, 3rd Edition'.
Set aside dedicated time for reading and understanding the chapters.
Take notes, highlight key concepts, and practice writing code snippets.

Review ES6 Features

Show steps

Ensure you have a strong foundation in ES6 features by reviewing key concepts and practicing their implementation.

Browse courses on JavaScript

Show steps

Go through your course materials or online resources to refresh your memory on ES6 features.
Practice using ES6 features in your code, such as arrow functions, template literals, and spread operators.

Practice with CSS Animations

Show steps

Reinforce your understanding of CSS Animations by practicing with various properties and techniques.

Browse courses on CSS Animations

Show steps

Create a new HTML and CSS file.
Add CSS code to create an animated element.
Experiment with different animation properties, such as duration, delay, and easing.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Build a Simple Flexbox Layout

Show steps

Solidify your understanding of Flexbox by following a guided tutorial to create a simple layout.

Browse courses on Flexbox

Show steps

Find a Flexbox tutorial for beginners.
Follow the tutorial step-by-step, creating a simple Flexbox layout.
Experiment with different Flexbox properties to customize the layout.

Create a React Component

Show steps

Enhance your understanding of React by creating a custom component that handles state, props, and the component lifecycle.

Browse courses on React

Show steps

Plan the functionality and design of your component.
Create a new React project or component in an existing project.
Implement the component's functionality, including state management and lifecycle methods.
Test your component to ensure it works as expected.

Practice with Asynchronous Functions

Show steps

Develop proficiency in asynchronous functions by solving challenges and coding exercises.

Show steps

Find online resources or coding challenges that focus on asynchronous functions.
Attempt to solve the challenges or complete the exercises using asynchronous functions.
Review your solutions and identify areas for improvement.

Build a Portfolio Website

Show steps

Apply your skills to a real-world project by creating a professional portfolio website that showcases your work.

Browse courses on Web Development

Show steps

Gather inspiration and plan the design of your website.
Build the website using HTML, CSS, and JavaScript, utilizing your knowledge of React and CSS animations.
Populate your website with content that demonstrates your skills and accomplishments.
Test and deploy your website, making sure it is responsive and user-friendly.

Career center

Learners who complete The Advanced Web Developer Bootcamp will develop knowledge and skills that may be useful to these careers:

Full-Stack Developer

As a Full Stack Developer, you will be responsible for all aspects of the development process, from designing and building the front-end to developing and maintaining the back-end. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in web development. You will learn how to build responsive applications using modern CSS technologies like flexbox, build JSON APIs using Node, Express, and MongoDB, and master the fundamentals of React, Redux, and D3.

See salaries and explore the career path for Full-Stack Developer

Front-End Developer

As a Front End Developer, you will be responsible for designing and building the user interface of websites and web applications. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in front-end development. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Front-End Developer

Back-End Developer

As a Back End Developer, you will be responsible for developing and maintaining the server-side of websites and web applications. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in back-end development. You will learn how to build JSON APIs using Node, Express, and MongoDB, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Back-End Developer

Web Developer

As a Web Developer, you will be responsible for the design, development, and maintenance of websites. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in web development. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Web Developer

Software Engineer

As a Software Engineer, you will be responsible for designing, developing, and maintaining software applications. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in software development. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Software Engineer

Data Scientist

As a Data Scientist, you will be responsible for collecting, analyzing, and interpreting data to help businesses make better decisions. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in data science. You will learn how to build dynamic visualizations using D3 and SVG, master the fundamentals of React and Redux, and build JSON APIs using Node, Express, and MongoDB.

See salaries and explore the career path for Data Scientist

Data Analyst

As a Data Analyst, you will be responsible for collecting, analyzing, and interpreting data to help businesses make better decisions. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in data analysis. You will learn how to build dynamic visualizations using D3 and SVG, master the fundamentals of React and Redux, and build JSON APIs using Node, Express, and MongoDB.

See salaries and explore the career path for Data Analyst

UX Designer

As a UX Designer, you will be responsible for designing the user experience of websites and web applications. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in UX design. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for UX Designer

UI Designer

As a UI Designer, you will be responsible for designing the user interface of websites and web applications. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in UI design. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for UI Designer

Product Manager

As a Product Manager, you will be responsible for managing the development and launch of new products. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in product management. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Product Manager

Project Manager

As a Project Manager, you will be responsible for planning, executing, and closing projects. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in project management. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Project Manager

Business Analyst

As a Business Analyst, you will be responsible for analyzing business needs and developing solutions to improve business processes. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in business analysis. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Business Analyst

Technical Writer

As a Technical Writer, you will be responsible for writing and editing technical documentation. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in technical writing. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Technical Writer

Teacher

As a Teacher, you will be responsible for teaching students about a variety of subjects. This course can help you succeed in this role by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in education. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Teacher

Consultant

As a Consultant, you will be responsible for providing advice and guidance to businesses on a variety of topics. This course may be useful by providing you with a comprehensive understanding of the latest technologies, tools, and libraries used in consulting. You will learn how to build responsive applications using modern CSS technologies like flexbox, master the fundamentals of React and Redux, and build dynamic visualizations using D3 and SVG.

See salaries and explore the career path for Consultant