トラック Frontend Development Foundations 2023 - 修了証付きオンライン学習

Frontend Development Foundations 2023

Beginner

4.5

42 reviews

70 Learners

Updated 11/2025

Build a strong foundation in web development by mastering HTML, CSS, and JavaScript. Learn to structure content, design responsive layouts, and add in…

281

Chapters

Learning hours

374

Assignments

AI Assistant

Shareable Certificate

成果

Track content

Related courses and projects

推薦の声

特徴

価格

成果

Track content

Related courses and projects

推薦の声

特徴

価格

学習内容

Structuring web content with HTML tags

Adding interactivity with JavaScript

Creating and validating HTML forms

Styling responsive layouts using CSS

Manipulating data with JavaScript structures

Mastering CSS Flexbox for layouts

Applying advanced CSS for animations

Building user-friendly web interfaces

Implementing JavaScript DOM manipulation

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

JavaScriptの基本構文、主要な用語や概念について紹介し、上級機能を学ぶための基礎を築きます。このセクションでは、これらの概念を実践的に学び、無理なく内容を記憶できるようにするためのハンズオン課題も含まれています。

最初のJavaScriptコンソールアプリケーション

チャレンジ：意味のある出力をコンソールに表示する

JavaScriptでコメントを使用する方法

変数を使用してデータを保存し、後で取得する方法を学びます。さらに、基本的なデータ型を調査し、それらがどのように相互作用するかを理解します。

チャレンジ：ユーザープロファイルとアクティビティ詳細の作成

条件に基づいて「true」または「false」と評価される式の書き方を学びます（例：「XはYと等しいか？」）。その後、特定のコード行を条件付きで実行できる条件文について探求します。

チャレンジ：数値が偶数かつ正の数であるかの判定

OR論理演算子

チャレンジ：アクセス制御システム

関数と呼ばれる強力なプログラミング機能は、最小限の繰り返しでコードのブロックを複数回実行することを可能にします。本セクションでは、関数を効果的に定義および使用するための基本的な概念と構文を紹介します。

チャレンジ：デフォルトパラメータ付きメール自動応答システム

配列の概念は、データの集合を整理および管理する方法として紹介されます。本教材では、配列がデータをどのように構造化し、複数の値に対して効率的な操作を可能にするかを解説します。

チャレンジ：`pop`と`shift`の練習

ループは、冗長性を減らし、繰り返しの作業を効率的に処理するために使用されるプログラミングの基本的な機能です。本コンテンツでは、JavaScriptにおける3つの主要なループの種類、それぞれの構文、使用例、および配列と組み合わせて操作を効率化しパフォーマンスを向上させる方法について解説します。

今後のロードマップを明確に把握し、必要な前提知識を理解し、オブジェクトや配列、基本的なプログラミング概念に取り組む際に役立つ重要なヒントを学びます。

JavaScriptデータ構造のイントロダクション

JavaScriptデータ構造を学ぶための前提条件

このコースで学ぶ内容

成功のためのヒント

JavaScriptオブジェクトの基本概念を探求します。このセクションでは、オブジェクトの作成、プロパティ管理、メソッド実装の基礎を扱います。

JavaScriptにおけるオブジェクトの理解

JavaScriptにおけるオブジェクトの作成

ネストされたオブジェクトプロパティの操作

チャレンジ：オブジェクトの作成と構造化

JavaScriptにおけるオブジェクトプロパティへのアクセス

チャレンジ：オブジェクトのプロパティ値の取得

JavaScriptオブジェクトの基礎まとめ

JavaScriptオブジェクトを操作するための高度なテクニックを学びます。このセクションでは、オブジェクトを効率的に操作し、相互作用するためのさまざまな戦略を詳しく解説します。

for...inループによるオブジェクトプロパティの反復処理

チャレンジ：イテレーションによるオブジェクトプロパティの探索

hasOwnProperty() を使用してオブジェクトのプロパティを確認する

チャレンジ：hasOwnProperty() を使用したオブジェクトプロパティのイテレーション

スプレッド演算子によるオブジェクトのクローン作成とマージ

チャレンジ：スプレッド演算子によるオブジェクトの結合

よりクリーンなコードのためのオブジェクトのデストラクチャリング

チャレンジ：オブジェクト分割代入によるデータ抽出

高度なオブジェクト操作の総まとめ

JavaScript配列の世界への旅を始めましょう。このセクションでは、配列の作成、要素の管理、基本的な配列操作の実行に関する強固な基礎を提供します。

チャレンジ：forを使った配列のループ処理

For...ofループを使用した配列の反復処理

チャレンジ：for...ofによる効率的な配列の反復処理

JavaScript配列の習得まとめ

高度な配列操作スキルを習得し、さまざまな状況で配列を効果的に扱うための多様なテクニックとメソッドを網羅します。

Map() メソッドによる配列の変換

