This is an in-depth guide that goes over every major technology that has to do with web development, from languages to frameworks to utilities.

Content Guide Of Videos/Courses:
https://www.traversymedia.com/guide

Premium eBook Version:
https://traversy.gumroad.com/l/web-dev-guide

Design For Developers Repo:
https://github.com/bradtraversy/design-resources-for-developers

My Web Development Courses:
https://www.traversymedia.com/

Timestamps:

0:00 – Intro
1:30 – About This Guide
3:38 – Overall Goals
6:23 – Types Of Web Developers
9:05 – The Essentials
13:55 – HTML & CSS
19:44 – JavaScript
23:17 – Sass & Post CSS
25:23 – CSS Frameworks
28:27 – UI Design Principles
30:57 – Design Software
33:01 – Tools & Utilities
39:19 – Helpful AI Tools
42:15 – Front-End Deployment
45:27 – Foundational Front-End Developer
48:54 – Your Next Path
51:56 – Front-End Build Tools
55:12 – Front-End Frameworks & Ecosystems
57:50 – React
1:01:24 – Vue
1:03:53 – Angular
1:06:08 – Svelte
1:07:57 – SolidJS
1:09:58 – TypeScript
1:11:48 – UI Kits & Component Libraries
1:15:01 – Testing
1:16:43 – Web APIs
1:18:56 – Full-Stack Frameworks
1:25:36 – Static Site Generators
1:30:26 – Headless CMS
1:34:02 – The Jamstack
1:24:38 – Alpine,js & Lit
1:36:41 – Visualization & Animation
1:38:33 – No-Code Tools
1:40:02 – Front-End Superstar
1:42:13 – Server-Side Languages
1:50:29 – Server-Side Frameworks
2:05:35 – Relational vs NoSQL Databases
2:09:02 – Database Management Systems
2:19:12 – ORM (Object Relational Mapping)
2:22:11 – REST API & GraphQL
2:25:15 – Authentication & Authorization
2:28:54 – Full-Stack & Back-End Deployment
2:32:47 – DevOps Skills
2:37:06 – Back-End / Full-Stack Superstar
2:39:57 – Mobile Development
2:43:18 – Progressive Web Apps (PWA)
2:44:03 – Desktop Applications
2:46:17 – Web Assembly (WASM)
2:47:25 – Advanced AI
2:50:44 – Web3
2:52:58 – Outro

source

