*Updated* Web Development Secrets 2023 - Crp, Http, Ajax Etc

Understand the Critical Rendering Path, AJAX, HTTP and how to fetch data from a server. Novice to pro in easy steps.

What you'll learn

128+ lectures and 7.5+ hours of well-structured content

Speed up your website (& increase conversion) 2021

*Download lectures (for offline viewing)

Understand the DOM, CSSOM, Render Tree and Layout

Master HTTP, HTTP/2 and AJAX

Learn how to optimize any website for speed by writing better code

Learn where to write your JavaScript for optimized performance (we take an advanced look at async, preload, defer, etc.)

Understand the Network Panel, Performance Panel and Audit Lighthouse functions within DevTools

Understand HTTP, TCP, Data Packets and a whole bunch more!

Real examples of how AJAX works (we use both the XMLHttpRequest object and the newer Fetch API)

Master the Critical Rendering Path

Understand what are Render Blocking Resources and how we solve this problem

Skills that will help you to apply for jobs like Web Developer, Front End Developer, Javascript Developer, and Full Stack Developer

From beginner to expert (advanced +)

Ongoing updates to keep you current

You will emerge an expert

Write JavaScript and understand what a Polyfill does

Write your own Polyfill

Introduction to HTTP/2 and how it improves the current HTTP/1.1 protocol

How to use a text editor that is completely free

Gives you depth of knowledge to boost your ability and confidence

All the techniques used by professional programmers

Support from me

Bonus lectures + practical examples

Requirements

A strong desire to become a full stack web developer

Basic HTML, CSS and JavaScript will be helpful, but not absolutely necessary

Desire to KNOW the full process of how your webpage works behind the scenes

Desire to KNOW how to use DevTools – Performance and Network Panels

A computer is required as you need to code alongside me to learn effectively

Description

Why 1-second matters hugely?A one-second delay in page load time yields:30% fewer page viewsLess customer satisfactionLoss in conversionsAside from influencing ranking well with Google, a few extra seconds makes a big difference to viewer attention, interest, conversions and hence profit.Let me share my web developer secrets with youUnderstanding the Critical Rendering Path will enable you to become an awesome programmer. Take control through understanding. Delivering a fast web experience requires a lot of work by the browser. Most of this work is hidden from web developers: we write the markup, and a nice looking page comes out on the screen. But how exactly does the browser go from consuming our HTML, CSS, and JavaScript to rendered pixels on the screen? By understanding this, you will be able to write better code in order to boost your website traffic, know how to precision fix and tweak behaviour and performance, improve your market penetration and your margins. You’ll also gain an advantages over other developers who seem to just push the buttons without fully appreciating what is happening.What this course covers?In this course you’ll learn about the Critical Rendering Path. This refers to the set of steps browsers must take to fetch and then convert HTML, CSS and JavaScript into living, breathing websites. From there, you’ll start exploring and experimenting with tools to measure performance. You’ll learn simple, yet very powerful strategies to deliver the first pixels to the screen as early as possible.Knowledge of the CRP is incredibly useful for understanding how a site's performance can be improved. There are various stages to the CRP, such as constructing the DOM, constructing the CSSOM, running JavaScript, creating the Render Tree, generating the Layout and finally Painting pixels to the screen. As you can see, this covers a whole bunch of interesting material.By the end of this course, you'll be able to “speak” CRP by gaining an understanding of how to fetch data from a server and then get that data to your user as quickly as possible. We dig deeper in every lecture, learning about things like HTTP, TCP, data packets, render blocking resources, and a whole bunch more! This course has many bonus lectures which extend your knowledge base and test your skills.Through practical examples, this course helps you understand the CRP piece by piece. And we use the latest and best features of JavaScript and browsers (like the new Fetch API) along the way so you can stay ahead of the pack.*** A comprehensive Web Development course on Udemy ***Successful programmers know more than rote learning a few lines of code. They also know the fundamentals of how web development works behind the scenes. If you’re wanting to become a full stack developer, you need to know how to deal with server requests and responses, loading, scripting, rendering, layout, and the painting process of the pixels to the screen.I want you to become a successful programming Grandmaster.I want you to be able to apply what your learn in this course to your webpage.This course is perfect for you.DescriptionHi there, my name is Clyde and together we’re going to learn about the entire critical rendering path and apply it to practical situations. We're going to practice and learn and emerge confident to tackle any challenges modern programs and websites throw at us.After completing a few university degrees, and post grad studies, I developed a fascination for web design and software languages. For several years I have immersed myself in this. I spent a fair bit on top courses and went on to apply the knowledge practically. I recognized gaps in some of the courses I’ve taken and hence my course teaches what I wish I was taught. My intention is to share the knowledge with you in an easy to follow manner, so that we can benefit together. You benefit form learning, and I from sharing in your success.This course is for beginners and for intermediates.A unique viewUnderstanding web development is a vast topic. To get you up to speed, I’ve spent months thinking about where to focus content and how to deliver it to you in the best possible way.You will learn "why" things work and not just "how". Understanding the fundamentals of web development is important as it will allow you to write better code. And trust me, every website encounters bugs and slow rendering times, and without understanding the fundamentals you will be totally lost.How is this course different?There are lots of great courses on web development. Pity they never get into the detail about how we get our website to your users screen as quickly as possible – which covers full stack development.In this course, I focus on true web performance. This includes server requests and responses, loading, scripting, rendering, layout, and the painting of the pixels to the screen.Practice makes perfectTheory is theory … but there’s nothing like getting behind your computer and typing in code. That’s why we will be coding, laughing and pulling out our hair together as we code real life websites and exercises during this course.I love practical examples, which is why we build simple pages and analyze the CRP together by using the Network Panel, Performance Panel and Audit Lighthouse within DevTools.Is this course for you?Absolutely.It doesn't matter where you are in your web development journey. It's suitable for all levels.Still unsure? If you fit in any of these categories then this course is perfect for you:Student #1: You want to dabble in the world of programming: learning the fundamentals of HTTP, AJAX, Data Packets and Rendering will allow you to extend this knowledge to any languageStudent #2: You want to gain a solid understanding of web performanceStudent #3: You want to start using backend frameworks like Node.js, which are heavily dependent on having a deeper knowledge about how to make AJAX requests, manipulate the response and then deliver it to the screenStudent #4: You kinda know what the Critical Rendering Path is, but have little knowledge about how it works behind the scenes, and how to practically implement it in your codeStudent #5: You have taken other courses in web development but just don’t feel like you’ve grasped itWHY START NOW?Right this second, your competitors are learning how to become better web developers.Web development is a blazing hot topic at the moment. But you have a distinct advantage. This course offers memorable learning topics, actionable tactics and real-world examples.Lets get started!What do you get?· Lifetime access to all tutorial videos. No fees or monthly subscriptions.· Q&A support.· Quizzes and challenges to help you learn.Let's get excited about becoming a professional web developer, and to be able to confidently apply it to your own websites.See you in the lectures.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Course Overview

