CSS GRIDマスター：FIGMAデザインの実践ウェブ実装

「生成AIを活用して企画・デザイン・実装・デプロイまで完成させるWeb開発実践プロジェクト講座」 アイデアの構想から始まり、AIでデザインをパッと作成し、Reactで実際に動作するウェブサイトの実装、そしてインターネットへのデプロイまで、すべての過程をステップバイステップで一緒に完成させます。 StitchやFigma Makeといった最新のAIツールがデザイン作業をサポートし、複雑なコーディングも段階ごとに簡単に進められるようお教えします。

ReactとFirebaseを活用して、ログイン、投稿管理、ファイルアップロード、プロフィール管理など、実際のサービスで使用されるコア機能を実装するウェブアプリケーションを作成する講座です。 Firebase Authenticationを利用したメールログインとソーシャルログイン、Firestoreベースのデータ保存およびリアルタイムデータ処理、Firebase Storageを活用したファイルアップロード機能、そしてプロフィール管理機能まで段階的に実装しながら、一つの完成されたウェブサービスを作ることができます。 フロントエンド開発を学んでいる方が、複雑なサーバー構築なしにFirebaseを活用して素早くウェブサービスを実装する方法を理解できるように構成された講座です。

生成AIを活用し、企画からデザイン、実装、デプロイまでを一度に完成させる実践的なウェブ開発プロジェクト講座です。 StitchとFigma Makeを活用してデザインを作成し、AI Studioでコードを生成して実際のサービスとしてデプロイします。 コードに詳しくなくても、AIと共に開発する方法を学びながら、自分だけのAIウェブアプリを完成させます。 さあ、あなたもAIと協業する開発者になりましょう。

React + TypeScriptを活用し、実務感覚で「ToDoリスト（ToDo List）」を自ら作成するプロジェクト中心のカリキュラムです。単に文法を学ぶだけでなく、コンポーネント構造の設計 → 状態管理 → 型の適用 → 機能実装 → ローカルストレージ連携 → デプロイまで、実際のサービス形式で完成させることで、TypeScriptの活用感覚を身につけることができます。

型安全性とコードの可読性を高めるTypeScriptの核心文法を、実習中心に習得する入門コースです。プロジェクトの環境設定からインターフェース、ジェネリック、ユーティリティ型まで、実際のコード例を通して学習します。

パブリッシャーのためのReact第一歩！ 基礎文法からレスポンシブ対応のショッピングモールサイトの制作・デプロイまで、一度に学習します。 断片的なReactの例題をまとめるのではなく、実際のウェブページ制作に必要な核心的な文法を学び、適用します。

この講座は、Figmaのデザインをウェブページとして実装するプロセスについて、ステップバイステップで説明します。画像の保存からHTML、CSSの作成、Javascriptの作成まで、ウェブパブリッシングの実務全般を扱います。初心者の方でも簡単に進められるよう、体系的に構成されています。実習中心の学習を通じて、ウェブデザインを効率的にコードへ変換する方法を学ぶことができます。

全世界のウェブサイトで75%以上が使用しているJavaScriptライブラリ、jQuery！華麗な効果よりも原理を理解し、基礎を固められるように構成しました。jQueryの基礎から活用まで学習し、あなただけのポートフォリオを完成させたり、現場で即活用してみてください。

ウェブ開発の第一歩を踏み出しましたか？HTML、CSS、JavaScriptを始めたばかりの方に特別なご提案です！ モバイル時代に合わせてモバイルウェブサイトを作りたいけれど、どこから始めればいいか迷っていませんか？ご心配はいりません。 Figmaモバイルデザインを直接分析し実装しながら、自然にレスポンシブウェブ開発の核心を学んでみましょう。洗練されたモバイルデザインを基に、ユーザーの心を掴む繊細なインタラクションから、様々な画面サイズに完璧に適応する技術まで、全てを一緒に学んでいくことができます。 さあ、あなたのウェブサイトが全てのデバイスで輝くように、ノウハウを共有します。一緒に始めてみませんか？

HTML、CSS、JavaScript(jQuery)の基礎はありますか？でも、ウェブサイト全体をどう作ればいいのかよくわからないですか？それなら、デザインを参考にしてショッピングモールのメインページの実装に挑戦してみてください。完成されたデザインを参考に、企画意図やデザインの詳細な事項を把握し、ウェブサイトを実装するノウハウをお教えします。

JavaScriptを通じてHTML要素を選択し、さまざまなイベントに応じて要素のスタイルを変更したり、アニメーション効果を実装したりします。JavaScriptの基本文法からスタイルの変更、イベントの設定、およびウェブページ制作時に頻繁に使用される効果の実装を行います。

CSSの基礎からアニメーション、レスポンシブまで学習します。 実践的な例題を通じて学習内容を復習しながら、確実に基礎を固めます。

この講義を通じて、ウェブページを構成する3大言語であるHTML、CSS、JavaScriptのうち、HTML言語の基礎をしっかりと固めることができます。検索に最適化され、ウェブアクセシビリティとウェブ標準を遵守したHTMLを正しく学習してみましょう。

SCSS(SASS)とFLEX Layoutを実戦で完璧に活用します！Figmaでウェブサイト全体のメインページおよび主要なサブページのUIをデザインし、一貫性のあるクラス名とともにHTMLワイヤーフレーム構造を作成してパブリッシングまで完了させる、体系的なレスポンシブウェブサイトプロジェクト制作過程です。合計41時間以上のカリキュラムの中で、核心理論および実務活用能力を十分に習得し、PC・モバイル・タブレット対応のレスポンシブレイアウトを設計・制作しながら、レスポンシブウェブプロジェクトに関する経験とノウハウはもちろん、jQueryの核心理論および実務活用能力まで大幅に向上させることができます。

