Crash Course: Build a Full-Stack Web App in a Weekend!
速成课程:在周末构建一个全栈 Web 应用程序!

A quick, fun, and hands-on introduction to web development. Build a complete app with HTML, CSS, JavaScript, and React!
快速、有趣且动手实践的 Web 开发介绍。使用 HTML、CSS、JavaScript 和 React 构建完整的应用程序!

教程演示🔗

更多前端教程

Join our crash course and swiftly grasp the essentials of modern web application development over a weekend. Through hands-on practice, you’ll engage with comprehensive technology including HTML, CSS, JavaScript, and the React Development Library, progressing from setting up your coding environment to deploying your project. Whether you’re a beginner in programming or a learner eager to explore internet development, this quick tutorial provides an efficient learning path for creative project building. Get ready to innovate and share your web creation in just a few days with this short-term training in full-stack development!
加入我们的速成课程,只需一个周末,您就能快速掌握现代网络开发的基础。通过动手实践,您将使用前端技术如 HTML、CSS、JavaScript 及反应开发库 React,从代码环境搭建到项目部署,构建您的端到端全栈 Web 应用程序。无论您是编程新手还是希望迅速了解互联网应用开发的学习者,这个高效学习和创意项目构建的短期培训都将为您提供职业探索和技术应用的机会。准备好在几天内创造和分享您的创新编程作品了吗?

What you’ll learn 学习内容

  • You WILL build a fun web application in just a few days! No experience needed
    您将在短短几天内构建一个有趣的 Web 应用程序!无需经验
  • You will NOT want to pause the course once you start ;)
    一旦你开始;)你就不想暂停课程
  • You WILL learn the very fundamentals of modern web development (fast!)
    您将学习现代 Web 开发的基础知识(快速!
  • You will NOT master web technologies (that takes years…)
    你不会掌握网络技术(这需要数年时间……
  • You WILL get the experience of building a complete web app
    您将获得构建完整 Web 应用程序的经验
  • You will NOT be able to build complex applications on your own, but small ones
    您将无法自己构建复杂的应用程序,而是构建小型应用程序
  • You WILL discover if web development is a good career path for you
    你会发现 Web 开发是否是一条适合您的职业道路

Requirements 要求

  • No programming experience needed!
    无需编程经验!
  • Any computer works — Windows, macOS or Linux
    任何计算机都可以使用 — Windows、macOS 或 Linux
  • You don’t need to buy any software — we will use the best free code editor in the world
    您无需购买任何软件——我们将使用世界上最好的免费代码编辑器

Description 描述

*** Just released in December 2022 ***
刚刚发布 十二月 2022 ***

“I have already learned more in this class than in a $12,000 coding BootCamp (…). Before taking one of the Bootcamp on Udemy, you should take this class first” – Robert
“我在这门课上学到的东西比在 12,000 美元的编码训练营中学到的还要多(……在参加 Udemy 的训练营之前,您应该先参加这门课“——罗伯特

Do you want to learn the fundamentals of modern web development fast?
您想快速学习现代 Web 开发的基础知识吗?

Do you want to find out if building websites and apps is the right career path for you?
您想知道构建网站和应用程序是否适合您的职业道路吗?

Or maybe you just want to know what your web developer friends do all day?
或者,也许你只是想知道你的 Web 开发人员朋友整天在做什么?

In any of these cases…
在上述任何一种情况下…

Welcome to my “Web Development Crash Course”! Together, we will build a fun, small, but full-stack web application in just a few days.
欢迎来到我的“Web开发速成班”!我们将在短短几天内共同构建一个有趣、小型但全栈的 Web 应用程序。

But why this course? And why is it so short?
但为什么是这门课程呢?为什么这么短?

Well, there are so many 60 and 80-hour-long “complete” web development courses out there, which are great if you want to invest 3 months of your life into finding out if web dev is even right for you or not…
好吧,有很多 60 和 80 小时的“完整”Web 开发课程,如果您想投入 3 个月的时间来了解 Web 开发是否适合您,这些课程非常有用……

I wanted to offer a different approach. A short and fast crash course, where you can dip your toes into the world of HTMLCSSJavaScript, and even React (the most used JavaScript library in the world).
我想提供一种不同的方法。一个简短而快速的速成课程,您可以在其中涉足 HTML、CSS、JavaScript 甚至 React(世界上最常用的 JavaScript 库)的世界。

You can finish it in a weekend (if you have nothing else planned), or you can take a week. But the point is that you can learn the very fundamentals of web development quite fast, and in an engaging, 99% project-based way.
你可以在一个周末完成它(如果你没有其他计划),或者你可以花一个星期。但关键是,您可以非常快速地学习 Web 开发的基础知识,并且以一种引人入胜的、99% 基于项目的方式学习。

And even though this is called a “crash course”, this course teaches you more in 12 hours than I learned in my first 2 years as a web developer!
尽管这被称为“速成课程”,但本课程在 12 小时内教给你的东西比我作为 Web 开发人员的前 2 年学到的还要多!

That’s how condensed, and how valuable, the material is. And the course still maintains the high-quality standard of all my other courses, so that you actually understand what you are learning!
这就是材料的浓缩程度和价值。而且这门课程仍然保持着我所有其他课程的高质量标准,让你真正理解你在学什么!

But you might be thinking: “Is a crash course really right for me?”
但你可能会想:“速成班真的适合我吗?

Well, it all depends on your goals.
嗯,这完全取决于你的目标。

Sure, you will not become a web developer after this short course, and you will not be able to build big web projects (but sometimes that’s true even for those huge 80-hour courses).
当然,在这个短期课程之后,您将不会成为 Web 开发人员,并且您将无法构建大型 Web 项目(但有时即使是那些 80 小时的大型课程也是如此)。

But, at the end of this course, you will have learned and understood the fundamentals of the most important web technologies (HTML, CSS, JavaScript, React). And even more importantly, you will have discovered if you actually like web development and want to pursue it as a (lucrative) career!
但是,在本课程结束时,您将学习并理解最重要的 Web 技术(HTML、CSS、JavaScript、React)的基础知识。更重要的是,您会发现您是否真的喜欢 Web 开发并希望将其作为(有利可图的)职业来追求!

Plus, you will walk away from this course with a super cool web application that you can show to all your friends (please tell them I sent you ;)
另外,您将使用一个超级酷的 Web 应用程序离开本课程,您可以向所有朋友展示该应用程序(请告诉他们我向您发送了;)

All this will enable you to go deeper into the topics that you actually liked, and keep learning and progressing on your own if you like (or of course, you can purchase more specialized courses).
所有这些都将使您能够更深入地了解您真正喜欢的主题,并根据需要继续学习和进步(当然,您可以购买更专业的课程)。

So, have you never written a single line of code in your life?
那么,你这辈子从来没有写过一行代码吗?

You have come to the right place! We will start slowly, step-by-step, and then speed up the pace as we progress through the course.
你来对地方了!我们将慢慢地、一步一步地开始,然后随着课程的进展加快步伐。

So here’s what we’re gonna do in this course:
因此,我们将在本课程中执行以下操作:

  • We will set up your code editor and coding environment together (all for free!)
    我们将一起设置您的代码编辑器和编码环境(全部免费!

  • I will guide you through the basics of the web and web development
    我将指导您了解 Web 和 Web 开发的基础知识

  • Then we slowly start our project, by writing the HTML code (for the page content)
    然后我们通过编写HTML代码(用于页面内容)慢慢开始我们的项目

  • We then style the page and create a layout using CSS
    然后,我们设置页面样式并使用 CSS 创建布局

  • Next we create an online database and API for our application data, using a free service called Supabase
    接下来,我们使用名为 Supabase 的免费服务为我们的应用程序数据创建一个在线数据库和 API

  • To get the data into the application and make it interactive, we learn the fundamentals of JavaScript
    为了将数据导入应用程序并使其具有交互性,我们学习了 JavaScript 的基础知识

  • Writing apps with only JavaScript can be difficult, so we build the app using the React library
    仅使用 JavaScript 编写应用程序可能很困难,因此我们使用 React 库构建应用程序

  • Finally, we deploy the final project to a free service called Netlify
    最后,我们将最终项目部署到一个名为 Netlify 的免费服务中

  • DONE! You can now share the URL of your project with everyone :)
    做!现在,您可以与所有人共享项目的 URL,:)

Already know HTML, CSS, or JavaScript?
已经了解 HTML、CSS 或 JavaScript?

No problem! You can still get something from the course. For example, you can watch only the section on “React” and use the downloadable code from the previous section as your starting point.
没关系!您仍然可以从课程中获得一些东西。例如,您可以只观看“React”部分,并使用上一节中的可下载代码作为起点。

If all this sounds great, then join me on this adventure right now! See you on the inside :)
如果这一切听起来都很棒,那么现在就和我一起冒险吧!内:)见