Lecture 3 What this course covers

Lecture 4 How browsers used to make data requests

Lecture 5 AJAX - introduction

Lecture 6 Is AJAX still relevant today?

Lecture 7 Quick step back

Lecture 8 XMLHttpRequest - introduction

Lecture 9 Pause: what is the console

Lecture 10 Building the XMLHttpRequest object

Lecture 11 Dealing with the response data

Lecture 12 Storage and files

Lecture 13 Another example - displaying time from a server

Lecture 14 Building our custom time function

Lecture 15 Is order important?

Lecture 16 Another example - fetching an image and persons name

Lecture 17 Defining our requestListener function

Lecture 18 XMLHttpRequest - summary of our picture and name example

Lecture 19 Fetch - introduction

Lecture 20 Fetch - setting it up

Lecture 21 Fetch - what is the .json() method

Lecture 22 Fetch - with POST

Lecture 23 Replacing XMLHttpRequest with Fetch for our picture and name example

Lecture 24 Conclusion

Section 2: HTTP protocol, TCP and Packets

Lecture 25 The Browser's main functionality

Lecture 26 Browsers and W3C

Lecture 27 Browsers request - intro

Lecture 28 Packets

Lecture 29 Packets - 5 Layers Explained

Lecture 30 Packets - Example

Lecture 31 HTTP Protocol - Intro

Lecture 32 HTTP - Request and Response

Lecture 33 Take a step back - this stuff is practical

Section 3: Advanced - Building a Custom Polyfill

Lecture 34 Quick caveat

Lecture 35 Before you continue …

Lecture 36 What is a polyfill?

Lecture 37 Testing whether the forEach() method exists in our Browser

Lecture 38 What is forEach()

Lecture 39 Practical example of forEach()

Lecture 40 Custom forEach() polyfill - introduction

Lecture 41 Custom forEach() polyfill - first step

Lecture 42 Wait …

Lecture 43 Custom forEach() polyfill - callback function

Lecture 44 What is THIS

Lecture 45 Custom forEach() polyfill - final

Lecture 46 Outro

Section 4: Critical Rendering Path - DOM, CSSOM, Render Tree

Lecture 47 Introduction

Lecture 48 JS Engine, Rendering Engine and the glue that holds it all together (Browser)

Lecture 49 How the Browser works (the steps it takes to fetch data and display it)

Lecture 50 Critical Rendering Path - Introduction

Lecture 51 Critical Rendering Path Overview

Lecture 52 Constructing the DOM - Part 1

Lecture 53 Constructing the DOM - Part 2

Lecture 54 Quick Recap

Lecture 55 Performance Tab - DevTools

Lecture 56 Call Tree - an alternative way to analyse your website's activities

Lecture 57 Bottom-Up & Event Log - an alternative way to analyse your website's activities

Lecture 58 CSSOM - Introduction

Lecture 59 Why do we need to have a CSS Tree?

Lecture 60 How to view the CSSOM process for your website - Recalculate Style

Lecture 61 Render Tree - Introduction

