トラック Web Developer from Zero to Hero - 修了証付きオンライン学習

Web Developer from Zero to Hero

Beginner

4.6

1472 reviews

23k+ Learners

Discover the power to create captivating websites by harnessing HTML, CSS, and JavaScript. Immerse yourself in building dynamic web applications enhan…

167

Chapters

Learning hours

293

Assignments

AI Assistant

Shareable Certificate

成果

Track content

Related courses and projects

推薦の声

特徴

価格

成果

Track content

Related courses and projects

推薦の声

特徴

価格

Learning track content

ウェブの仕組みを探求します。データがネットワークを通じてどのように移動するかを学び、プロトコルの役割を発見し、IPアドレスやドメイン名の謎を解き明かします。ウェブブラウザとサーバーがどのように通信してウェブコンテンツを配信するかについて、高度な理解を得ることができます。

HTMLとWeb開発へようこそ

What is the Internet?

インターネットはどのように機能するのか？

ウェブサイトの仕組みの理解

フロントエンドとバックエンド開発の解説

見出しや段落からリストやテーブルまで、タグを使ってコンテンツを構造化する方法を学びます。属性を用いて要素を強化する方法についても理解します。

HTMLタグの理解

HTML属性の操作

HTMLにおけるペアタグとシングルタグの理解

テキストマークアップ

リストの整理

チャレンジ：最初のウェブページの段落作成

チャレンジ：パーソナルイントロダクションウェブページの作成

チャレンジ：映画ショーケースウェブページのデザイン

リンクの使用

ボタンの追加

チャレンジ：人気ウェブサイトへのリンクを作成する

ベストプラクティスのためのHTMLコードの検証

HTMLドキュメント構造の核心部分。DOCTYPE宣言、head、bodyを含むHTMLドキュメントの構成要素について学びます。各要素の目的と、それらがウェブページ全体の構造にどのように寄与するかを理解します。

チャレンジ：HTMLドキュメントを正しく構造化する

HTMLの検証とデバッグのための開発者ツールの使用

画像、音声、動画などのメディアを活用してウェブページをより魅力的にします。表形式の構造化データをテーブルとして扱います。

HTMLでの画像の追加

チャレンジ：画像の操作

クリック可能な画像、キャプション、および最適化の操作

ベクターグラフィックスとラスターグラフィックスの理解

リッチメディアのためのオーディオ埋め込み

ビデオ要素の追加

チャレンジ：HTMLにオーディオとビデオを埋め込む

HTMLでのテーブルの作成と構造化

チャレンジ：機能的なHTMLテーブルの設計

HTMLフォームの多様性を探求します。主要な概念と技術を活用して、直感的でユーザーフレンドリーなフォームの設計方法を学びます。フォームがウェブサイト上でユーザーの操作やデータ送信を可能にする仕組みを理解します。

HTMLフォームの紹介

HTMLにおけるフォーム作成の基礎

フォームのアクセシビリティ向上のためのラベルの使用

入力属性によるフォームの強化

HTMLにおけるさまざまな入力タイプの探究

チャレンジ：入力欄とラベルを使ったフォームの作成

複数行入力のためのTextarea要素の操作

ドロップダウンメニューのためのSelect要素の使用

定義済み入力候補のためのDatalist要素の使用

フォーム要素のグループ化による構造の最適化

CSSがHTMLにどのように接続され、セレクタを通じてスタイルが適用されるかを理解します。色、テキストのスタイリング、ホバー効果を適用して視覚的なプレゼンテーションを制御します。

チャレンジ：最初のウェブページにスタイルを適用する

行の高さ、間隔、フォントプロパティ、カスタムフォントを使用してタイポグラフィを改善します。フォントファミリー、太さ、スタイル、サイズを制御して可読性を向上させます。

マージン、パディング、ボーダー、幅のプロパティを使用したレイアウト構造の制御。ボックスサイズの挙動およびブロック、インライン、インラインブロックなどの要素表示タイプの理解。

実践的な方法でボックスモデルを理解する

マージンとパディングの基本

ボックスサイズと幅の制御

displayプロパティ：Block、Inline、Inline-block

チャレンジ：壊れたレイアウトを修正する

Flexboxプロパティを使用して水平方向および垂直方向のレイアウトを制御します。方向、配置、間隔を調整してUIコンポーネントを構成します。

