강의

멘토링

로드맵

BEST
Programming

/

Web Development

パブリッシングの核心理論PDF教材およびサンプルファイル(HTML+CSS+FLEX+JQUERY)

CodingWorks が長年の講義のノウハウを結集して制作した、HTML+CSS+FLEX+JQUERY パブリッシングの核心理論書教材。不要な内容を一切省き、必要な核心内容のみをまとめた最高のパブリッシング理論教材。パブリッシング入門のための核心理論書 PDF 教材とサンプルファイルのダウンロードコンテンツです。

  • codingworks
3시간 만에 완강할 수 있는 강의 ⏰
HTML/CSS
jQuery
Flex

学習した受講者のレビュー

こんなことが学べます

  • ウェブ パブリッシングの就職のために、パブリッシングの核心理論を学習する

  • HTML+CSS+JQUERY パブリッシングの核心理論

  • HTML の必須の核心理論

  • CSS の必須の核心理論

  • CSS 仮想クラスの核心理論

  • CSS Flex の基本理論

  • JQUERY 相互作用必須メソッド関数

✔️入門者にぜひ!必要な内容とヒントからなる理論教材と実習例制
✔️ 5年間の講義ノウハウが溶けたHTML+CSS+FLEX+JQUERYパブリッシング教材
✔️フロントエンドパブリッシング実務経験とオフライン講義ノウハウが集約されたPDF教材
✔️重い本を持っていないパブリッシングPDF教材が携帯電話の中に撮影〜!

💡 映像コンテンツではなくダウンロードコンテンツです。

  • コーディングワークスが長年のオフライン講義ノウハウを集大成したパブリッシング教材
  • コーディングワークス自己制作 HTML+CSS+FLEX+JQUERY パブリッシングコア理論教材
  • 不要な内容なしにぴったり!必要な核心内容だけをまとめた最高のパブリッシング理論教材
  • パブリッシングコア理論書 PDF教材とサンプルファイルダウンロードコンテンツ
  • 印刷して本で見ても遜色のない高画質PDF教材

💡パブリッシングコア理論PDF教材と理論例コンテンツの構成

1)核心と講義のノウハウが集約されたパブリッシングPDF教材(全187ページ)

  • HTMLコア理論(ブラケットの使い方、コア理論) - 45ページ
  • CSSコア理論(核心理論、仮想クラス) - 94ページ
  • FLEXコア理論(親属性、子属性、実践例) - 31ページ
  • JQUERYコア理論(核理論、相互作用メソッド関数) - 17ページ

2)HTML + CSS + FLEX + JQUERYパブリッシングコア理論htmlサンプルファイル(247個)

  • HTML理論例(html 20ファイル)
  • CSS必須コア理論例(html 72ファイル)
  • CSS仮想クラス理論例(html 37ファイル)
  • CSS Flex(Flex)理論例(html 27ファイル)
  • JQUERY理論例(html 65ファイル)
  • 理論学習用練習画像

💡パブリッシング勉強したいのですが、市中に出てきた教材は?

  • 一度厚すぎて分量が多い...
  • 何が重要なのか、それほど重要ではないのかわからない。
  • すぐに必要な核心だけを知りたいのですが、分量が多すぎて厳しさが出ません...
  • あまりにも本格的に目が覚めるように文がたくさん書かれている。
  • 言葉も難しく、文も多すぎます...
  • オフライン講義のように核心だけ撮ってくれる講義教材があってほしい。

効果的な学習のためにぜひ!コーディングワークスパブリッシングYouTubeを参照してください。


コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。

コーディングワークスパブリッシングYouTubeチャンネル: https: //www.youtube.com/codingworks

▼コーディングワークス受講生がパブリッシャー就職後にお送りいただいたメール(2021.10.13)

先生こんにちは:)

先生 Inflearn 講義聞いた学生キム・オジョンです。
今夏のプライベートポートフォリオに関してアドバイスを得ようとメール送信した学生です。
覚えていますか?😊😊

