강의

멘토링

로드맵

BEST
Programming

/

Web Development

Flex レスポンシブ ウェブサイト ポートフォリオ (The World's Best Cities)

フレックス(Flex)レスポンシブウェブサイトのパブリッシング制作過程により、パブリッシング中級スキルで行く基本基をしっかりとできます。また、フレックス(Flex)の基礎から応用し、本番UI制作講義が充実しています。フレックス(Flex)理論と実践例、そして反応型ウェブサイトの制作過程が20時間以上で、実戦経験に劣らない実力と自信を持つようになります。

  • codingworks
Flex
Responsive Web

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

こんなことが学べます

  • HTML+CSS+JQUERY の基本理論を基に、公開の実践能力を向上させる

  • Flex のレスポンシブ Web サイトの公開スキルとノウハウの向上

  • モバイル対応レスポンシブウェブパブリッシング制作能力(メディアクエリ)

  • PC バージョンとモバイル バージョンの両方で最適化されたレスポンシブ ウェブの完全な制作機能

  • position 属性と display 属性の正確な概念と活用

  • フレックス(Flex)コア理論と実戦UI制作能力

フレックス(Flex)レスポンシブウェブサイトポートフォリオ制作プロセス

「合計23時間以上のフレックス(Flex)レスポンシブウェブサイトパブリッシング講義」

テキストエディタの使い方(5講義、約2.5時間)
フレックス(Flex)コア理論(14講義、約2.5時間)
フレックス(Flex)タイプ別のUIアプリケーション例(12レッスン、約2.5時間)
フレックス(Flex)実戦UI制作(23講義、約6時間)
フレックス(Flex)実戦反応型ウェブサイト製作(23講義、約7時間)

フレックス(Flex)コア理論 PDF教材提供
レッスンで作成されたすべてのサンプル完成版をダウンロードする
Photoshop UIデザインファイル

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

学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。

質問文にコードなしでグローだけ問題を説明すれば、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。

▼フレックス(Flex)レスポンシブウェブサイト(The World's Best Cities) - PC版

▼ フレックス(Flex) レスポンシブウェブサイト(The World's Best Cities) - Mobile バージョン

フレックス(Flex)コア理論講義プレビュー

フレックス(Flex)タイプ別のUIアプリケーションの例講義プレビュー

フレックス(Flex)本番UI制作講義プレビュー

▼ フレックス(Flex)レスポンシブウェブサイト(The World's Best Cities) - PSDファイル提供(使用範囲制限なし)

▼フレックス(Flex)コア理論 PDF教材提供(全36ページ)


🙋🏻‍♂️ 講義受講のための選手知識

今回の講義は、FlexをテーマにしたFlexコア理論から応用と実践の例を製作する過程です。そして最後にFlexで配置するレスポンシブウェブサイトの制作過程も一緒にあります。今回の講義はFlex反応型というテーマをテーマに製作された講義という特徴がありますが、一般的なパブリッシング講義と同じです。

Flexの核心理論は基礎からじっくり進んでいるので、あまりにも恐れてはいけません。ただし、HTML+CSS の基本的な理解度は持っていなければなりません。今少し足りない場合は、HTML + CSSを勉強しながらフレックス(Flex)コースを聞くことができます。

の講義の中には、「HTML + CSS + JQUERYポートフォリオ中級実践パブリッシング講義」があります。この講義にある理論内容と実戦例制作内容が今回のレスポンシブウェブサイト制作必要な内容がほぼすべて入っています。まもなく、HTML+CSS+JQUERY 基本機をしっかり作れる講義だと思います。

今回のレスポンシブウェブサイト制作でいくつかを除いては「 HTML+CSS+JQUERY ポートフォリオ中級実戦パブリッシング講義」にある内容を1回目程度学習していただくと従うことがずっと簡単になると思います。

結論は...

入門やちょうど始める方だけでなければついてくるのは大きな問題ないと思われます。
他の講義を通じてHTML+CSSの基礎を身につけて来られたら、十分に追いつくだけでなく、なぜこれをするのかについての理解度を持ち、レスポンシブなウェブサイトの制作過程を終えることになると思います。


🙋🏻‍♂️効率的な学習のための学習方法

  • Section 3、Section 4、Section 5、例 6. 受講生の参考資料および Complete のダウンロードからダウンロードできます。 (セクション2の場合は理論学習映像なので[コーディングワークス] FLEXコア理論PDF教材.pdfファイルです。
  • セクション2. Flexのコア理論を学ぶときは、コア理論PDF教材で勉強してください。
  • セクション 3. フレックス (Flex) タイプ別の UI アプリケーションの例セクション 4. フレックス (Flex) 実践 UI の作成は、完成本全体を圧縮したファイルを受け取り、圧縮プッシュして希望の学習内容から始めてください。学習時に完成したので、index.htmlとstyle.cssファイルを削除して最初から始めてください。
  • セクション 5. フレックス(Flex) リアルレスポンシブウェブサイトの制作 学習の際に完成版をダウンロードし、圧縮プッシュした後index.html と style.css と responsive.css と custom.js ファイルは削除して最初から始めてください。
  • すべてのサンプル制作の完成本には、例制作のためのテキストコピー貼り付け用途のSOURCE.txtというファイルがありますので、よく活用してください。


🙋🏻‍♂️講義に関する予想される質問と必読事項

Q. 例制作しながら出てくる中級CSS理論説明映像はありますか
A. '例制作に基礎理論に出ていない中級理論がたくさん出ていますが、中級理論授業はどこで聞きますか? 'これらの質問が掲示板に頻繁に来ます。

今のコースは初級パブリッシングの例制作を​​する過程ではありません。初級~中級パブリッシングの例を製作する過程です。だからCSS初中級理論はある程度知っておくべきです。だから必ずしもよく知る必要はありません。 CSS超中級理論は、例を作成しながら継続的に繰り返します。そして、コーディングワークスのYouTubeパブリッシングチャンネルに[中級理論] CSS中級理論というプレイリストに、サンプル制作に必要な必須の中級理論映像が詳しいので、今のコースを聞きながら中級理論を並行すれば良いです。

Q.このコースを受講すれば、実務でパブリッシャーとして働くことができますか?
A. 今回の過程の最後のステップである「フレックス(Flex)実戦反応型ウェブサイト制作」を自分でいただければ十分に就職できると思います。もちろん、この過程でパブリッシャー就職のためのパブリッシングスキルをすべて扱うわけではありませんが、フレックスでレスポンシブなウェブを作ることができるということ一つだけでも十分に良い出発だと思います。

Q. 今回のプロセスに HTML+CSS+JQUERY パブリッシング理論を説明する理論パーツは別にありませんか?
A. 今受講する過程は、フレックスをテーマにフレックスを勉強し、フレックス実践制作し、フレックスレスポンシブウェブサイトを製作する過程であり、フレックス(Flex)理論を除き、入門初級過程に必要な基礎パブリッシング理論パーツは別にありません。基本理論パートと実戦例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。

Q. 勉強して知らないことがあれば質問はどこにありますか?
A. ご質問がございましたら、[質問&回答]掲示板に文を残すとすぐではなくても確認されれば答えをいたします。そして質問はできるだけ具体的にしてください。質問が具体的でない場合、十分な答えはなかなか簡単ではありません。だから質問するときは、気になる内容と一緒に作成中のHTML、CSS、JQUERYコーディング画面をキャプチャして添付していただくと、回答がとても簡単です。

Q. 例 完成版、PSDファイル、教材PDFファイルはどこで受け取りますか?
A. 受講生に提供されるファイルは、最後のセクション6。

Q. 講師様授業中にパブリッシャー就職本当の実戦ガイドを先に見ればいいでしょうか?
A. パブリッシングスキルをより身につけることも重要ですが、まずパブリッシャーとして基本基を備えることが優先されなければなりません。パブリッシャー就職実践ガイド電子ブック(PDF)では、パブリッシング基本基とは、好ましいコーディング習慣と原則、キャリアのようにパブリッシングするなどパブリッシャーとして必ず知るべき内容を慎重にまとめました。パブリッシャー就職実践ガイド電子書籍(PDF)をまず見て、パブリッシング基本基についての理解度を十分に持って学習することをお勧めします。下の画像をクリックすると、授業紹介内容をご覧いただけます。


▲パブリッシャー就職のためのコーディングワークスパブリッシング講義ロードマップ

❤コーディングワークスの受講生に来たパブリッシャー合格ニュース


▲国費支援パブリッシング過程 私に4ヶ月半程度学んだ学生ですが、就職したとカトクが来ました。


▲コーディングワークス個人ポートフォリオ制作オフライン講義受講生の面接就職結果カトクを受けました。 (2023.4.24)

❤コーディングワークスの受講生がパブリッシャー就職後に送ってくれたメール

 

先生こんにちは:)

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

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

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

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

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

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

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

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

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

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


先生こんにちは〜Inflearn受講生OOOです〜メールアドレスは他の受講生の回答見てわかりました..😊😊

ありがとうご挨拶お願いします

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

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

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

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

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

学習しながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合は、HTML、CSS、JSのコードをすべてアップロードしてください。

質問にコードなしでグローだけの問題を説明すると、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。


▲該当の講義コミュニティのよくある秩序ビューをまず確認してください〜

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

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

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

 

👨🏼‍🏫講師紹介

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

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

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Flex のレスポンシブ ウェブサイト作成プロセスを体験したいパブリッシャー

  • 実用的なウェブサイト制作に出版の基本スキルを活用したい方

  • パブリッシング個人ポートフォリオホームページ制作が必要な方

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

  • HTML+CSS 基本コーディング能力

こんにちは
です。

12,647

受講生

747

受講レビュー

2,114

回答

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

カリキュラム

全体

101件 ∙ (23時間 40分)

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

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

受講レビュー

全体

38件

5.0

38件の受講レビュー

  • nextdev님의 프로필 이미지
    nextdev

    受講レビュー 9

    平均評価 4.6

    5

    100% 受講後に作成

    こんにちはㅎ 講義が上がったことを確認してすぐに受講しました😄️😄️ 中級実戦パブリッシングから全編レスポンシブウェブサイト制作講義までみましたが、本当に詳しく理解しやすく説明してくれてとても満足して聞いたし、本物の講義頑張るたびに私自身が実力がすごくたくさん増えたことが感じられてとても気持ちが良くてふんだんです。 このような良い講義を作ってくださった講師にも感謝します! 私の個人的には、既存のレイアウトをキャッチする方法よりもFlex方式でレイアウトをキャッチする方が楽で簡単でしたが、IEの問題のためにFlexを正しく学んで使用したくても使用できませんでした。今回の講義もとても楽しみです〜

    • codingworks
      知識共有者

      コーダー様~コーディングワークスです。 製鋼の頑強な度に実力が感じられるという言葉が私をやりがいにしますね。 今のように着実に勉強していただき、いつも健康に気をつけてください。 すごい受講後ありがとうございます。^^ コーダー様の受講後期が予備受講生に良いガイドになると思います。

  • sally32109653님의 프로필 이미지
    sally32109653

    受講レビュー 1

    平均評価 5.0

    5

    5% 受講後に作成

    こんにちは。先生のYouTube講義で一生懸命聞く学生です。 それでも、フレックス講義がなくてあちこち探しているのに、先生がぴったり上げてすぐに上げるやいなや受講申請して聞いているのにウェブサイトが以上きれいですね。 聞いたら、Photoshopを少し変更して個人のホームページに書くことができますか? もしFlex Webサイトの制作を少しだけ変えて、個人のポートフォリオとしても書くことができるかどうか見てみましょう。 じゃあまた熱烈にしよう~~~

    • codingworks
      知識共有者

      サリー様~コーディングワークスです。 それでは。いくらでも個人用にお使いください。 Photoshop PSDファイルを提供するのは、パープリッシャーとしてもPhotoshopが慣れていない人もいるでしょう。では、個人ポートフォリオホームページを作ることを始めるのは簡単なことではありません。だから提供しているので、いくらでも使用してください〜 そのまま使用しても構いませんが、それでもPhotoshopファイル本人に合わせて修正して使用してください。 熱心で気になる点は質問してください〜^^

  • ljy329s님의 프로필 이미지
    ljy329s

    受講レビュー 11

    平均評価 5.0

    5

    78% 受講後に作成

    先生こんにちは 私はバックエンド開発者として働いていましたが、就職などの問題で急いで先生の講義を受講することになった受講生です。これまでcssはとても難しく、アプローチすることさえ勇気が出ない領域でした。なんとなく今回パブリッシング能力を急いで身につけなければならなくて心配していたところ、先生の講義を受講したのですが、とてもとても面白く理解しやすくて感謝しました。 つい最近まで個人プロジェクトをする時、中央揃えが難しくて嵐のように検索してGPTが教えてくれる通りにコピペするのに忙しかったのですが、今では理解して使用できるようになりました。講義序盤はこのような構造はどうやってレイアウトを組めばいいのだろう?と思いながら難しかったのですが、今では例題を見るとすぐにこのように分ければいいんだなと目に見えるようになりました😊😊 このように面白く詳細な講義をしてくださってありがとうございます。今はセクション9パートだけ残っているのですが、最後まで聞いた後、先生のグリッド講義まで続けて聞くようにします😊😊😊 ありがとうございます。

    • codingworks
      知識共有者

      受講レビューありがとうございます〜^^

  • applecubic39639님의 프로필 이미지
    applecubic39639

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    • codingworks
      知識共有者

      受講評ありがとうございます

  • skylove62557603님의 프로필 이미지
    skylove62557603

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    育児中で、パブリッシングの勉強をオンラインでしかできないのですが、 色々調べているうちに、Inflearnでコーディングワークス先生を知りました。 今、先生が出している講義の中で、ほぼ半分くらい聞いたと思います。 講義時間も長くて良かったですし、本当に丁寧に教えてくださいますし、 何より講義が退屈ではなく、理解しやすいように教えてくださいます。 特にフレックスの講義は、本当にとても役に立ちました。 ウェブパブリッシャーの勉強をされている方には、最高の講義だと思います。 今後も良い講義をたくさんお願いします。 私も一生懸命勉強して、必ず就職できるように頑張ります!

    • codingworks
      知識共有者

      受講レビューありがとうございます~^^

¥6,642

codingworksの他の講座

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

似ている講座

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