Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Web Development

レスポンシブ ウェブサイト ポートフォリオ (App Official Landing Website)

レスポンシブウェブサイトポートフォリオ(App Official Landing)の制作過程はHTML+CSS+JQUERYパブリッシングで、レスポンシブウェブサイト全体の製作過程を通じてパブリッシング中級実力に行く基本基をしっかりして実戦パブリッシングのノウハウを持つようになります。特に、ウェブサイト全体の制作過程を十分な説明と実践作業で経験し、個人ポートフォリオウェブサイトの制作に自信を持つようになります。必要に応じて使用する必要があるジェイクエリプラグインで、Scroll Reveal AnimationとSlickスライダの使い方を学びます。レスポンシブ制作方式は、従来方式のfloatとpositionを利用したレスポンシブレイアウト制作方式で製作します。しかし、ある特定の要素ではFlexを使用する部分もあります。

  • codingworks
HTML/CSS
jQuery
Responsive Web

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

こんなことが学べます

  • 全体的なウェブサイトの公開スキルとノウハウの向上

  • 既存のfloatとpositionを利用して99%配置したレスポンシブレイアウト

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

  • hover before after checked active 仮想クラスの理解と活用

  • JQUERYコア理論学習と応用

  • CSS タブ メニュー コンテンツ、JQUERY アコーディオン メニュー コンテンツの作成能力

  • CSS3 フィルター プロパティと object-fit プロパティの活用

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

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

  • スクロール レベル アニメーション プラグイン

  • テキスト入力アニメーションプラグイン

  • Slick スライダーの使用法とカスタム CSS の修正方法

レスポンシブウェブサイトポートフォリオ
(App Official Landing) 制作プロセス

「合計22時間以上のレスポンシブウェブサイトポートフォリオ講義」
「核理論の授業と反応型ウェブサイト制作過程」
「パブリッシャー就職のためのレスポンシブポートフォリオホームページ制作コース」
「実務パブリッシング本当の実力のためのハードコーディングクラス」
「9時間以上の必須ジェイクエリプラグインの使い方とCSS必須コア理論映像」
「現職パブリッシャー兼パブリッシング専門講師の入念かつ体系的な授業」


📔レスポンシブウェブサイトポートフォリオ制作プロセスの特徴

01) 純粋なCSSレイアウト配置方式で作るレスポンシブウェブサイト

02) クローンサイト、コピーサイトではなくコーディングワークスが直接UIデザインからパブリッシングまで製作したウェブサイト

03) 講義セクション別14個の段階別完成本とUIデザインPSDファイル提供
※Photoshop UIデザインはPhotoshop CC 2019バージョンで製作されました。

04) 合計22時間以上の製作講義

05)理論学習と制作のためのテキストエディタ
今回のレスポンシブウェブサイト制作講義で使用されたテキストエディタは、ビジュアルスタジオコード(Visual Studio Code)ブラケット(Brackets)です。もちろん、他のテキストエディタを使用しても大丈夫です。受講生がおなじみのテキストエディタを使用してください。ただし、リアルタイムプレビュー機能を持たないテキストエディタはフォローしてください。

06) シームレスな制作過程学習のための必須コア理論映像(Slick Slider, Reveal Animation)
レスポンシブウェブサイトのポートフォリオ(App Official Landing Website)の制作講義を除き、ジェイクエリプラグインの使い方、制作に不可欠なCSS理論など、9時間以上のコア理論講義映像があります。その映像を見ずに実戦制作セクションにお越しいただくと、追いつくこともできます。 [セクション 2. 必須のジェイクエリプラグインの使い方と CSS 必須のコア理論] で不慣れであるか不足していると思われる内容を十分に学習してください。


💡PCレイアウトセクション切り替えプレビュー(Preview)

💡 Mobile レイアウト UI/UX プレビュー(Preview)


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

今回のレスポンシブウェブサイト制作の難易度は入門または初級は難しいです。受講レベルは中級か、またはその近くでなければよく従うことができます。少なくとも初級ではないと思われる方ならフォローしてくるのに大きな困難ではないと思います。

受講のための選手の知識としては、HTML+CSSに関する基本的な内容を知っていれば良いです。だからといってHTML+CSSを上手にする状態である必要はありません。 20時間を超える講義で余裕を持って十分説明しています。もし映像をご覧ください 受講生のコーディングが遅くてHTML+CSS作成が遅い場合は、映像を停止してHTML+CSS作成をして、次のステップに従ってください。

映像を止めてコーディングし、他の人より時間が少し必要なだけです。むしろ、落ち着いて自分でコーディングする時間があるという点でより良いです。あまり心配しないで一緒に勉強してほしいです。 ^^

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

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

結論は...

入門や初級でなければついてくるのは問題ありませんが、ちょっと凄い感じになりますよ。
他の講義を通じてHTML+CSSの基礎を身につけて来られたら、十分に追いつくだけでなく、なぜこれをするのかについての理解度を持ち、レスポンシブなウェブサイトの制作過程を終えることになると思います。


