トラック Full Stack Web Development with MERN Stack - 修了証付きオンライン学習

Full Stack Web Development with MERN Stack

Intermediate

0.0

0 reviews

1 Learners

Learn how to build complete web applications from scratch using HTML, CSS, JavaScript, React, Node.js, Express.js, and MongoDB. Create user interfaces…

156

Chapters

Learning hours

118

Assignments

AI Assistant

Shareable Certificate

成果

Track content

Related courses and projects

推薦の声

特徴

価格

成果

Track content

Related courses and projects

推薦の声

特徴

価格

学習内容

Understand how the web works and how frontend, backend, and databases connect

Create dynamic user interfaces with React

Connect frontend and backend to build complete applications

Build web pages using HTML and style them with CSS

Build servers and APIs with Node.js and Express.js

Organize code and structure fullstack projects

Add interactivity and logic using JavaScript

Store and manage data using MongoDB

Learning track content

What Is the Web and How It Works

Frontend vs Backend

What Is Fullstack Development

Technologies You Will Use in This Track

How Everything Works Together

Why HTML Matters in Web Development

Basic HTML Document Structure

Understanding Tags, Elements, and Attributes

Challenge: Structure an HTML Document

Using Headings and Paragraphs

Challenge: Structure Text Content

Working with Links

Using Buttons

Creating and Using Lists in HTML

Challenge: Structure Content with Lists

Working with Images in HTML

Challenge: Insert Images

Creating and Structuring HTML Tables

Challenge: Work with Tables

Building HTML Forms

Challenge: Build a Web Form

Using Form Inputs

Labeling Form Inputs

Challenge: Apply Form Inputs and Labels

HTML Input Attributes for Enhanced Functionality

Semantic HTML and Page Structure

Challenge: Implement Semantic Elements

Building a Complete Website with HTML

What CSS Is and Why It Matters

Connecting CSS to HTML

Basic CSS Selectors

Styling Text and Colors

Adding Hover Effects

Challenge: Style Your First Web Page

Text Formatting for Better Readability

Working with Fonts and Font Properties

Adding Custom Fonts

Challenge: Improve a Blog Article Design

Understanding the Box Model in a Practical Way

Display Property Block, Inline, and Inline Block

Challenge: Fix a Broken Layout

Why Flexbox Exists

Controlling Direction

Justifying Content Horizontally

Aligning Items Vertically

Working with Flex Items

Using Background Colors

Applying Background Images

Adding Shadows for Depth

Challenge: Create a Modern Card Component

What React Is and Why It Is Used

Understanding React Components

JSX Basics in React

Rendering Elements in React

Challenge: Render an Element in React

Passing Data with Props

Challenge: Create Functional Components

Conditional Rendering in React

Challenge: Implement Conditional Rendering in Chat Notification

Challenge: Implement Conditional Rendering in Bank Alert

Rendering Lists of Data in React

Challenge: Display Data Collections

React Fundamentals Wrap Up

Managing State with useState

Challenge: Toggle Visibility with State

Handling Side Effects with useEffect

Challenge: Fetch and Display Data

React Hooks Basics Wrap Up

Styling Options in React

Using Inline Styles in React

Styling Components with External CSS

Challenge: Style a React Application

Setting Up and Running a React Project with Vite

Understanding the React Project Structure

React Project Setup Wrap Up

What Is Node.js?

Node.js vs Browser JavaScript

Key Advantages of Using Node.js

Installing Node.js

Running JavaScript Files

Using the Node.js REPL

Creating Your First Node.js App

Working with process

Understanding __dirname and __filename

What Are Modules?

How Node.js Loads Modules

Exporting with module.exports

Importing with require

Relative Paths in require

Exporting with export and export default

Importing with import

Mixing CommonJS and ES Modules

Working with the fs Module

Manipulating Paths with the path Module

Getting System Info with the os Module

Reading Files

Writing Files

Updating / Appending Files

Using Files as Simple Storage

Initializing a Project with npm

Installing and Using External Packages

Updating and Removing Packages

What Are Console Applications

Building Command Line Interface Apps

Using Commander Module

What Is Express.js and Why It Exists

Creating Your First Server

Your First Route

Understanding Multiple Routes

Request and Response Basics

Sending JSON Responses

Route Parameters

Query Parameters

Receiving Data from Client

Introduction to Middleware

Creating Custom Middleware

Building GET Endpoints for API

Creating Data with POST for API

Updating and Deleting Data

Handling Errors in Express

Organizing Express Code

Testing Your API

Why Backends Need Databases

What Is MongoDB?

Setting Up MongoDB

Connecting to MongoDB

Introduction to Mongoose

Creating a Model

Creating Data with POST

Reading Data with GET

Updating Data

Deleting Data

Connecting Database to Existing API (GET)

Connecting Database to Existing API (POST, UPDATE, DELETE)

Basic Validation with Mongoose

Organizing Database Code

Final Words

あなたのテックスキルを強化！

最大55％オフで

Features:

*Tracks not included in Pro plan

500+ 人気コース最先端のAIコパイロット

パーソナライズされた学習トラック40+ 実践的なプロジェクト

選択された割引イントロプランが終了する前にキャンセルしない場合、Codefinityが自動的に課金することを承認します $104 3か月ごと キャンセルするまで。キャンセルおよび返金ポリシーの詳細は、定期購読の条件.

Recommended Courses and Projects

究極のHTML

