Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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,544

受講生

738

受講レビュー

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

カリキュラム

全体

101件 ∙ (23時間 40分)

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

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

受講レビュー

全体

38件

5.0

38件の受講レビュー

  • Next님의 프로필 이미지
    Next

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    안녕하세요ㅎ 강의 올라온거 확인하고 바로 수강했습니다😄️😄️ 중급 실전 퍼블리싱부터 전편 반응형 웹사이트 제작 강의까지 다 봤는데 정말 자세하게 이해하기 쉽게 설명해주셔서 너무 만족스럽게 들었고, 진짜 강의 완강할 때마다 제 스스로가 실력이 엄청 많이 늘었다는게 느껴져서 너무 기분이 좋고 뿌듯합니다. 이런 좋은 강의 만들어주신 강사님께도 너무 감사드립니다! 제 개인적으로는 기존 레이아웃잡는 방식보다 Flex방식으로 레이아웃 잡는게 더 편하고 쉬웠는데 IE 문제때문에 Flex를 제대로 배우고 사용하고 싶어도 사용하지 못했었는데 이제 IE 지원 중단을 한다고하니 앞으로 Flex도 꽤 자유롭게 사용할 수 있을꺼 같아 이번 강의도 너무 기대됩니다~

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

      코더님~ 코딩웍스입니다. 제강의 완강할 때마다 실력이 느신다는 말이 저를 보람있게 하네요. 지금처럼 꾸준히 공부해주시고 늘 건강 조심하시구요. 알찬 수강후기 감사해요.^^ 코더님 수강후기가 예비 수강생들에게 좋은 가이드가 될거라고 생각합니다

  • sally3210님의 프로필 이미지
    sally3210

    受講レビュー 1

    平均評価 5.0

    5

    5% 受講後に作成

    안녕하세요. 선생님의 유튜브 강의 열심히 듣는 학생입니다. 그렇잖아도 플렉스 강의가 없어서 여기저기 찾는중이었는데 선생님이 딱 올리셔서 바로 올리자 마자 수강신청하고 듣는중인데 웹사이트가 넘 예쁘네요. 다 듣고 나면 포토샵 조금 수정해서 개인 홈페이지에 써도 되겠지요? 혹시 플렉스 웹사이트 제작한거 조금만 바꿔서 개인 포트폴리오로도 써도 되는지 여쭤봅니다. 그럼 다시 계속 열공하러 ~~~

    • 샐리님~ 코딩웍스입니다. 그럼요. 얼마든지 개인 용도로 사용하세요. 포토샵 PSD 파일을 제공하는건 퍼플리셔라고 해도 포토샵이 익숙하지 않은 사람들도 있잖아요. 그럼 개인 포트폴리오 홈페이지 만드는거 시작하는게 쉬운 일이 아니잖아요. 그래서 제공하는거니까 얼마든지 사용하세요~ 그대로 사용하셔도 되지만 그래도 포토샵 파일 본인에 맞게 수정하셔서 사용하세요. 열공하시고 궁금한 점은 질문주세요~^^

  • ljy329s님의 프로필 이미지
    ljy329s

    受講レビュー 11

    平均評価 5.0

    5

    78% 受講後に作成

    선생님 안녕하세요 저는 백앤드 개발자로 근무하다 취업등의 문제로 급하게 선생님의 강의를 듣게된 수강생입니다. 그동안 css는 너무 어렵고 접근하기조차 용기가 안나는 영역이었습니다. 어쩌다보니 이번에 퍼블리싱 능력을 급하게 키워야해서 걱정하다 선생님 강의를 들었는데 너무 너무 재밌고 이해가 잘되는지라 감사했습니다. 불과 얼마전만해도 개인프로젝트를 할때 가운데정렬이 어려워 폭풍 검색하고 GPT가 알려주는 그대로 붙여넣기에 바빴는데 이제는 이해하고 사용할 수 있게 됐습니다. 강의 초반만 해도 이런구조는 어떻게 레이아웃을 잡아야하는거지? 생각하며 어려웠었는데 이제는 예제를 보자마자 이렇게 나누면 되겠구나가 눈에 보이더라구요ㅎㅎ 이렇게 재밌고 상세한 강의를 해주셔서 감사합니다. 이제 섹션 9 파트만 남았는데 마저 들은후 선생님의 그리드 강의까지 이어 듣도록 하겠습니다ㅎㅎㅎ 감사합니다.

  • applecubic3님의 프로필 이미지
    applecubic3

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

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

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    육아를 하고 있어서 퍼블리싱 공부를 온라인으로 밖에 못하는데 여기저기 알아보다가 인프런에서 코딩웍스 선생님을 알게 되었습니다. 지금 선생님한테 나온 강의 중에서 거의 반정도 들은 것 같아요. 강의시간도 길어서 좋았고 정말 꼼꼼하게 가르쳐 주시고 무엇보다 강의가 지루하지가 않고 이해가 잘 되게 가르쳐 주십니다. 특히 플렉스 강의는 진짜 너무너무 도움이 되었던 것 같아요. 웹퍼블리셔 공부 하시는 분들에게는 최고의 강의인 것 같습니다. 앞으로도 좋은 강의 많이 부탁드립니다. 저도 열심히 공부해서 꼭 취업하도록 하겠습니다 ~~

¥6,566

codingworksの他の講座

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

似ている講座

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