📕 効率的な学習のためのコーディングワークスの学習方法の提案

学習方法は人によってすべて違うと思います。だから正解はありません。しかし、経験者であり製作者が考える効率的な学習方法はあると思います。そこでコーディングワークスが考える効率的な学習方法を提案します。

[ステップ1]
セクション3からセクション16まで、全体の制作過程を実習せずに映像を最初から最後まで見ます。 (12時間を超える制作過程なので、ただ見るだけでも忙しくはありません。だから移動しながらご飯を食べながら気軽に見てください。ただ何を作るのか、どんな順番で作るのかぐらい目をつけてみてください。)

[ステップ2]
ステップ1を実行すると、どの部分の理論が必要か、どの部分の準備が必要かを自然に知ることができます。では、そんな部分を完璧にはアニダーだと制作に必要な理論事項をある程度学習します。基礎レベルでなければセクション2. 必須ジェイクエリプラグインの使い方とCSS必須コア理論に映像を用意しておいたので不足しないと思います。しかし、仮想クラス、セレクタなどのHTML + CSSの基本的な理論は、コーディングワークスのYouTubeチャンネルで勉強してください。

[3段階]
セクション3から映像を慎重に見ながら実習してください。事前準備が十分になったので従うのがずっと簡単になると思います。

[ステップ4]
ビデオと一緒に完全なレスポンシブウェブサイトを作成したら、提供されたPhotoshopのPSDファイルを開き、UIデザインをそれ自体のテーマを決めて修正してください。レイアウトに大きな変化は与えないで、既存のレイアウトで部分的に修正して個人ポートフォリオUIデザインを終えてください。

[5段階]
制作されたUIデザインを基にPPTで機能定義書とHTML構造を作り、本番パブリッシングを進めて完成してください。これで、独自のデザインポートフォリオとパブリッシングポートフォリオが完成します。


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

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

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

▲コーディングワークスYouTubeチャンネルショートカット

Q. このコースを受講すれば、実務でパブリッシャーとして働くことができますか?
A. このプロセスにあるパブリッシングの内容をすべて理解し、よく活用できれば可能です。しかし、パブリッシングというのに十分な経験と様々な種類のウェブサイトを作った経験がなければ、実務で働くことができます。今、コースのような講義をさらに勉強し、全体のウェブサイト制作過程をいくつか勉強すれば良いと思います。もちろん個人ポートフォリオのホームページ制作もしていただく必要があります。パブリッシングの進入障壁が思ったより高い方です。映像 一度ご覧いただくとその中に内容とノウハウが共に学生に伝わるわけではありませんので、上記の学習方法を通じて私のものにする過程をお願いします。

Q. ウェブサイト制作しながら出てくる理論を説明する理論パーツが別にありませんでしたか?
A. 今受講されるコースは入門、初級コースではなく、中級レベルのレスポンシブウェブサイト全体制作パブリッシング講義です。基本理論パートと実戦例制作学習は、異なるコースを通じてスキルアップすることをお勧めします。

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

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、フレームワーク

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Web サイトの制作プロセス全体を体験したいパブリッシャー

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

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

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

  • 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

カリキュラム

全体

108件 ∙ (23時間 47分)

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

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

受講レビュー

全体

29件

5.0

