Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
トラック Frontend Development with Svelte - 修了証付きオンライン学習
Frontend Development with Svelte
Frontend Development with Svelte
Beginner
0.0
0 reviews
0 Learners
Explore how modern frontend development works using HTML, CSS, JavaScript, Svelte, and Tailwind CSS. Build structured webpages, create interactive UI …
188
Chapters
20
Learning hours
218
Assignments
AI Assistant
Shareable Certificate
成果
成果
Track content
Related courses and projects
推薦の声
特徴
価格
成果
成果
Track content
Related courses and projects
推薦の声
特徴
価格

学習内容

Structure webpages using semantic HTML
Create reusable Svelte components and reactive UI elements
Fetch and display external API data
Style interfaces with CSS and Tailwind CSS
Handle forms, events, and dynamic rendering
Build responsive layouts for different screen sizes
Build interactive frontend logic with JavaScript
Work with shared state using Svelte stores
Organize modern frontend projects and reusable UI patterns.
Learning track content
HTMLとWeb開発へようこそ
HTMLタグの理解
HTML属性の操作
HTMLにおけるペアタグとシングルタグの理解
テキストマークアップ
リストの整理
チャレンジ:最初のウェブページを作成するパラグラフ
チャレンジ:パーソナル自己紹介ウェブページの作成
チャレンジ:映画ショーケースウェブページのデザイン
リンクの使用
ボタンの追加
チャレンジ:人気ウェブサイトへのリンクを作成する
HTMLコードのベストプラクティスのための検証
HTMLドキュメント構造の理解
ドキュメントヘッドの役割
チャレンジ:HTMLドキュメントを正しく構造化する
HTMLでの画像の追加
チャレンジ:画像の操作
クリック可能な画像、キャプション、最適化の操作
HTMLでのテーブルの作成と構造化
チャレンジ:機能的なHTMLテーブルの設計
HTMLフォームの紹介
HTMLにおけるフォーム作成の基礎
フォームのアクセシビリティ向上のためのラベルの使用
入力属性によるフォームの強化
HTMLにおけるさまざまな入力タイプの探究
チャレンジ:入力欄とラベルを使ったフォームの作成
複数行入力のためのTextarea要素の操作
ドロップダウンメニューのためのSelect要素の使用
Datalist要素を使用した事前定義入力候補の提供
フォーム要素のグループ化による構造の最適化
CSSとは何か、なぜ重要なのか
CSSをHTMLに接続する
シンプルな方法で要素を選択する
テキストと色のスタイリング
ホバー効果の追加
チャレンジ:最初のウェブページにスタイルを適用する
テキストの可読性向上のためのフォーマット
フォントとフォントプロパティの操作
カスタムフォントの追加
チャレンジ:ブログ記事デザインの改善
実践的な方法でボックスモデルを理解する
マージンとパディングの基本
ボックスサイズと幅の制御
displayプロパティ:Block、Inline、Inline-block
チャレンジ:壊れたレイアウトを修正する
なぜFlexboxが存在するのか
方向の制御
コンテンツの水平方向の整列
アイテムの垂直方向の整列
フレックスアイテムの操作
チャレンジ:Flexboxを使用したショップカードレイアウトの作成
チャレンジ:Flexboxで縦型ブログカードを作成する
Understanding Grid Containers and Items
Defining Rows and Columns
Grid Gaps and Alignment
Building a Real-World Layout
背景色の使用
背景画像の適用
CSSでの画像の操作
装飾的な疑似要素によるエフェクトの作成
奥行きを出すためのシャドウの追加
チャレンジ:モダンなカードコンポーネントを作成する
最初のJavaScriptコンソールアプリケーション
チャレンジ:出力を表示する
チャレンジ:複数行の出力
数値の取り扱い
チャレンジ:数値の操作
チャレンジ:車の速度を計算する
チャレンジ:台形の面積の計算
複数の値の出力
チャレンジ:意味のある出力をコンソールに表示する
JavaScriptでコメントを使用する方法
チャレンジ:コメントの追加
複数行コメント
チャレンジ:コードのコメントアウト
そもそもJavaScriptとは何か?
データの保存
チャレンジ:変数の宣言
チャレンジ:変数からのデータアクセス
チャレンジ:変数名の修正
チャレンジ:変数の再代入
定数
チャレンジ:定数の宣言と使用
変数に対する算術演算の実行
チャレンジ:給与計算機を作成する
チャレンジ:ボーナスによる給与の調整
プリミティブデータ型の探求
チャレンジ:ブール値の宣言
異なるデータ型の相互作用
チャレンジ:文字列の連結
チャレンジ:ユーザープロファイルとアクティビティ詳細の作成
比較演算子
チャレンジ:年齢適格性の確認
if文
チャレンジ:天気に基づく服装レコメンダー
チャレンジ:偶数か奇数か
ネストされた条件文
`else` 節
チャレンジ:気温アドバイザー
`else if`句
チャレンジ:グレード分類器
`AND` 論理演算子
チャレンジ:数値が偶数かつ正の数であるかの判定
OR 論理演算子
チャレンジ:アクセス制御システム
関数とは何ですか?
チャレンジ:シンプル関数
チャレンジ:車の速度を計算する
スコープ
関数へのデータの渡し方
チャレンジ:スピード関数の修正
チャレンジ:成績分類器の改善
チャレンジ:複合関数の定義
関数からのデータの返却
デフォルト値
チャレンジ:デフォルトパラメータ付きメール自動応答システム
配列とは何ですか?
チャレンジ:配列の定義
チャレンジ:インデックス付け
配列への値の追加
チャレンジ:配列への要素の追加
配列から要素を削除する
チャレンジ:`pop`と`shift`の練習
`length` プロパティ
チャレンジ:要素のカウント
includes メソッド
チャレンジ:動物園で動物を探す
`for`ループ
チャレンジ:シーケンスの出力
`while`ループ
チャレンジ:フィボナッチ数列の出力
`do-while` ループ
チャレンジ:7の倍数のランダム
配列でのループの使用
チャレンジ:商品の平均価格を求める
サマリー
あなたのテックスキルを強化!
最大55%オフで
Features:
*Tracks not included in Pro plan
500+ 人気コース最先端のAIコパイロット
パーソナライズされた学習トラック40+ 実践的なプロジェクト
選択された割引イントロプランが終了する前にキャンセルしない場合、Codefinityが自動的に課金することを承認します $104 3か月ごと キャンセルするまで。キャンセルおよび返金ポリシーの詳細は、 定期購読の条件.
Recommended Courses and Projects