チャレンジ：Flexboxを使用したショップカードレイアウトの作成

チャレンジ：Flexboxで縦型ブログカードを作成する

背景色、画像、疑似要素、シャドウを使用してレイアウトを強化します。視覚コンポーネントに奥行きとコントラストを持たせたスタイル設定。

チャレンジ：モダンなカードコンポーネントを作成する

Research what learners can expect from this advanced HTML and CSS styling course. What do you need to know before starting the course? What topics will be covered in it?

Course Overview and Learning Outcomes

Topics Covered in This Course

Success Tips for Learning Advanced CSS

Position and manage elements on the web pages. Learn about the different positioning properties, discover how to use the stacking order to control the visibility of elements that overlap each other, and finally, handle content overflow.

Understanding CSS Positioning

Relative Positioning Explained

Challenge: Apply Relative Positioning

Absolute Positioning in CSS

Challenge: Implement Absolute Positioning

Fixed Positioning for Sticky UI Elements

Challenge: Work with Fixed Positioning

Sticky Positioning for Dynamic Layouts

Challenge: Master Sticky Positioning

Managing the Stacking Order of Elements

Challenge: Control Z-Index and Overlapping Element

Handling Content Overflow in CSS

Research the power of transitions and learn how to improve the user experience. Discover how to liven properties smoothly and gradually, creating seamless state transitions.

Introduction to CSS Transitions

Choosing the Right Transition Properties

Setting Transition Duration for Effects

Customizing Transitions with Timing Functions

Adding Delay to CSS Transitions

Combining Transitions

Challenge: Add a Smooth Transition Effect

Learn about the animation property and how it can be used to create dynamic and engaging designs. Discover how to create complex animations using keyframes and how to control the animation.

What Are CSS Animations?

Defining Animation Duration and Timing

Controlling Animation Iteration and Direction

Managing Animation States in CSS

Composing Multiple Animations

Challenge: Implement CSS Animation

Explore the transformation property, which allows modifying the appearance and position of elements on a webpage. Learn how to scale, rotate, skew, and translate elements in two and three dimensions. Combine multiple transformations to create more complex effects.

Introduction to CSS Transformations

Scaling Elements

Rotating Elements in 2D and 3D

Challenge: Apply Scaling & Rotation

Translating Elements for Dynamic Effects

Skewing Elements for Unique Designs

Using Perspective for Depth Effects

Challenge: Combine Translation and Skewing

The principles and techniques used in adaptive/responsive design aim to make websites and applications accessible and visually appealing across different devices, screen sizes, and orientations.

What Is Responsive Web Design?

Using @media Queries for Adaptive Styles

Building Flexible Layouts for Different Screen Sizes

Inspecting Web Pages

Challenge: Inspect Adaptive Layout

Learn about preprocessors in CSS and how they can help to write more efficient and maintainable code. Understand how to use preprocessors to simplify the workflow and generate cleaner CSS code.

Introduction to CSS Preprocessors

Understanding Sass Syntax for Better CSS

Using Sass Variables for Reusable Styles

Performing Calculations with Sass Numeric Operators

Nesting Styles for Cleaner Code

Extending Styles with the @extend Directive

Organizing Sass Files for Scalable Projects

Reactとは何か、そしてどのようにユーザーインターフェースをレンダリングするかを学びます。コンポーネント、JSX構文、画面上への要素の表示に焦点を当てます。

チャレンジ：Reactで要素をレンダリングする

コンポーネント間でデータを渡し、UI出力を制御する方法を学びます。props、条件付きレンダリング、データリストのレンダリングに焦点を当てます。

Propsによるデータの受け渡し

チャレンジ：関数型コンポーネントの作成

Reactにおける条件付きレンダリング

チャレンジ：チャット通知における条件付きレンダリングの実装

チャレンジ：銀行アラートにおける条件付きレンダリングの実装

Reactにおけるデータリストのレンダリング

チャレンジ：データコレクションの表示

React 基礎のまとめ

ユーザーの操作や外部データが時間の経過とともにUIをどのように変化させるかを学びます。Reactフックを使用した状態管理と副作用の処理に焦点を当てます。

UseStateによる状態管理

チャレンジ：状態で表示・非表示を切り替える

UseEffectによる副作用の処理

チャレンジ：データの取得と表示

Reactフックの基本のまとめ