29件の受講レビュー

  • taes11014397님의 프로필 이미지
    taes11014397

    受講レビュー 5

    平均評価 5.0

    5

    75% 受講後に作成

    Before taking the class, I thought I had to make a homepage! and when I started coding, the structure didn't turn out as I had planned, and I made it crooked and gave -230px to the margin and then made it fit in somewhere else. And then I kept repeating, "Ah~ I guess I'm not related to Front~"........ When I watch the video, the overall picture is drawn well, and since the instructor talks about infinite repetition, I think I can understand what the instructor is going to say as I listen. For example, when the instructor says, "Give float to the child element.", what follows unconditionally is "Give float to the child element, so the parent element loses its height value, so give overflow:hidden to the parent." It comes out almost every time. Even if you don't try to memorize it separately like this, the structure will be in your head because the parent overflow hidden will be repeated so much that you can memorize it like a machine even if only the plot appears in the plot. In the lecture introduction, the learning method is to look at the section 3 (header~mobile) work comfortably, but I couldn't do that in the previous lecture, and I was satisfied with the result. So when I saw the result I made with the instructor, I thought it was my own..ㅎ But when I saw the result and thought, "I'm proud~ Let's try something else!!".. When I actually tried to do it alone, it didn't work well. So this time, I just emptied my mind and watched it while lying in bed, while eating tangerines, while doing laundry, and on the bus. When I really had time, I thought I would fill the lecture time instead of YouTube, and I watched it all the time. I watched it in the most comfortable position I could find when I sat in front of the PC..(..ㅎ Isn't this the advantage of online?) As I listened, I inevitably came across content that I didn't know well. When I listen to those things again, I will probably remember them vaguely, but when I learn them once, I lightly open a notepad or (if listening on a PC) write notes on the right side of the Inflearn lecture and add simple notes, so I listen to them without getting sleepy (<s>Sleep Slave</s>) and my hands are not idle, so I remember them better. And, when I say 'I finished the lecture today~', I organize the contents I learned today that I really didn't know in my notepad, so I can easily look at them and understand them, and it's also convenient when I review them. And then, when I read them a second time, when I look at them while inputting the code myself, rather than making them at the same speed as the instructor, I think it's fun to first look at the finished version + basic structure, make them, quickly add CSS, and compare how I added them differently from the instructor. That way, I think I can tell if they're completely mine or if I just practiced typing. Also, I think this way, there will be good questions. After reading it twice, I think it would be good to look at various sites and make it yourself without pressing F12. However, after reading it twice (including the previous lecture), I saw myself imitating the structure of most sites because I could see it!! Therefore, rather than thinking, “I’m going to finish it in one reading because I’m pressed for time!”, I think it’s an excellent learning method to read it once in the most comfortable position in the world, and when you input the code directly in the second reading, first create it and compare it while referring to the vague memories + notes you wrote. Anyway, I think it’s a lecture that even an idiot like me can follow to some extent, so it’s a lecture worth challenging for anyone!!!! p.s) By the way, this lecture is for beginners, but is this a beginner video..?...... (Is the end of publishing still far away? ㄷㄷ....... )

    • codingworks
      知識共有者

      aToring-nim~ Your course review is really thorough and detailed. There has never been a course review this long and detailed before, and I don't think there will be a course review this long and detailed in the future.^^ As much as you work hard, you will soon get good results. Fighting!!

  • suhbyungsik1535님의 프로필 이미지
    suhbyungsik1535

    受講レビュー 3

    平均評価 5.0

    5

    76% 受講後に作成

    This is the third time I learned the practical site creation part of Coding Works' lecture. Since I took the Flex site creation lecture before this lecture, I didn't use float and just set the layout with flex. Since I had some time, I made a separate logo and changed the design a little bit. I got a more solid concept of SlickRider this time. I think I learned a little more about the concept in the js part. Since there were a lot of animations, that part was especially impressive this time, and the FAQ part, such as how to create an accordion and how to create a tab menu by connecting input and label, was also very helpful to me. One thing that was a little disappointing was that I was working on a monitor with a resolution of 3840. When I set the vertical on the main screen to 90vh, the gap between the next paragraph, CEO access, and the next paragraph was too wide. Also, when I worked with flex, when there was a left-right animation, the horizontal scroll occurred and the screen broke, and the fixed header at the top of the screen sometimes moved back and forth or disappeared. At first, I didn't know why the scrolling happened, so I spent the whole day looking at the source code and pulling my hair out. Later, I found out that it was probably because of that. So, I changed all the parts that were in flex to float in relation to animation, and there was no problem. Anyway, I really enjoyed the passionate lecture, and I wish you continued success. Thank you!

    • codingworks
      知識共有者

      Thank you for your course review~!!

  • mmm3n50119님의 프로필 이미지
    mmm3n50119

    受講レビュー 6

    平均評価 5.0

    5

    44% 受講後に作成

    I didn't even turn on the sound, and at work... I only roughly watched the PC version of the flow. I really only know the flow... Now I'm curious to see how much it will change if I watch the lecture properly and follow along, and if I don't watch it. Will it really be possible?? I'll edit the bottom later. As a side note, I'm still bored because I only do design work at work. I hate it.

    • codingworks
      知識共有者

      lololo, it's been a while. You're a working designer. Since you're tired after work, watch the video step by step over the weekend and follow along~

  • flowerkong31662님의 프로필 이미지
    flowerkong31662

    受講レビュー 5

    平均評価 5.0

    5

    81% 受講後に作成

    This is a much better lecture than any other lecture I have ever taken. The instructor explains it really, really well, in a way that is easy to understand both theory and practice!! Thank you so much, instructor! I am so satisfied that I want to listen to all the lectures that are uploaded!! ^^

    • codingworks
      知識共有者

      Hello mm I'm so glad that the lecture was helpful. Thank you for being interested in other Coding Works lectures. If you have any questions about Let's Study, please ask. Thank you for your review~

  • hkgb0009님의 프로필 이미지
    hkgb0009

    受講レビュー 1

    平均評価 5.0

    5

    90% 受講後に作成

    I succeeded in completing it. I already had basic knowledge, so I completed it in 5 days. I'm going to build a portfolio!^^

    • codingworks
      知識共有者

      Seunghoon, you've already completed the course? It's only been a week since the lectures were uploaded, but you've been working hard and diligently. I think it would be good to change the work you've done this time and make it into a personal portfolio. Thank you for your course review~^^

¥7,397

codingworksの他の講座

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

似ている講座

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