
HTML+CSS+JS ポートフォリオ実戦パブリッシング(シーズン3)
codingworks
HTML+CSS+JS 実践ポートフォリオ(シーズン3)は、パブリッシングの実践事例を制作する過程です。様々な実践事例制作を通じて、パブリッシングスキルを中上級へと成長させることができます。34時間以上の十分な講義時間と、様々な種類の実際制作過程であるため、制作ノウハウと応用方法を十分に習得できます。
초급
HTML/CSS, JavaScript, jQuery
[Tailwind CSS実践ポートフォリオパブリッシング]は、Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。
Tailwind CSS を活用したさまざまな実践例の作成
Tailwind CSS 独自の簡単モバイル対応レスポンシブ作業
Tailwind ユーティリティ クラスと CSS のすべてのプロパティ
簡単な説明で Tailwind CSS の理解度を高める
Tailwind CSS のスキルと成果物を必要とする Web パブリッシャー
Flex を使用して簡単にレスポンシブな Web サイトを作成する
Tailwind CSS を使用してさまざまなフォームを作成する
2025年1月22日にTailwind CSS v4.0に関連する2つのビデオが更新され、PDF教材ファイルも更新されました。アップデート映像とPDF教材ファイルをご確認ください。
▼映像アップデート一覧
[アップデート] Tailwind CSS v4.0 CLIのインストールと環境設定
[アップデート] Tailwind CSS v4.0カスタムテーマの環境設定
▼教材アップデート一覧
[参考資料] Tailwind CSS特別属性の整理とHTMLワイヤフレーム構造
Tailwind CSSを活用して26種類以上の実践例を製作する過程です。実践例を素早く多様に制作することで、その中で必須の理論を説明します。この講義は、開発者とパブリッシャーが作成するTailwind CSSスタイリングを中心に作成されました。
Webパブリッシュと開発者にとって、就職と転職のために大きな助けになると思います。
Tailwind CSS本番ポートフォリオパブリッシングは、実践例の制作プロセスでのみ構成されています。だから退屈ではないので、Tailwind CSSの本当の楽しみを感じることができます。実戦例を一つずつ作っていきながらTailwind CSSの実力も向上し、Tailwind CSSで製作した実戦例を個人ポートフォリオにワークとして残すことができます。
合計14時間以上の講義時間と同じくらい忠実な内容と体系的な理解を助ける理論の説明で製作されたTailwind CSSポートフォリオ本番制作映像を学習できるようになります。
26以上の多様なTailwind CSS本番サンプル制作(完成版のプレビュー映像参照)
HTMLワイヤフレーム構造の製作過程を詳細に実戦を通じて示します。
HTMLワイヤフレーム構造の作成能力を向上させることで、パブリッシングのスキルを最大化することができます。
Webパブリッシングに役立つさまざまな参考資料を提供する
Tailwind CSS CLI環境の構築と注意事項
Tailwind CSSの実践例 - ナビゲーション
Tailwind CSS実践例 - カード(Card)UIデザイン
Tailwind CSS 実践例 - セクション UI デザイン
Tailwind CSSの実践例 - タブメニューコンテンツ(Tab Menu Content)
Tailwind CSSの実践例 - ログインフォーム(Login Form)デザイン
CSS Frameworks Rankingで現在まで着実に人気を享受しており、満足度1位をしているTailwind CSSは最近世界で最もホットなCSSフレームワークです。ホットな理由の中で最も代表的なのがまさにユーティリティクラスを使った創造的なスタイリングができ、また、良いクオリティのデザインを作るための作業時間がかなり早いという点だと考えられます。
画像ソース:OSS Insight( https://ossinsight.io/collections/css-framework/)
Q. Tailwind CSSの実践ポートフォリオパブリッシングは、理論講義を聞かずにすぐに受講できますか?
Tailwind CSSが初めての場合は、コーディングワークスの講義中に「Tailwind CSSで作る素晴らしいWeb UIスタイリング」という理論講義を聞いて、その講義を受講してください。
その講義をすぐに受講する場合は、 Tailwind CSS公式サイトを先に学習し、公式サイトを並行しながら学習してください。
Tailwind CSSで作る素晴らしいWeb UIスタイリングレッスンの紹介: https://inf.run/pjqKk
Tailwind CSS公式サイト: https: //tailwindcss.com/
Tailwind Cheat Sheet: https://www.creative-tim.com/twcomponents/cheatsheet
Q. Tailwind CSS本番ポートフォリオパブリッシングで作成された完成したHTMLを提供しますか?
はい。受講生の参考資料ダウンロードセクションでは、ビデオで作成されたすべての実践例の完成した本を含む圧縮ファイルを入手できます。 (HTML、CSS、JS、画像、参照サイト、ソーステキスト、ワイヤフレームPDFなど)
講義ビデオの開始前にダウンロードした圧縮ファイルをプッシュして、index.html、style.cssファイルを削除して開始してください。ソースフォルダとimagesフォルダを除いて、HTMLの基本構造から作成してください。もし完成版を参照する必要がある場合は、いつでも圧縮ファイルを解凍してみてください。
Q. 受講前に先行するウェブコーディング能力はどのくらいですか?
まず、HTML + CSSの基本的な理解が必要です。たとえば、float、position 属性の理解が不足している方はついてきてちょっとめちゃくちゃです。この講義は基本的なパブリッシング能力を持つ方々を念頭に置いて製作された講義です。参考にしてください!
JQueryやJavaScriptの先行能力はあまり必要ありません。ただし、ジェイクエリの不可欠なコア理論の理解が必要です。クラス制御、要素ナビゲーションなど、講義全体でジェイクエリーベースで相互作用を作っており、JavaScriptは例を経験する面で使用するため、JavaScript能力に対する負担はありません。
Q. 例の学習順序は、最初から順に学習するのですか?
サンプル学習では、順序を守る必要はありません。ご希望のセクションから学習してください。
セクションによる難易度はあまり決まっていません。学習したい例を個別に選別的に学習しても構いません。
[TMI] パブリッシングを勉強して実践例を製作する際に知っておくべき理論がとても多いです。心のような理論的な部分をすべてまとめて映像を作りたいのですが、現実的に難しい部分があります。 Tailwind CSS公式サイトを通じて不足している部分は満たしてください。
Q. 実践例 完成本と理論例 完成本はどこからダウンロードできますか?
レッスンビデオで作成されたすべてのコンプリートファイル(html、css、js、画像ファイルなど)は、下の最後のセクション(セクション8)にすべてのコンプリートをダウンロードできます。
。
▲ Tailwind CSS グラデーション
▲ナビゲーション - 一般型上部ナビゲーション(3種類)
▲ナビゲーション - 反応型トップナビゲーション
▲ナビゲーション - ソーシャルメディアアイコンホバーナビゲーション
▲ナビゲーション - カスタムドロップダウンセレクト
▲ナビゲーション - サイドバーアイコンナビゲーション
▲カードUIデザイン - figureカードホバーエフェクト(groupセレクタの使い方)
▲カードUIデザイン - 新商品カードUIデザイン
▲カードUIデザイン - プロフィールカードホバーフリップ(3D Card Flip)
▲カードUIデザイン - Apple TV購読プランを選択(:has仮想クラス)
▲セクションUIデザイン - グラスモフィズム(Glassmorphism)ログインフォーム
▲セクションUIデザイン - アニメモーダル(Modal)
▲セクションUIデザイン - チケットカードUI(Frontend Online Class)
▲セクションUIデザイン - テーブルデザイン(Premier League)
▲セクションUIデザイン - アコーディオンコンテンツ with Emoji
▲セクションUIデザイン - モバイルプラン画面(ホバーツールチップ)
▲セクションUIデザイン - Dark Modeの作成(ft.SVGの使い方)
▲セクションUIデザイン - レスポンシブスキル紹介セクション
▲セクションUIデザイン - ニュース紹介カードサムネイルセクション(Latest news)
▲セクションUIデザイン - Webホスティングプラン価格表(Price Plan)
▲セクションUIデザイン - ウェディングレスポンシブイントロセクション(Testimonial Intro)
▲タブメニューコンテンツ - タブメニューコンテンツ(CSS方式、JQUERY方式)
▲タブメニューコンテンツ - 男女区分デートアプリタブメニュー
▲モバイルアプリ壁紙アニメーションログイン
▲レスポンシブコンタクトフォーム - Contact Form
▲パスワードを見て隠すログインフォーム
▲CSS検証コンタクトフォーム - Dark Mode
セクション1.講義の紹介
[講義紹介] Tailwind CSS本番ポートフォリオパブリッシング
[実用例のプレビュー] Tailwind CSS本番ポートフォリオパブリッシング
セクション 2. Tailwind CSS CLI 環境の構築と注意事項
CDN環境でTailwind CSSユーティリティクラスを使用する
CDNおよびCLI環境でTailwind CSS Configを変更する(ft. Webフォント)
Tailwind CSSでCLI環境を構築する(ft. Node.js)
CLI環境でのユーティリティクラスの使用とWebフォントの利用
実践例制作のための準備とグラデーションの使用(背景、テキスト)
セクション 3. Tailwind CSS 実践例 - ナビゲーション
ナビゲーション - 一般型上部ナビゲーション(3種類)
ナビゲーション - レスポンシブトップナビゲーション
ナビゲーション - ソーシャルメディアアイコンホバーナビゲーション
ナビゲーション - カスタムドロップダウンセレクト
ナビゲーション - サイドバーアイコンナビゲーション
セクション 4. Tailwind CSS 実践例 - カード (Card) UI デザイン
カードUIデザイン - figureカードホバーエフェクト(グループセレクタの使い方)
カードUIデザイン - 新製品カードUIデザイン
カードUIデザイン - プロフィールカードホバーフリップ(3D Card Flip)
カードUIデザイン - Apple TVサブスクリプションプランの選択(:has仮想クラス)
セクション 5. Tailwind CSS 実践例 - セクション UI デザイン
セクションUIデザイン - Glassmorphismログインフォーム
セクションUIデザイン - アニメーションモーダル
セクション UI デザイン - チケットカードUI (Frontend Online Class)
セクションUIデザイン - テーブルデザイン(Premier League)
セクションUIデザイン - アコーディオンコンテンツ with Emoji
セクションUIデザイン - モバイルプラン画面(ホバーツールチップ)
セクションUIデザイン - Dark Modeの作成(ft.SVGの使い方)
セクションUIデザイン - レスポンシブスキル紹介セクション
セクションUIデザイン - ニュース紹介カードサムネイルセクション(Latest news)
セクションUIデザイン - Webホスティングプラン価格表(Price Plan)
セクションUIデザイン - ウェディングレスポンシブイントロセクション(Testimonial Intro)
セクション 6. Tailwind CSS 実践例 - タブメニューコンテンツ (Tab Menu Content)
タブメニューコンテンツ - タブメニューコンテンツ(CSS方式、JQUERY方式)
タブメニューコンテンツ - 男女別のデートアプリタブメニュー
セクション7. Tailwind CSSの実践例 - ログインフォーム(Login Form)デザイン
モバイルアプリの壁紙アニメーションログイン
レスポンシブコンタクトフォーム - Contact Form
パスワードを表示隠すログインフォーム
CSS検証コンタクトフォーム(1) - Light Mode
CSS検証コンタクトフォーム(2) - Dark Mode
セクション8. [ダウンロード]完成した本と参考資料をダウンロードする
[ダウンロード] Tailwind CSS本番の例 完成版のコレクション
[参考資料] Tailwind CSS特別属性の整理とHTMLワイヤフレーム構造
[参考資料]ビジュアルスタジオコード(Visual Studio Code)必須設定
コーディングワークスは現在までに300人以上の国費パブリッシングコースの学生にパブリッシング理論、活用、個人ポートフォリオホームページ制作講義を行っています。特に、パブリッシャー就職のためのすべての準備過程をAからZまで完全にガイドしながら、学生のほとんどのコース終了後すぐに就職ができるように、長年にわたりパブリッシング講義だけが専門的にやってきた講師です。また、Inflearnでパブリッシング関連講義を進めながら、Inflearnの受講生たちにも役に立ったとの評価も受けています。
❤インフォーカスインタビューを見る:https: //www.inflearn.com/pages/infocus-8-20230704
学習対象は
誰でしょう?
Tailwind CSS の使用能力を追加して、就職転職競争力を高めたいパブリッシャー
Tailwind CSS を簡単にアクセスして活用したい Web パブリッシャー
Tailwind CSS を簡単にアクセスして活用したい開発者
前提知識、
必要でしょうか?
HTML+CSS の基礎
12,541
受講生
737
受講レビュー
2,105
回答
4.9
講座評価
23
講座
■ [현재] 국비 퍼블리싱 & 프론트엔드 강사
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱
🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704
全体
42件 ∙ (14時間 35分)
講座資料(こうぎしりょう):
全体
4件
5.0
4件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
受講レビュー 9
∙
平均評価 5.0
5
私は、安易に判断することを好まないため、100%受講してから書こうと思っていたのですが、とても気に入って成長している自分を見て、Coding Worksという人が本当にすごいし、かっこいい、最高に見え始めました。 私は、1つの講義または1つの内容の起承転結が明確であるべきだと考えていますが、この人はそのような起承転結をうまく表現していると思います。 これから、おいしいものを少し減らして、Coding Worksさんの最新の講義に投資しようと思います。本当に、学習している間ずっと幸せで、タップダンスを踊らせたくなるような講義です。素晴らしい講義、素晴らしい作品を作ってくれてありがとうございます。 Coding Worksさん、そしてこのレビューをご覧になった皆さん、皆さんもよい一日をお過ごしください!
受講評価ありがとうございます!!
受講レビュー 4
∙
平均評価 5.0
受講レビュー 1
∙
平均評価 5.0
¥6,502
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!