相違ではなく、
先生にアドバイスを得たポートフォリオでパブリッシャー就職成功したというニュースを伝えようとメールを送ります!

でも!
人に載せたポートフォリオを見て会社側から先に連絡が来て、ズームで面接を見て合格しました!
会社側では希望年俸を合わせてデザイン、開発業務をしない本当にパブリッシャー!仕事だけができる会社に入るようになりました。

キャリア職のパブリッシャーを求める会社でしたが、新入社員に連絡が来て、なぜ私に連絡を与えたのかと聞いてみました。
他の人のポートフォリオもたくさん見ましたが、私のポートフォリオで見た「機能定義書」が目立って連絡をいただきました

これがみな先生の講義のおかげだと思います。
先生の講義を聞かなかったら、私もちょうど普通のポートフォリオになりましたが、先生が言ってくれた蜂蜜のヒントで就職に成功することができました!

実際にはお会いできませんが、
ポートフォリオを作る中、先生の講義を見ながらとても頼りにして信じて頑張りました!

学園で長い時間の授業を聞きながら積み重ねた実力より先生の講義を聞いてポートフォリオを作った3ヶ月間の実力がすごく上昇したことが感じられます

切に欲しかったし、
先生が言ったように信じていたら、本当に良い結果が出ました。

本当にありがとうございました!

コロナに注意してください。
また良い講義で会いたいです:)

▼コーディングワークス受講生がパブリッシャー就職後にお送りいただいたメール(2021.11.26)

コーディングワークス先生、Inflearn講義の受講者です〜

先生こんにちは〜Inflearn受講生OOOです〜先生のメールアドレスは他の受講生の答え見てわかりました..😊😊
ありがとうご挨拶お願いします

これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一面面接に合格して出勤することにしました。 本当にありがとうございました。

実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が、本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ~ 😊😊

その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。

これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング~!

📖コーディングワークスパブリッシング理論PDF教材プレビュー

🌟 HTML教材の授業内容

  1. ウェブ制作に関する参考用語の整理
  2. Bracketsのインストールと使い方
  3. ダミーテキスト(Dummy Text)ハングル
  4. HTML 基本文書構造の作成
  5. テキスト書式を飾る(主な書式/その他の書式)
  6. リストを作成するタグ
  7. 画像の取り扱い (figure, img, figcaption)
  8. ハイパーリンク(Hyperlink)とアンカー(Anchor)の作成
  9. 直接コーディングするイメージマップを扱う
  10. 一時画像の使い方(placehold.it)
  11. YouTube動画のダウンロード
  12. HTML5とマルチメディア(オーディオ、ビデオを再生する、YouTubeのビデオを再生する)
  13. テーブルを作る(1~3)
  14. フォーム関連タグ(1~2)
  15. HTML5セマンティックタグで作成するレイアウト(1〜2)

🌟 CSS教材授業内容

CSSテキスト書式スタイルを飾る
• 必読事項 / CSS 基本文法 / CSS リンク方式 / CSS セレクタ / CSS 適用優先順位
•CSSテキスト関連スタイル/ Google Webフォントを活用する/ CSSリストスタイル/フォントアサムの使い方

CSSの背景色、背景画像を飾る
• CSS 背景色と画像を制御する / CSS 背景グラデーションの作成
•レイアウトスタイル(インライン要素対ブロック要素)
• レイアウトスタイル(表示プロパティ:inline、block、inline-block)
•ボックスモデル(Box Model)/ CSSテーブルスタイル

CSSポジションレイアウトの作成
•CSSポジション(要素の水平方向の整列:float、clear)
•CSSポジション(position属性/子要素を親要素の外に配置する)
• CSS ポジション(要素の表示と隠し:z-index、 visibility、opacity、display)

CSSバリアント&アニメーション
• transform: translate
transform: scale
transform: rotate, transform: origin
transform: skew
•CSSアニメーション(Animation)プロパティ
キーフレーム(Keyframes)の作成