HTMLの基本を学びましょう。HTMLはすべてのウェブサイトの基盤です。タグや属性を使ってコンテンツを構造化し、明確なドキュメントレイアウトを構築し、画像、リンク、テーブルを追加します。入力やインタラクションを取得するためのアクセシブルでユーザーフレンドリーなフォームを作成します。ベストプラクティスに従いながら、構造化され機能的なウェブページの作成を実践します。HTMLを習得してウェブ開発の第一歩を踏み出しましょう。

JavaScript入門

React入門

Reactを使用したユーザーインターフェース構築の基礎を学びます。コンポーネント、JSX、データフロー、状態管理、日常的なReactアプリケーションで使用される副作用に焦点を当てます。

CSSの基礎

ウェブページの外観と雰囲気を変えるスタイリング言語であるCSSの基本を習得します。テキストスタイル、色、間隔、ボックスモデル、Flexbox、装飾効果などのコアコンセプトを探求します。視覚的に魅力的で構造化されたウェブページを作成するスキルを身につけます。

HTMLの基本

HTMLの基本を習得し、構造化され、アクセシブルなウェブコンテンツを作成します。タグ、要素、属性を使用してドキュメントを構造化する方法を学びます。テキスト、リスト、画像、音声、動画を自在に扱い、ウェブページを充実させます。整理されたデータのためのテーブルや、ユーザー入力・インタラクションのためのフォームを作成します。アクセシビリティを高めるセマンティックHTMLを理解し、基礎から完全で機能的なウェブサイト構造を構築します。

JavaScriptデータ構造

JavaScriptでデータを自信を持って扱うために、オブジェクトと配列を習得します。オブジェクトのプロパティやメソッドの作成、アクセス、管理方法を効果的に理解します。イテレーション、クローン、分割代入などの高度なオブジェクト操作技術を学び、よりクリーンなコードを実現します。配列操作の基礎を固め、配列要素の管理、イテレーション、効率的な修正方法を習得します。map、filter、find、sortなどの高度な配列メソッドを使い、アプリケーション内でデータを効果的に変換・処理する技術を身につけます。

Backend Development with Node.js and Express.js

Learn to build backend applications with Node.js and Express.js. Set up your environment and create your first Node.js apps. Work with the file system and build simple console tools. Use Express.js to build web apps, handle routes, and manage requests.

CSS Layout, Effects, and Sass

Level up your styling skills by mastering advanced CSS techniques for modern web design. Position and manage elements with precision using advanced positioning strategies. Create smooth transitions and engaging animations to enhance user experience. Transform and manipulate elements for dynamic visual effects. Build responsive designs that adapt across devices and learn to streamline your workflow with CSS preprocessors like Sass.

JavaScript忍者

JavaScript Ninjaコースへようこそ！この魅力的でインタラクティブなコースは、楽しく教育的なゲームを通じてJavaScriptプログラミングの基礎を紹介するように設計されています。あなたは忍者をさまざまなチャレンジに導き、JavaScriptを使って動きを制御し、寿司のようなオブジェクトと対話します。基本から始めて、マップのナビゲート方法、寿司の取得と配置方法を学び、徐々に関数、ループ、条件分岐などのより複雑なプログラミング概念へと進みます。各章では実践的な演習を通じて学習を強化し、最後にはスキルを試すエキサイティングなチャレンジが待っています。完全な初心者でも、コーディングスキルを磨きたい方でも、このコースは包括的で楽しい学習体験を提供します。ぜひご参加いただき、コーディング忍者になりましょう！

JavaScript Logic and Interaction

Master essential JavaScript concepts, including classes, DOM manipulation, event handling, and asynchronous programming. Learn to create dynamic and interactive web applications by managing user interactions, fetching and displaying data, and handling asynchronous operations efficiently. Through a blend of theory, hands-on challenges, and real-world examples, this course equips you with the practical skills needed for modern web development.

State Management with Redux Toolkit in React

Discover the power of Redux Toolkit in conjunction with React, and supercharge your state management skills. This course comprehensively introduces Redux Toolkit, a powerful library for managing state. Learn how to streamline your Redux setup, simplify complex state logic, and create efficient, scalable React applications.

React Router Essentials

Learn to manage navigation in React applications using React Router. Understand the structure of URLs and the role of routing in web apps. Set up React Router to create multi-page applications with dynamic content based on URL paths. Work with advanced features like query strings and URL parameters to handle application state and user navigation.

Discover more Learning Tracks

トラック

Unityによるゲーム開発

初心者

Adobeによるビデオプロダクション

初心者

UI/UXデザインツール

初心者

必須オフィススキル

初心者

デジタルマーケティングの基礎

初心者

完全なソーシャルメディア管理

初心者

ビジネスAIツールキット

初心者

ノーコードウェブサイト開発

初心者

DevOpsスペシャリスト

初心者

教師あり学習の基礎

初心者

Pythonゼロからヒーローへ

初心者

Cプログラミング基礎

初心者

なぜ人々はCodefinityを選ぶのか

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.

Step-by-Step to Stellar Results

インタラクティブなコーディング環境

インタラクティブな環境に飛び込み、リアルタイムのフィードバックと成果指標を活用してコードを書き、実行しながら一歩ずつ学んでいきましょう。

AI搭載のサポート

内蔵のAIアシスタントを活用してエラーの説明、修正案の提示、あるいはコードに関するあらゆる質問に答え、生産性を保ち、詰まることなく作業を進めましょう。

Check your progress

各モジュールの締めくくりとしてクイッククイズを実施し、即時フィードバックを受け、進捗を確認し、主要な概念を確実に習得できたかチェックしましょう。

Promote your expertise

修了後に業界で認められた証明書を取得し、ワンクリックでLinkedInに共有して、あなたの実力を周囲に示しましょう。