コース

究極のHTML

究極のHTML

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

コース

JavaScript入門

JavaScript入門

フロントエンド開発で最も人気のある言語、JavaScriptの世界に飛び込みましょう。JavaScriptはほぼすべてのブラウザに組み込まれており、さまざまなタスクに利用できます。基本的な機能を学び、課題やより高度なプログラミング技術に備えましょう。

コース

CSSの基礎

CSSの基礎

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

コース

HTMLの基本

HTMLの基本

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

コース

JavaScriptデータ構造

JavaScriptデータ構造

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

コース

CSS Layout, Effects, and Sass

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.

コース

デジタルマーケティング入門

デジタルマーケティング入門

この包括的なマーケティングコースは、デジタルマーケティングの基礎から高度な戦略までを深く学ぶ旅を提供します。SEO、PPC、ソーシャルメディア、AIなどの主要分野を探求し、成果をもたらす戦略の構築方法を学びます。各セクションには、理解を深めるための実践的な例やツールが含まれています。コースの最後には実践的なプロジェクトがあり、自分自身の包括的なマーケティングプランを作成し、発表する力を身につけます。

コース

JavaScript忍者

JavaScript忍者

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

コース

JavaScriptロジックとインタラクション

JavaScriptロジックとインタラクション

クラス、DOM操作、イベント処理、非同期プログラミングなど、JavaScriptの基本概念を習得します。ユーザーインタラクションの管理、データの取得と表示、非同期処理の効率的な実行によって、動的かつインタラクティブなWebアプリケーションの作成方法を学びます。理論、実践的な課題、実例を組み合わせた本コースは、現代のWeb開発に必要な実践的スキルを身につけることができます。

コース

ブロックチェーン入門

ブロックチェーン入門

ブロックチェーン技術の革新的な世界と、その最初かつ最も著名な応用例であるビットコインについて探究します。ブロックチェーンの仕組み、ビットコインの技術的基盤、そしてこのダイナミックな分野における広範な影響や将来のトレンドについて詳しく学びます。産業を再構築し、通貨やデータセキュリティの従来の概念に挑戦するこの技術について、包括的な理解を身につけます。

