강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

バニラ JavaScript & Tailwind CSS

AI活用とコンポーネント中心UI制作で学ぶ実務型Web UI開発、 デザイナー+開発者必須コース!

  • Michael Kwon
바닐라JS
tailwindcss
JavaScript
vanilla-javascript
frontend
TailwindCSS
Web Design

こんなことが学べます

  • Viteを使って高速かつ効率的な開発環境を構築できます。

  • バニラJavaScriptでDOMを操作し、イベントを処理し、動的なUIを実装する方法を学びます。

  • Tailwind CSSを活用し、長いCSSを書かずに素早くUIデザインを実装します。

  • AI Code Assistantを通じてコード作成を短縮し、品質を向上させることができます。

  • 実務でよく使うモーダル、ドロップダウン、アコーディオン、トグルメニューなどのUIを自分で実装してみます。

すぐに基礎を固め、現代的なWeb開発を学びたいですか? 🚀

このレッスンはデザイナーと開発者のための実践的なWeb開発プロセスです。 ReactやVueのようなフレームワークなしで、バニラのJavaScriptとTailwindCSSだけで実務でよく使われる必須UIコンポーネントを効率的にスタイリングして機能を実装してみます。

このようなことを学びます。

1⃣ バニラのJavaScriptの基礎

Web開発の基本であるvanilla-javascriptを通じて、基礎文法からDOM操作、イベント処理までしっかり固められます。フレームワークなしで動作するコードを記述し、JavaScriptの重要な概念を正確に理解できます。

2⃣ TailwindCSSで素早くスタイリングする

複雑なCSSを書かずに、クラスだけで洗練されたWebデザインを実装できるTailwind CSSを学びます。背景色、余白、フォントサイズなどのスタイルをすばやく適用し、レスポンシブウェブも簡単に製作します。

tailwindcss

3⃣ 実戦プロジェクト(UIコンポーネント開発)

UIコンポーネントの開発を中心に、実際のウェブサイトでよく使われるモーダルウィンドウドロップダウンメニューアコーディオンメニューを直接作成してみます。デザインと動きをつなぎ、フロントエンドの実務にすぐに応用できる技術力を築きます。

4⃣ AI活用

AIツール(Google Gemini)を活用して、開発とデザイン業務をより迅速かつスマートに処理する方法も一緒に学びます。

🎯講義のターゲット層(誰がこの講義を聞きますか?)

  1. Webデザイナー→Tailwind CSSを学び、開発者とコラボしたい人

  2. 初心者のフロントエンド開発者→バニラJSとTailwindを活用してUI開発を学びたい人

  3. 開発者に転換を悩むデザイナー→デザイン感覚を活かしてWeb開発までしたい人

  4. スタートアップ開発者→迅速にプロトタイプを作りたい人

  5. CSSを難しくする開発者→TailwindでCSSを簡単に扱いたい人

受講前の注意

練習環境

  • オペレーティングシステムとバージョン(OS):Windows、macOS、LinuxなどのすべてのOSが利用可能です。

  • 使用ツール: Visual Studio Code, Node.js & npm

  • PC仕様:インターネット接続が可能な基本仕様のPC

学習資料

  • 提供する学習資料の種類:FitHubソースコード、テキストレクチャー

  • 分量と容量:各セクションで学習資料を提供する

選手の知識

このレッスンは、プログラミングやWeb開発に慣れていない初心者でも受講できるように構成されています。しかし、以下の基本的な知識を知っていれば、より簡単に従うことができます。

  • HTML、CSSの基礎

  • PhotoshopまたはFigmaの基礎


こんな方に
おすすめです

学習対象は
誰でしょう?

  • フレームワークなしでピュアJavaScriptでUIを実装したい開発者

  • CSS なしでも素早くスタイリングしたいデザイナー&パブリッシャー

  • 実務でよく使われるUIコンポーネントを自分で作ってみたい方

  • デザイナーと開発者の協業プロセスを身につけたい方

  • 最新のウェブ開発環境と効率的な開発手法を学びたい方

前提知識、
必要でしょうか?

  • html, css基礎

こんにちは
です。

219

受講生

23

受講レビュー

17

回答

5.0

講座評価

5

講座

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

カリキュラム

全体

35件 ∙ (4時間 44分)

講座資料(こうぎしりょう):

講座掲載日: 
最終更新日: 

受講レビュー

全体

1件

5.0

1件の受講レビュー

  • ppipa20102977님의 프로필 이미지
    ppipa20102977

    受講レビュー 4

    平均評価 5.0

    5

    30% 受講後に作成

    ¥4,016

    Michael Kwonの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!