チャレンジ：map() を使用して配列要素を変更する

filter() メソッドによる配列のフィルタリング

チャレンジ：filter() を使用して特定のデータを選択する

find() メソッドによる配列内要素の検索

チャレンジ：find() を使用してアイテムを検索する

sort() メソッドによる配列のソート

チャレンジ：sort()によるデータの並べ替えと抽出

高度な配列メソッドと変換のまとめ

コースのまとめ

Learn the fundamentals of JavaScript classes, from class declarations to defining methods that enhance functionality. Discover how to use parameter objects effectively, manage private properties, and control access with getters and setters. Master static properties and static methods and unlock the power of class inheritance using "extends" and "super()" to build scalable and reusable code.

Getting Started

Understanding Class Declarations in JavaScript

Challenge: Create a JavaScript Class

Defining Methods in JavaScript Classes

Challenge: Add Methods to a Class

Using Parameter Objects

Working with Private Properties in Classes

Challenge: Implement Private Properties in a Class

Managing Properties with Getters and Setters

Challenge: Implement Getters and Setters in a Class

Exploring Static Properties in JavaScript

Using Static Methods in JavaScript

Challenge: Implement Static Properties and Methods in a Class

Understanding Inheritance with extends and super()

Challenge: Implement Class Inheritance with extends and super()

Master DOM manipulation to create dynamic, interactive web applications. Navigate and modify the DOM's structure, dynamically update content, and implement best practices for security and performance. Differentiate between properties and attributes to optimize your code.

What Is the Document Object Model (DOM)?

Querying and Selecting Elements in the DOM

Challenge: Query and Select DOM Elements

Understanding the DOM Hierarchy and Relationships

Challenge: Navigate the DOM Hierarchy

Exploring DOM Properties in JavaScript

Working with Element Attributes in the DOM

Challenge: Manage Element Properties and Attributes

Adding Elements to the DOM Dynamically

Removing Elements From the DOM

Challenge: Add and Remove DOM Elements

Modifying Element Styles with JavaScript

Challenge: Apply Dynamic Styles to DOM Elements

Unlock the interactivity of your web applications by mastering JavaScript events. Understand event propagation, control event behavior, and implement efficient event handling for user interactions. Optimize performance with advanced techniques like event delegation.

Introduction to Events and Event Listeners

Understanding the Event Object in JavaScript

Challenge: Implement Event Listeners

Event Propagation and Delegation Explained

Challenge: Handle Event Propagation and Delegation

Working with Keyboard and Mouse Events

Managing and Removing Event Listeners

Dive into asynchronous JavaScript, including callbacks, Promises, and async/await. Learn how to fetch data from APIs, integrate third-party libraries, and handle multiple requests efficiently, building skills for creating data-driven applications.

Introduction to Asynchronous JavaScript

Understanding Callbacks in JavaScript

Handling Asynchronous Operations with Promises

Using Async/Await for Cleaner Asynchronous Code

Fetching and Working with APIs in JavaScript

Integrating APIs in JavaScript Applications

Challenge: Fetch and Use API Data

Integrating Third-Party Libraries in JavaScript

Challenge: Work with Third-Party Libraries

Handling Multiple Asynchronous Requests

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

最大55％オフで

Features:

*Tracks not included in Pro plan

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

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

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

Recommended Courses and Projects

test code

Test explain sentence

hover on sentence and explain it

HTMLの基本

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

Test UI Features

Let's test

Introduction to CSS Part I

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

Introduction to CSS Part II

Continue learning CSS. CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

React Tutorial

JavaScript忍者

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

Introduction to HTML

In this course, participants will learn the basics of HTML, what HTML is and how it is used to create web pages, the structure of an HTML document and the various tags used to define the content and layout of a web page, how to use HTML tags to structure and format content, such as headings, paragraphs, lists, tables, and more, how to create links, add images and videos, and create forms for user input.

test course with sections with quiz

test

QA入門

このコースでは、主にウェブアプリケーションに対する手動テストの実施方法について紹介します。本コースで習得したスキルは、オートメーションテストにも応用可能です。

HTML for Beginners

HTML (HyperText Markup Language) is a standard language for creating web pages. It describes the structure and content of a web page and consists of a series of tags that define the various elements of the page, such as headings, paragraphs, lists, links, and more. HTML is the foundation of the modern web.

Discover more Learning Tracks

トラック

TEST TRACK 12

初心者

フルスタックウェブ開発

初心者

Become a React Developer 2024

中級

Mastering Data Visualization (2023)

中級

SQL from Zero to Hero 2023

初心者

С++ Essentials 2024

初心者

Python from Zero to Hero 2024

初心者

Machine Learning Mastery (2023)

中級

Python Beyond Intermediate

初心者

Unityによるゲーム開発

初心者

Become a Django Developer

上級

Flask for Dummies

中級

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