この講座は、Figmaのデザインをウェブページとして実装するプロセスについて、ステップバイステップで説明します。画像の保存からHTML、CSSの作成、Javascriptの作成まで、ウェブパブリッシングの実務全般を扱います。初心者の方でも簡単に進められるよう、体系的に構成されています。実習中心の学習を通じて、ウェブデザインを効率的にコードへ変換する方法を学ぶことができます。

このレッスンを通して、HTML、CSSの基礎を固めることができます。

ウェブ開発の第一歩を踏み出しましたか？HTML、CSS、JavaScriptを始めたばかりの方に特別なご提案です！ モバイル時代に合わせてモバイルウェブサイトを作りたいけれど、どこから始めればいいか迷っていませんか？ご心配はいりません。 Figmaモバイルデザインを直接分析し実装しながら、自然にレスポンシブウェブ開発の核心を学んでみましょう。洗練されたモバイルデザインを基に、ユーザーの心を掴む繊細なインタラクションから、様々な画面サイズに完璧に適応する技術まで、全てを一緒に学んでいくことができます。 さあ、あなたのウェブサイトが全てのデバイスで輝くように、ノウハウを共有します。一緒に始めてみませんか？

インタラクティブWebプロジェクトは、CSSとJavaScriptを使って創造的なインタラクションのある例を一つずつ作成するシリーズです。

1つの講義でTailwindCSSの入門から実践までを完了! 2つのプロジェクトでレイアウト構成からレスポンシブデザイン、ダークモードまで完璧に学んでください。

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業！

コーダー（パブリッシャー）への就職や実務において、最も競争力となるモバイルウェブ制作能力を向上させることができます。コーダーとしてモバイルウェブを制作するための、ほぼすべての制作手法とノウハウを固めることができます。特に、最近のコーダーや開発者に求められるデザイン能力をフィグマ（Figma）の学習で大幅にカバーできるよう、FigmaによるモバイルウェブUIデザイン作業のプロセスも詳細に説明しました。モバイルウェブパブリッシング授業の最大の強みであるHTMLワイヤーフレームの詳細な作成法を、すべてのページ一つひとつ丁寧に解説します。講義を通じて、HTMLワイヤーフレームの制作能力が大きく向上するはずです。モバイルウェブパブリッシングは、CSS変数（Var）を活用してモバイルやタブレットに最適化したレイアウトを完璧に合わせる学習を通じ、実務とほぼ遜色のないレベルの作業能力を身につけることができます。Flexレイアウトを中心に、中上級のCSS実践能力を十分に備えることができます。

デザイナーと開発者のためのオールインワン講座！新しいUI3を反映

入門編で練習で作ってみたVDサイトのメインページを実戦にしてみましょう〜

解きながら学ぶ 情報処理産業技士 情報処理産業技士 過程評価型 実技 合格のために すべてを準備しました。

現職スタートアップCTOが実際のサービスと複数の外注を通じて得たバイブコーディング知識をお伝えします。

ウェブデザイン機能社出題基準 2023年バージョンに合わせて誰でも合格できるように製作しました。 5種類を学び、素早く合格しましょう！

PhotoshopとAdobe XDプログラムを活用して、さまざまなデバイスのWeb、アプリレイアウトを設計した後、簡単なコーディング技術を学習して直接実装してみることができます。

パブリッシャー就職のための真のガイド電子書籍（PDF）で、効率的なパブリッシング学習方法、質の高いパブリッシング講義や教え方の手際が良い講師を見極める眼、新人でありながら経験者のようにパブリッシングするコツ、望ましいコーディング習慣と原則、個人ポートフォリオサイトの制作方法、デザイナーや開発者との協業のコツ、パブリッシャーとして知っておくべき必須サイト、フォトショップUIデザインの実力向上など、パブリッシャー就職のために必ず知っておくべきHTML+CSS+JQUERYパブリッシングの基礎を詳細にお伝えします。また、国費支援パブリッシャー課程についても詳しく説明します。

AI時代に不可欠なAIを活用し、最適な成果を得たい方々のために準備しました。 たった2時間で、AI活用をコーディングを通じて本格的に学ぶことができます。

就職のためには面接を頻繁に受ける必要があります。面接の機会を増やすためには、質の高いパブリッシャーの個人ポートフォリオサイトが不可欠です。CodingWorksが心血を注いで作成した、質の高い個人ポートフォリオサイト制作ガイド教材（PDF）です。 この教材は、インターネットで検索して手に入るような内容ではありません。CodingWorksが長年現場で300人以上の学生にパブリッシングの理論、実践、個人ポートフォリオサイト制作を講義し、学生たちが一日も早く希望する企業に就職できるよう、個人ポートフォリオサイトの制作方法を詳細に盛り込んだ、世界に一つだけのパブリッシャー就職用個人ポートフォリオサイト制作ガイド（PDF）です。

コーディング1位 YouTubeのジョコーディングの本番圧縮！簡単で楽しいWebフルスタック開発講義

デザインチームも、企画書も、PMも不在の環境で、いかに企画し、伝え、説得できるでしょうか？ 元29CMプロダクトデザインリードのキム・ヨンジュンデザイナーが、Figmaを中心にセルフプロダクト戦略を実践事例と共に共有します。構造のない環境で生き残る方法から、Figma一つで構造を築く方法まで、詳しく見ていきましょう。

データを加工して表の形で表現することもできますが、最も重要なのは、データを人間が一目で分かるように表現することです。