44 Comments

  1. Sorry it's so long this year. Don't let that overwhelm you. It's not that there are that many new technologies. I just decided to talk a bit more about everything 😊Skip around and use the timestamps if needed.

  9. 🎯 Key Takeaways for quick navigation:

    01:12 🛠️ The video covers a broad range of technologies, tools, and concepts in web development.
    02:22 🤖 The content aims to be objective, but personal preferences of the presenter might be highlighted.
    03:02 📘 Additional resources include a content guide on the presenter's website and a premium eBook.
    04:09 🏆 Various goals in web development include career advancement, freelancing, entrepreneurship, personal projects, and future-proofing skills.
    06:27 🌐 Three main types of developers: front end, back end, and full stack. Each requires distinct skills and technologies.
    11:40 🖥️ Essential tools include a computer, text editor/IDE (e.g., Visual Studio Code), browser (Chrome, Firefox), and a terminal for command-line operations.
    14:11 🧱 HTML and CSS are fundamental for web development, forming the basis for creating structured content and styling.
    17:07 📐 Learn CSS layout techniques, such as the Box model, flexbox, and CSS grid, for building responsive and dynamic designs.
    22:12 🆕 ES6 introduced important JavaScript features like arrow functions, classes, template literals, destructuring, and array methods.
    22:39 🕒 Understanding asynchronous JavaScript is crucial for web development, especially when working with HTTP requests.
    23:32 🎨 CSS pre-processors like Sass (SCSS) can enhance CSS capabilities by adding nesting, variables, and more. Consider the need for Sass given upcoming CSS features.
    24:52 📦 PostCSS offers similar features to Sass but as JavaScript plugins. It's often integrated with build tools like Webpack.
    25:20 📦 CSS frameworks (e.g., Tailwind, Bootstrap, Materialize) aid in front-end development. Tailwind is utility-based, while Bootstrap is component-based with JavaScript features.
    26:58 🎨 Choose a CSS framework based on your project's customization needs. Bootstrap offers more pre-defined styles, while Tailwind allows for more flexibility.
    31:12 🎨 Learn to create design mock-ups using tools like Adobe XD, Figma, Sketch, or InVision. These are crucial for building effective UIs.
    34:23 🛠️ Familiarize yourself with browser developer tools for debugging, inspecting elements, network analysis, and application data storage.
    35:44 📦 Use Node Package Manager (npm) to install packages, libraries, and tools in your projects. Understand basic npm commands.
    36:52 🔗 Learn Markdown for creating and formatting text, especially useful for creating readme files in repositories.
    38:13 🛠️ Utilize extensions in text editors/IDEs like VS Code to enhance productivity. Examples include Emmet, Live Server, Prettier, ESLint, etc.
    39:41 🤖 GitHub Copilot and ChatGPT represent AI tools aiding programming tasks with code suggestions, examples, and debugging help.
    42:22 🌐 Learn to host websites using platforms like Netlify, Vercel, GitHub Pages, or cPanel. Understand domain registration and connection.
    45:03 🛠️ Set up email hosting, SQL databases, and FTP accounts for web development services.
    45:32 🌐 Foundational front-end developers in 2023 should consider learning a front-end framework and modern tooling.
    46:01 💼 Freelance route: Start working on clients, but know your limitations, focus on small businesses' simpler websites.
    48:46 🌐 Deployment: Have a preferred domain name provider and hosting service for deploying projects.
    49:00 🎨 Optional: Knowledge of CSS frameworks like Tailwind or Bootstrap, and familiarity with SASS.
    50:35 🌐 Back-end Development: Learn server-side languages (PHP, Python, etc.) or move to Node.js for APIs and microservices.
    50:48 🛠️ Front-end Development: Master front-end tooling, embrace front-end Frameworks for creating dynamic interfaces.
    52:00 🛠️ Front-end Tooling: Explore build tools (Webpack, Parcel, Vite, Snowpack) to enhance front-end development workflow.
    53:23 🛠️ Webpack: Established module bundler for JavaScript files, requires some configuration.
    53:52 🛠️ Parcel: Newer module bundler with less configuration, more beginner-friendly.
    54:21 🛠️ Vite: Fast build tool leveraging ES modules, uses Rollup for production.
    56:12 💡 React: Popular, component-based, JSX syntax, React Router for routing, various State Management options.
    57:08 💡 Vue.js: Easier learning curve, component-based, Vue CLI, Vue Router, Vuex for state management.
    59:17 💡 Svelte: Newer framework, compiles to efficient vanilla JavaScript, smaller bundle size, fast performance.
    01:06:38 🌐 Svelte is a front-end compiler and competitor to other frameworks with an easy learning curve, integrating well into JS libraries. Svelte Kit includes routing, state management, and server-side rendering.
    01:08:12 🟢 Solid.js is a reactive library like React, using a compiler for fast performance. It updates the UI in real time as the app's state changes.
    01:09:22 🧪 Learning unit testing can save time and improve code quality. Popular testing libraries include Jest, Mocha, and Cypress.
    01:11:24 🕹️ Familiarity with common browser APIs (canvas, geolocation, speech, etc.) is crucial for web developers to enhance user experience.
    01:20:56 🔒 Full-stack meta frameworks like Redwood and Blitz built on top of Next.js offer complete solutions for web development, combining front-end and back-end technologies.
    01:26:00 🚀 Static site generators (e.g., Astro, Gatsby) create optimized, high-performance websites by pre-fetching data and compiling into static HTML at build time.
    01:30:32 📄 Headless Content Management Systems (CMS) facilitate content editing without touching code; Examples: Strapi (node.js-based), Sanity.io, Keystone (with GraphQL), Contentful, WordPress (headless mode).
    01:34:13 🚀 Introduction to the JAMstack architecture emphasizing static site generators, serverless functions, and fast, scalable web development.
    01:36:17 🎨 Introduction to animation libraries: Motion UI (Sass-based), Framer Motion (React animation), Three.js (powerful 3D graphics), GSAP (GreenSock animation platform).
    01:38:36 💼 No-code tools like WordPress, Webflow, Wix, Kajabi, Shopify offer efficient options for creating websites and applications without extensive coding knowledge.
    01:40:09 💡 Front-end engineers should be proficient in chosen front-end framework, understand data fetching, and HTTP status codes, with bonus skills including TypeScript, Jamstack, and testing.
    01:42:27 🧠 Overview of popular back-end programming languages: JavaScript (Node.js), Python (Django, Flask), PHP (Laravel, WordPress), C# (.NET), Go, Ruby (Ruby on Rails), Java, Kotlin, Rust, Scala, Erlang.
    01:49:00 🏗️ Swift, Scala, and Erlang briefly mentioned as programming languages used for specific purposes, such as mobile development, data analytics, and concurrency.
    01:50:09 📱 Swift is a preferred choice for mobile app development (iOS), not recommended for web development.
    01:50:36 🛤️ Back-end web frameworks offer tools for creating APIs, microservices, and applications. They can be opinionated or unopinionated.
    01:51:19 🏗️ MVC (Model-View-Controller) is a common design pattern used in many frameworks for structuring applications.
    01:52:14 🛤️ Node.js: Express is unopinionated, Fastify is high-performance, Adonis and Nest.js are full-featured and opinionated frameworks.
    01:55:03 🐍 Python: Django is feature-rich and opinionated, Flask is minimalistic and flexible, FastAPI is fast and suitable for APIs.
    02:00:22 💎 Ruby: Ruby on Rails is powerful for rapid development, Sinatra is minimalistic for smaller projects.
    02:02:07 🎉 Golang: Jin, Beego, and Echo are Golang frameworks with varying features and performance.
    02:04:09 ☕ Java: Spring MVC and Struts are popular Java frameworks, Blade is suitable for smaller projects.
    02:05:17 🌐 C#: ASP.NET Core is versatile and cross-platform, Entity Framework is a widely used ORM, C# is reliable for full-stack development.
    02:05:56 🦀 Rust: Rocket provides fast and secure web apps with a type-safe framework.
    02:11:39 🍃 NoSQL Databases: MongoDB is popular for its JSON-like structure and scalability, suitable for full-stack JavaScript apps.
    02:12:24 🏢 MongoDB Atlas and Other NoSQL Databases:
    02:14:12 ☁️ Serverless and Cloud Databases:
    02:16:32 🗄️ Types of Databases for Small Projects:
    02:19:15 💾 Object-Relational Mapping (ORMs):
    02:25:22 🔐 Authentication and Authorization:
    02:29:02 🚀 Deploying Full-Stack Applications:
    02:34:13 📦 Docker is a powerful containerization platform for deploying applications consistently across different environments.
    02:35:22 🖼️ Cloudinary is a useful service for storing, optimizing, and delivering media assets in various sizes for different devices.
    02:36:15 ⚙️ Continuous Integration and Deployment (CI/CD) ensures smooth code integration and deployment using tools like Jenkins and Travis CI.
    02:37:36 📚 Focus on the essentials: Learn a server-side programming language, a framework, and how to work with databases and REST APIs.
    02:38:44 💻 Proficiency with terminals and command-line navigation is crucial for efficient development.
    02:39:57 📡 Understand REST APIs, HTTP requests, and authentication mechanisms like sessions, cookies, JWT, and OAuth.
    02:42:25 🌐 Progressive Web Apps (PWAs) leverage modern web technologies to provide app-like experiences across devices.
    02:43:57 🖥️ Electron and other frameworks allow building desktop applications using web technologies.
    02:47:29 🔮 AI and chatbots, along with code generators, are expected to be significant trends in the development landscape.

    Made with HARPA AI

  11. إذأ كنت مبرمجاً، أو مطوّراً للنظم البرمجية، أو مهندس حاسوب ، أو أي شخص محترف في علوم الكمبيوتر والتقنيات، عليك أن تشاهد هذا العرض الرائع – أفضل ما يمكن أن تشاهده في 2023!

    طويل ولكن مفيد، وممتع جداّ، للمختص المحترف

    يعطيك نظرة شاملة ، من (ارتفاع 1000 كيلومتر)، على احدث التطورات و التقنيات واﻷدوات التقنية لبرمجة وهندسة البرمجيات في 2023

    المحترف المختص لن يتفق مع كل ما جاء في العرض الواسع ، غير أن شدة تواضع الرجل واحاطته بالموضوع على اتساعه

    Thank you for (Web Development In 2023 – A Practical Guide) it is very practical, and great effort. . Well done, thanks.

  13. Tss.. no thanks when in comes to JS, C# with Blazor is all you need (or maybe the upcoming PyScript, in python looks promising)! Webassembly is the way of the future!

  16. woooww Man thank you so much, you just open my eyes and I now know what to do 100% to move forward, the most precise and in depth video I ever see on internet about WD world.. Thanks a lots, all your hard work is much appreciated.. 🤩🤩🤩🤩

  22. I watched this 4 months ago when I started learning. It was too overwhelming at the time.

    But after 4months and coming across the video…I can see that you are a god send…

    I appreciate this video so much. You helped answer all my questions as a new aspiring developer. I’m going the self taught route and learned html, css, and JavaScript. I also learned some git and Linux. But I have been lost lately about “what’s next? Am I good enough to learn a framework? Should I learn it? Why? I didn’t know that there were specific developers. It’s common sense but it didn’t cross my mind. I assumed every dev knows the same thing.

    Again you are a god send. 🙂 much appreciated my guy!

  29. Great vid. There is a category you should inclide though and that's nocode/locode solutions like Bubble and Flutterflow.

    These are making it easy for startups to get an MVP up and running on a shoestring budget.

Leave A Reply

Please enter your comment!
Please enter your name here