Who this course is for:
本课程适用于谁:

  • Take this course if you need a quick introduction to modern web development
    如果您需要快速了解现代 Web 开发,请参加本课程
  • Take this course if you want to find out if web development is a good career choice
    如果您想了解 Web 开发是否是一个好的职业选择,请参加本课程
  • Take this course if you want to impress your friends by building a super cool web app in a few days!
    如果您想在几天内构建一个超酷的网络应用程序来给您的朋友留下深刻印象,请参加本课程!

更多前端教程

发表回复

后才能评论

尊敬的用户,您好!由于部分培训机构和留学生的举报,近期导致网站大量链接暂时失效。对此给您带来的不便,我们深表歉意。任何链接失效的资源,欢迎您添加侧边栏二维码随时反馈,我们将在48小时内为您提供新的网盘链接。如果您对此不便感到不满,您也可在48小时内申请无理由退款。感谢您的理解与支持!

Windows播放器推荐:Potplayer Potplayer 是免费的 Windows 播放器,支持双字幕和自动翻译功能。以下是操作指南: 挂载字幕 加载中文字幕:右击选择 字幕 -> 字幕设置,取消“只匹配文件名字幕”选项。可调整字幕颜色、位置和大小。 双字幕设置:右击 字幕 -> 选择字幕 -> 次字幕输出,设置主字幕和次字幕。 自动翻译 若可访问 Google 翻译服务,选择 字幕 -> 实时字幕翻译,勾选 总是使用 和 Google Translate,即可实时翻译英文字幕。 Potplayer 让观看更智能,学习体验升级。

最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。 若排除这种情况,可联络站长解决。

如果您已经成功付款但是网站没有弹出成功提示,请联系站长提供付款信息为您处理

源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。请您在购买获取之前确认好 是您所需要的资源