강의

멘토링

로드맵

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,624

受講生

745

受講レビュー

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% 受講後に作成

    Xin chào haha Mình kiểm tra bài giảng đã upload lên và lấy ngay😄️😄️ Tôi đã xem tất cả mọi thứ từ xuất bản thực tế trung cấp đến các bài giảng dài và đầy đủ về tạo trang web đáp ứng, và tôi rất hài lòng với các bài giảng vì họ giải thích mọi thứ một cách chi tiết và dễ hiểu. Mỗi khi tôi hoàn thành bài giảng, tôi cảm thấy như vậy. kỹ năng của tôi đã tiến bộ rất nhiều nên tôi cảm thấy rất vui và tự hào. Cảm ơn người hướng dẫn rất nhiều vì đã tạo ra một khóa học tuyệt vời như vậy! Cá nhân tôi thấy việc bố trí bằng phương pháp Flex thuận tiện và dễ dàng hơn so với phương pháp bố cục hiện có, nhưng do vấn đề về IE, tôi không thể tìm hiểu và sử dụng Flex đúng cách ngay cả khi tôi muốn, nhưng bây giờ hỗ trợ IE là đã ngừng hoạt động, tôi nghĩ tôi sẽ có thể sử dụng Flex khá thoải mái trong tương lai. Tôi cũng rất mong chờ bài giảng này~

    • codingworks
      知識共有者

      Coder~ Đây là Công việc viết mã. Tôi thật vui khi biết rằng kỹ năng của mình được cải thiện mỗi khi tôi trở nên bướng bỉnh hơn trong việc luyện thép. Hãy tiếp tục học tập như hiện tại và luôn giữ gìn sức khỏe nhé. Cảm ơn bạn đã đánh giá khóa học có giá trị. ^^ Tôi nghĩ bài đánh giá khóa học của Coder sẽ là hướng dẫn tốt cho các học viên tương lai.

  • sally32109653님의 프로필 이미지
    sally32109653

    受講レビュー 1

    平均評価 5.0

    5

    5% 受講後に作成

    Xin chào. Tôi là một học sinh chăm chỉ nghe các bài giảng trên YouTube của thầy. Mặc dù vậy, không có bài giảng Flex nào nên tôi đã tìm khắp nơi nhưng giáo viên đã đăng nó và ngay khi nó được đăng, tôi đã đăng ký khóa học và bắt đầu tham gia. Trang web thực sự rất đẹp. Nghe xong bạn có thể chỉnh sửa một chút bằng Photoshop và sử dụng trên trang chủ cá nhân của mình phải không? Tôi muốn hỏi liệu có thể thay đổi trang web Plex một chút và sử dụng nó làm danh mục đầu tư cá nhân hay không. Vậy thì hãy tiếp tục làm việc chăm chỉ nhé ~~~

    • codingworks
      知識共有者

      Sally~ Đây là Công việc viết mã. Chắc chắn. Hãy sử dụng nó cho mục đích cá nhân. Mặc dù chính nhà xuất bản cung cấp tệp Photoshop PSD nhưng vẫn có những người chưa quen với Photoshop. Chà, bắt đầu tạo một trang chủ danh mục đầu tư cá nhân không phải là một việc dễ dàng. Đó là lý do tại sao chúng tôi cung cấp nó cho bạn, vì vậy hãy thoải mái sử dụng nó nhé~ Bạn có thể sử dụng nó như hiện tại, nhưng vui lòng sửa đổi tệp Photoshop để phù hợp với nhu cầu của bạn. Hãy làm việc chăm chỉ và hỏi bất kỳ câu hỏi nào bạn có ~ ^^

  • ljy329s님의 프로필 이미지
    ljy329s

    受講レビュー 11

    平均評価 5.0

    5

    78% 受講後に作成

    Xin chào thầy Tôi là một học viên đang làm việc với vai trò backend developer nhưng do vấn đề tìm việc làm nên đã vội vàng tham gia khóa học của thầy. Suốt thời gian qua, CSS là một lĩnh vực quá khó khăn và tôi thậm chí không có dũng khí để tiếp cận. Không biết sao lần này tôi phải nhanh chóng nâng cao khả năng publishing nên đã lo lắng rồi nghe khóa học của thầy, nhưng thật sự rất thú vị và dễ hiểu nên tôi rất biết ơn. Chỉ cách đây không lâu, khi làm dự án cá nhân, việc căn giữa còn khó khăn nên tôi phải tìm kiếm như điên và bận rộn copy-paste theo đúng những gì GPT chỉ dẫn, nhưng giờ đây tôi đã có thể hiểu và sử dụng được rồi. Ngay cả ở đầu khóa học, tôi còn nghĩ "cấu trúc như này thì phải bố trí layout như thế nào đây?" và cảm thấy khó khăn, nhưng giờ đây chỉ cần nhìn thấy ví dụ là tôi đã thấy "à, chia như này là được rồi" 😊😊 Cảm ơn thầy đã có những bài giảng thú vị và chi tiết như vậy. Giờ chỉ còn lại phần section 9, sau khi nghe xong tôi sẽ tiếp tục nghe khóa học grid của thầy 😊😊😊 Cảm ơn thầy.

    • codingworks
      知識共有者

      Cảm ơn bạn đã đánh giá khóa học~^^

  • applecubic39639님의 프로필 이미지
    applecubic39639

    受講レビュー 2

    平均評価 5.0

    5

    31% 受講後に作成

    • codingworks
      知識共有者

      Cảm ơn đánh giá khóa học.

  • skylove62557603님의 프로필 이미지
    skylove62557603

    受講レビュー 10

    平均評価 5.0

    5

    100% 受講後に作成

    Vì đang phải chăm con nhỏ nên tôi chỉ có thể học xuất bản trực tuyến, Sau khi tìm hiểu khắp nơi, tôi đã biết đến thầy Coding Works trên Inflearn. Hiện tại, tôi đã học được gần một nửa số bài giảng của thầy. Thời lượng mỗi bài giảng dài nên rất tốt, thầy dạy rất kỹ lưỡng, Và trên hết, bài giảng không hề nhàm chán mà lại rất dễ hiểu. Đặc biệt, bài giảng về Flex thực sự rất hữu ích. Tôi nghĩ đây là bài giảng tốt nhất cho những ai đang học web publisher. Mong thầy sẽ có nhiều bài giảng hay trong tương lai. Tôi cũng sẽ cố gắng học tập chăm chỉ để có thể xin được việc làm ~~

    • codingworks
      知識共有者

      Cảm ơn bạn vì những đánh giá về khóa học ạ~^^

期間限定セール、あと2日日で終了

¥895,297

23%

¥6,704

codingworksの他の講座

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

似ている講座

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