Lecture 62 Render Tree - Challenge

Lecture 63 Render Tree - Solution

Lecture 64 Quick Recap - Render Tree

Lecture 65 Comparing the DOM, CSSOM and Render Tree

Lecture 66 Render Tree - Layout

Lecture 67 Viewing the Layout process in DevTools

Lecture 68 Render Tree - Paint

Lecture 69 Step Back

Section 5: Render Blocking Resources

Lecture 70 Render Blocking Resources - Intro

Lecture 71 How to make CSS non-render blocking (hint: Media Queries)

Lecture 72 Media Types - Example

Lecture 73 How to reference your CSS files

Lecture 74 Is JavaScript render blocking?

Lecture 75 JavaScript and the DOM

Lecture 76 The order of your code matters - part 1

Lecture 77 The order of your code matters - part 2 (solution)

Lecture 78 JavaScript and the CSSOM

Lecture 79 Example of JavaScript having to wait for the CSS

Lecture 80 Step Back: DOM vs CSSOM vs JavaScript

Lecture 81 JavaScript is render blocking

Lecture 82 Approach 1: Placing JavaScript at the bottom of your page

Lecture 83 Q&A time

Lecture 84 Approach 2: Using Async

Lecture 85 Comparing Approach 1 (Bottom) vs Approach 2 (Async)

Lecture 86 Approach 3: Defer

Lecture 87 Comparing Approach 2 (Async) vs Approach 3 (Defer)

Lecture 88 Approach 4: Custom event listener - part 1

Lecture 89 Approach 4: Custom event listener - part 2 (+ lets analyze the entire render)

Lecture 90 Async vs Defer vs Custom

Lecture 91 Approach 5: Preload

Lecture 92 Quick caveat

Lecture 93 Preload - More Information

Lecture 94 Preload & images and how they affect the CRP

Lecture 95 Summary of where we can place our JS to improve the CRP

Lecture 96 Overview - One Page

Lecture 97 Introduction to speculative parsing

Lecture 98 What is speculative parsing

Lecture 99 Speculative Parsing - Quick Review

Section 6: Having Fun: Lets Analyze the Critical Rendering Path Together

Lecture 100 Section introduction

Lecture 101 Why is the Network Panel important

Lecture 102 Introduction to Network Panel

Lecture 103 What do the all the columns mean in the Network Panel

Lecture 104 Response and Request Headers

Lecture 105 Timing tab and waterfall stack

Lecture 106 3 most common network requests you'll see

Lecture 107 Time phases - introduction

Lecture 108 Lifecycle of a request

Lecture 109 Time phases - detailed explanation

Lecture 110 CDN - an introduction

Lecture 111 Analyzing File Requests in the Network Panel

Lecture 112 Network Panel - High Level Overview

Lecture 113 Analyzing our file's CRP - no CSS and no JS

Lecture 114 What is the size column?

Lecture 115 How to identify number of critical resources and server round trips

Lecture 116 Lets add JavaScript and CSS

Lecture 117 Rendering our new file with JavaScript and CSS

Lecture 118 Impact that JavaScript and CSS has on our CRP

Lecture 119 Inline JavaScript

Lecture 120 Adding ASYNC to our file, and its impact on the CRP

Lecture 121 Steps to take to optimize the Critical Rendering Path

Lecture 122 Audit Lighthouse to the rescue

Lecture 123 Audit Lighthouse - Introduction

Lecture 124 Audit Lighthouse - Example

Lecture 125 Why is mobile speed often slower than desktop speed?

Section 7: FYI: What is HTTP/2

Lecture 126 Section intro

Lecture 127 HTTP/1.1 - Recap

Lecture 128 HTTP/2 - where did it come from?

Lecture 129 HTTP/2 - Did you know?

Lecture 130 HTTP/2 - what is it?

Lecture 131 Quick comment on HTTP/2

Lecture 132 HTTP/2 Questions and Answers

Lecture 133 Quick word about HTTP/3

Section 8: Closing Comments

Lecture 134 Well Done

Lecture 135 Bonus Lecture - where to next?

Anyone who has completed my “*NEW* JavaScript Complete Grandmaster” course,YES: This course is for beginners. Aimed at people new to the world of web development. No previous JavaScript experience is necessary,NO: This course is NOT only for beginners. It is a complete beginner to advanced master course that is suitable for intermediates who know the basics and have an idea about how a browser fetches data from a server and displays that to a page. Experienced students sometimes prefer to skip a section that they are very familiar with,YES: This course is for someone wanting to be a professional, to be expert and confident in the entire rendering process,Those who want to learn modern coding techniques to speed your page loading experience without third party libraries and frameworks,Those interested in building their own frameworks, or being better able to learn from the source code of other well-known frameworks and libraries,Those wanting to start using frameworks (e.g. like Angular or Node) that are heavily reliant on JavaScript and knowing the process flow of back-end web development,Those who have some knowledge of web development, but little knowledge about how it works behind the scenes, and how to practically implement best practices in their websites