CSS仮想クラス
•マウスオーバー仮想クラス:hover
•順序で最初に出現する要素を選択する:first-child、最後の要素を選択する:last-child
•順序をチェックする仮想クラス:nth-​​child、順序とタグの種類をチェックする仮想クラス:nth-​​of-type
•フォーム要素入力をクリックしたとき:focus、フォーム要素入力に入れるテキスト::placeholder

CSSアドバンストセレクタの活用
•属性選択子、隣接セレクタ、兄弟セレクタ
•フォーム要素checkboxとradioをクリックしたときの仮想クラス:checked
•仮想クラス:before:after

🌟 CSS Flex(Flexible Box)

親要素に書き込む属性

- display: flex
- justify-content
- align-items
- flex-direction
- フレックスラップ
- align-content

子要素に書き込む属性

- flex
- order
- align-self
- 子要素使用するマージン(margin)属性

Flex の適用例

- フレックスレイアウト(1) - 垂直中央 水平中央の入れ子にして使う
- フレックスレイアウト(2) - 親子でネストされたdivを水平に配置する
- フレックスレイアウト(3) – 上部ナビゲーションの作成
- フレックスレイアウト(4) – セマンティックタグレスポンシブレイアウト

🌟ジェイクエリー教材授業内容

  1. JQUERYとは?
  2. ジェイクエリー基本構文の作成
  3. JQueryの場所にJSファイルをリンクする
  4. ジェイクエリのセレクタ、関数、メソッドの種類
  5. ジェイクエリーの重要な理論 - 関数
  6. ジェイクエリー必須コア理論 – 必須メソッド
  7. ジェイクエリー 必須コア理論 – メソッド (表示/隠す)
  8. ジェイクエリー必須コア理論 - メソッド(フェード効果)
  9. ジェイクエリー 必須コア理論 – メソッド (クラス制御)
  10. ジェイクエリー 必須コア理論 – マウスイベント一覧
  11. ジェイクエリー必須コア理論 - プロパティ操作メソッドのリスト
  12. ジェイクォーリー必須コア理論 - 場所ナビゲーションセレクタリスト
  13. ジェイクエリー 必須コア理論 – プロパティナビゲーションセレクタリスト


🙋🏻‍♂️PDF教材に関する必読事項

Q. PDF教材でジェイクエリーパートが内容が多くありませんでしたか?

A) ジェイクエリは特性上内容があまりにも膨大であるため、PDF教材にすべての内容を入れるには無理があり、基本的な使い方と必須関数、イベント、メソッドの使い方についての内容があります。また、パブリッシング入門者初心者には何よりCSSとFLEXが重要であるため、PDF教材の90%に該当する170ページが割り当てられています。

Q. コーディングワークスパブリッシングの核心理論 PDF教材は市中教材と違う点は何ですか?

A. すぐに知らなくてもよい内容、重要度が落ちる内容は除いてぜひ!必要な核心だけを収めました。コーディングワークス教材は、長年にわたりオフライン学園で使用された教材をさらに強化して作ったPDF教材です。特に市販教材にないコーディングワークス講義のヒント(Tip)が多く含まれています。

Q.ダウンロードコンテンツ容量はいくらですか?

A)ダウンロードされるコンテンツの総容量は42メガです。 PDF理論教材は見やすく5つに分けてアップロードされました。個別に受け取ります。そして、実習例ファイルは圧縮プッシュすればフォルダに整理されています。

Q. 出力してみることもできますがPDF教材は高画質ですか?

A)PDFファイルは300dpi高画質で製作されているため、出力してもきれいなプリントができます。

Q. ダウンロードしたコンテンツの使用用途はどうなりますか?

A)ダウンロードしたすべてのコンテンツは、コーディングワークスの独自のファイルです。コーディングワークスPDF教材は、受講申請された本人の個人学習用途以外に、他のいかなる目的にも使用または他人に配布してはなりません。また、PDFファイルにコーディングワークを表示する部分を編集して講義用資料として使用することもできません。