コース

ネットワーキング基礎

ネットワーキング基礎

ネットワーキング基礎は、初心者および中級者を対象とした、ネットワークにおける実践的なスキルを身につけるための包括的なコースです。基礎的な概念から応用までを網羅し、ネットワークの種類、IPアドレッシング、プロトコル、ネットワークセキュリティなどの主要なトピックを学びます。本コース修了時には、ネットワークのトラブルシューティング、セキュリティ対策、管理に必要な基本スキルを習得し、ネットワーク分野でのさらなる専門化に向けた堅実な基盤を築くことができます。

コース

QA入門

QA入門

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

なぜ人々はCodefinityを選ぶのか

Kwizera Mugisha

Web Developer

Kwizera Mugisha

linkedIn

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.

Sherry Barnes-Fox

Senior Business Analyst

Sherry Barnes-Fox

linkedIn

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.

Bill Wagner

Accounts Payable Specialist

Bill Wagner

linkedIn

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.

Daniel Chinea

IT Support Specialist

Daniel Chinea

linkedIn

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.

Steve Bruening

Technology Project Manager

Steve Bruening

linkedIn

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.

Stephanie Chan

Project Manager

Stephanie Chan

linkedIn

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

大手企業の従業員に信頼されています
そしてトップ大学の学生にも

Google
Intel
Twitter
FedEx
Meta
Nike
Amazon
Microsoft
Tesla
Google
Intel
Twitter
FedEx
Meta
Nike
Amazon
Microsoft
Tesla
florida
illinois
colorado
indiana
new-york
cornell
columbia
notre-dame
florida
illinois
colorado
indiana
florida
illinois
colorado
indiana
new-york
cornell
columbia
notre-dame
florida
illinois
colorado
indiana

カタログ全体へのアクセス

サブスクリプション1つで、このコースとプロジェクトやスキルの全カタログにアクセス可能です。
Features:
500+ 人気コース最先端のAIコパイロット
パーソナライズされた学習トラック40+ 実践的なプロジェクト
選択された割引イントロプランが終了する前にキャンセルしない場合、Codefinityが自動的に課金することを承認します $104 3か月ごと キャンセルするまで。キャンセルおよび返金ポリシーの詳細は、 定期購読の条件.

安心してCodefinityを試してみてください – 30日間の返金保証付き

Codefinityへの歓迎として、最大 64%オフでコースをご提供します。 さらに、 30日間の返金保証, でリスクなしでお試しいただけます。私たちはあなたをプラットフォームにお迎えできることを心から楽しみにしており、学習体験を簡単でインタラクティブ、かつ楽しいものにすることをお約束します。
Shield Image
Ready to get started?
Pro
Best intro offer
Ultimate
A complete experience
to kickstart your career
500+ Top-Rated courses
yes
yes
Completion certificates
yes
yes
Early access to new courses
yes
yes
40+ hands-on Real-world projects
no
yes
Personalized study tracks
no
yes
Unlimited workspaces
no
yes

すぐにアクセスできる 500+ コース

無制限の学習、即時アクセス
無制限の学習、即時アクセスビデオコンテンツ、クイズ、詳細な教材を含むすべてのコースとトラックに完全にアクセスでき、いつでも学習を始められます。
業界で認められた証明書
業界で認められた証明書あなたの専門性を証明する証明書を取得し、テック、AI、データ、マーケティングなどの分野でキャリアを向上させましょう。
AI支援学習
AI支援学習パーソナライズされたヒント、リアルタイムフィードバック、AIによる説明であなたの進歩を加速させましょう。
絶えず拡大中:新しいコースとキャリアトラック
絶えず拡大中:新しいコースとキャリアトラック常に更新されるコース、キャリアロードマップ、チャレンジ、実践的な模擬試験で、一歩先を行きましょう。
重要なスキルを磨く
重要なスキルを磨くAI、データサイエンス、プログラミング、マーケティング、自動化、ウェブ開発など、需要の高いスキルを学びマスターしましょう。
インタラクティブでシームレスな学習
インタラクティブでシームレスな学習実践的なプロジェクト、実世界の演習、直感的な学習体験に取り組み、追加のツールは不要です。
some-alt