Reactコンポーネントをスタイリングする一般的な方法を学びます。インラインスタイルと外部CSSを使用したスタイルの適用に焦点を当てます。

Reactにおけるスタイリングの選択肢

Reactでのインラインスタイルの使用

外部CSSによるコンポーネントのスタイリング

チャレンジ：Reactアプリケーションのスタイリング

Reactプロジェクトの実行方法とその構造について学びます。Viteを使用したプロジェクトの開始と、プロジェクトファイルのナビゲーションに焦点を当てます。

Viteを使用したReactプロジェクトのセットアップと実行

Reactプロジェクト構造の理解

Reactプロジェクトセットアップのまとめ

Learn the theoretical basics of concepts such as URL, domain, protocol, query parameters, and more. Understand the significance of routing in web applications and why we need the React Router library.

Introduction to Routing in Web Apps

What Is React Router?

Understanding URL Structure

Exploring URLs in Practice

Quiz: Core Concepts of React Router and URLs

Discover how to create an entire React application from scratch, with the ability to display content that adapts based on the URL using React Router functionality.

Overview of the Multi-Page Website

Installing React Router

Enabling Routing in a React App

Defining Routes for Navigation

Recap: First Steps in React Router

Optimizing Imports with Lazy Loading

Implementing a Fallback Component

Recap: Second Steps in React Router

Creating and Managing Navigation

Exploring React Router's Complete Logic

Recap of React Router Fundamentals

Explore using query strings for sharing and managing application state via URLs, work with different data types in query parameters, and leverage React Router for navigation and effects based on URL changes.

Overview

Understanding Query Strings in URLs

Setting Up a React Component

Inspecting Recent Changes

Working with Query Parameters

Integrating useSearchParams Hook

Final App

React Router Course Summary

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

最大55％オフで

Features:

*Tracks not included in Pro plan

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

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

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

Recommended Courses and Projects

HTMLの基本

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

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.

CSS Foundations

Build a solid foundation in CSS and understand how styles shape the appearance of every webpage. Write and apply rules, target elements with selectors, and master the cascade and box model to create clean, organized designs. Gain the essential skills every web developer needs to style web content with precision and confidence.

HTML Forms Foundations

An introduction to creating well-structured and accessible HTML forms. Explore fundamental form elements, validation techniques, and best practices for ensuring accessibility. Learn how to design forms that are both functional and user-friendly, as they are essential components of any interactive website.

End to End Testing React Apps with Playwright

Test React applications end to end using Playwright. Write reliable browser tests, interact with UI elements, handle asynchronous behavior, and validate navigation and network behavior. Apply advanced testing strategies to build scalable, maintainable test suites for production React applications.

CSS Grid Mastery

Explore the power of CSS Grid, the modern way to build flexible, responsive web layouts. Learn how to structure pages with rows, columns, and advanced grid features.

Introduction to Web Protocols

Explore the fascinating journey of data as it travels from your browser to a web server and back. This course demystifies the web's inner workings, explaining how browsers, servers, DNS, IP addresses, and protocols like HTTP and HTTPS collaborate to deliver modern websites. With practical examples and clear analogies, you'll gain a concrete understanding of the web as a real, interconnected system.

MUI Essentials for React Applications

Build modern, responsive, and visually polished React applications using Material UI. Learn to structure interfaces with core components, design flexible layouts, manage forms, and apply responsive behavior. Customize themes, refine visual styles, and develop practical features through focused, real-world mini projects. Gain the confidence to create clean, accessible, production-ready UIs with MUI.

HTML Essentials

Build structured web pages using HTML elements and semantic layout. Work with text, links, images, tables, and forms to create real content. Learn how to organize and structure complete web pages from scratch.

Introduction to Web and Frontend Development

Understand how the web works and how websites are built. Explore the Internet, how pages are delivered, and the difference between frontend and backend development.

React Forms with React Hook Form

Manage forms in React applications using React Hook Form. Learn core concepts, validation techniques, error handling patterns, and dynamic form structures that scale. Integrate forms with UI component libraries and apply performance optimizations to build reliable, user friendly form experiences.

Build Meaningful and Accessible Web Pages

Learn to create clean, meaningful, and accessible web pages using semantic HTML. Discover how to use appropriate elements to structure content, enhance SEO, and improve user experience. Master the core principles of a well-designed modern website.

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に共有して、あなたの実力を周囲に示しましょう。