🙋🏻‍♂️質問する前に必ず!読んでください〜!

学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。そして、コードをアップロードするときは、ビジュアルスタジオコードキャプチャエクステンション、CodeSnapを使用すると便利です。ビジュアルスタジオコードキャプチャエクステンション、CodeSnapの使い方については、以下のコーディングワークスブログにある内容をご覧ください。

■コードキャプチャエクステンションCodeSnapの使い方: https: //www.inflearn.com/blogs/1672

👨🏼‍🏫講師紹介

  • (現在)フリーランサーフロントエンドパブリッシャー
  • ダージョはコンピュータアカデミーWebパブリッシングインストラクター
  • 今コンピュータアカデミーWebパブリッシングインストラクター
  • フロントエンドパブリッシャー、フロントエンドパブリッシング専門講師
  • 今コンピュータアカデミーウェブデザイン機能士実技資格証明
  • ラクピアICTトレーニングセンターフロントエンドパブリッシングマスターコース講師
  • イージー&エデューフロントエンドパブリッシング、UI/UXデザイン
  • HTML + CSS + JQUERYパブリッシングYouTubeチャンネル「コーディングワークス」を運営
  • コーディングワークスパブリッシングYouTubeチャンネル - https://www.youtube.com/codingworks

インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 初めてウェブコーディングを始める方

  • HTML+CSS+JQUERY パブリッシング講義資料が必要な方

  • Web 出版に関する理解を深めたいWeb プランナー

  • フロントエンド パブリッシングの理解を深めたい開発者の方

  • ウェブサイトのメンテナンス修正補完を独自にしたい方

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

  • 基本的なコンピュータ利用能力とインターネットブラウザの使用能力

  • コーディングのための基本的な英語タイピング能力

こんにちは
です。

12,610

受講生

743

受講レビュー

2,113

回答

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

カリキュラム

全体

9件 ∙ (12分)

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

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

51件

4.7

51件の受講レビュー

  • 서영님의 프로필 이미지
    서영

    受講レビュー 1

    平均評価 5.0

    5

    67% 受講後に作成

    목차를 보니 핵심이 잘 정리되어 있는 것 같아서 수강하게 되었는데, 핵심이라고 해서 간단히 겉핥기가 아닌 중요한 포인트를 짚어주는 내용덕분에 더 집중하게 되었습니다.

    • 코딩웍스(Coding Works)
      知識共有者

      수강평 감사합니다~!!!

  • 명은님의 프로필 이미지
    명은

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    다른 교재에서는 실무에서 사용할수 있는 것들이 없고 기초만 담겨져있어서 어려움이 있었는데 이 책은 활용할 수 있는 것들만 담겨져 있어서 좋았습니다!

  • Geunhyeong Kim님의 프로필 이미지
    Geunhyeong Kim

    受講レビュー 13

    平均評価 5.0

    5

    100% 受講後に作成

    알찬 예제외 좋은 교재입니다. 업무할 때 도움이 될 것 같네요. 감사합니다

    • 퍼블리싱 업무하시는군요~ 도움이 되셨다니 다행이에요. Geunhyeong Kim님 수강평 감사해요.

  • jamesjuwon님의 프로필 이미지
    jamesjuwon

    受講レビュー 16

    平均評価 4.9

    3

    100% 受講後に作成

    그저 그랬습니다. 파는 양반들이야 본인들 노하우라고 할 거고, 필요한 사람들에게는 가치가 있다고 하겠지만, 좀 비싼 느낌입니다. 아주 급한 분이시라면 고려해 볼 만할 거 같군요.

    • jamesjuwon님 수강평 감사합니다. 아쉬운 점 있는 부분은 양해부탁드립니다.

  • 김가희님의 프로필 이미지
    김가희

    受講レビュー 10

    平均評価 5.0

    5

    89% 受講後に作成

    교재가 꼼꼼해서 초급자가 보기에 좋은 것 같아요!

期間限定セール

¥13,200

25%

¥2,173

codingworksの他の講座

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

似ている講座

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