
HTML+CSS+JS ポートフォリオ実戦パブリッシング(シーズン3)
codingworks
HTML+CSS+JS 実践ポートフォリオ(シーズン3)は、パブリッシングの実践事例を制作する過程です。様々な実践事例制作を通じて、パブリッシングスキルを中上級へと成長させることができます。34時間以上の十分な講義時間と、様々な種類の実際制作過程であるため、制作ノウハウと応用方法を十分に習得できます。
초급
HTML/CSS, JavaScript, jQuery
レスポンシブウェブサイトポートフォリオ(App Official Landing)の制作過程はHTML+CSS+JQUERYパブリッシングで、レスポンシブウェブサイト全体の製作過程を通じてパブリッシング中級実力に行く基本基をしっかりして実戦パブリッシングのノウハウを持つようになります。特に、ウェブサイト全体の制作過程を十分な説明と実践作業で経験し、個人ポートフォリオウェブサイトの制作に自信を持つようになります。必要に応じて使用する必要があるジェイクエリプラグインで、Scroll Reveal AnimationとSlickスライダの使い方を学びます。レスポンシブ制作方式は、従来方式のfloatとpositionを利用したレスポンシブレイアウト制作方式で製作します。しかし、ある特定の要素ではFlexを使用する部分もあります。
全体的なウェブサイトの公開スキルとノウハウの向上
既存のfloatとpositionを利用して99%配置したレスポンシブレイアウト
position 属性の正確な概念と活用
hover before after checked active 仮想クラスの理解と活用
JQUERYコア理論学習と応用
CSS タブ メニュー コンテンツ、JQUERY アコーディオン メニュー コンテンツの作成能力
CSS3 フィルター プロパティと object-fit プロパティの活用
モバイル対応レスポンシブウェブパブリッシング制作能力(メディアクエリ)
PC バージョンとモバイル バージョンの両方で最適化されたレスポンシブ ウェブの完全な制作機能
スクロール レベル アニメーション プラグイン
テキスト入力アニメーションプラグイン
Slick スライダーの使用法とカスタム 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 必須のコア理論] で不慣れであるか不足していると思われる内容を十分に学習してください。




今回のレスポンシブウェブサイト制作の難易度は入門または初級は難しいです。受講レベルは中級か、またはその近くでなければよく従うことができます。少なくとも初級ではないと思われる方ならフォローしてくるのに大きな困難ではないと思います。
受講のための選手の知識としては、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ヶ月間の実力がすごく上昇したことが感じられます
切に欲しかったし、
先生が言ったように信じていたら、本当に良い結果が出ました。
本当にありがとうございました!
コロナに注意してください。
また良い講義で会いたいです:)
ありがとうご挨拶お願いします
これまで先生講義受講して2週間ほど履歴書を見ながら苦労してしまいました。
会社一ヶ所面接に合格して出勤することにしました。 本当にありがとうございました。
実は私が年齢が32歳だから心配が多かったです。
しかし、この会社の人事担当者が本人は学園出身は悪いと言っていましたよ😊😊
私が入社することにした会社は小さいですが、開発者もあり、ウェブデザイナーもいます。
3ヶ月間教育させ、実務に投入する食事だったんです。
距離も少しあり、年俸も低かったけど..一生懸命学んで年俸を上げてみようよ~ 😊😊
その間、本当にありがとうございました。質問の回答もよくしてくれてこんなにオンラインで講義をして就職になるからとても不思議ですね。
これからも先生の講義を聞きながら実力を増やしながら勉強します。ファイティング~!
学びながら質問がある場合は質問してください。ご質問の際にはいけない内容とコード、ブラウザ結果画面のキャプチャを投稿してください。コードの場合、HTML、CSS、JSコードの両方をアップロードする必要があります。
質問にコードなしでグローだけの問題を説明すると、本当に簡単ではないと正確な答えを出すのは難しいです。それから私は「HTML、CSS、JSコードとブラウザのキャプチャをアップロードしてください〜」と返信する必要があり、最終的に解決策を得るのに面倒で時間がかかります。
▲該当の講義コミュニティのよくある秩序ビューをまず確認してください〜
コーディングワークスパブリッシングYouTubeチャンネルで理論映像講義と並行してください。もちろん、すべての理論映像がYouTubeチャンネルにあるわけではありませんが、重要な理論映像はほとんどありません。映像が多いので、映像を探す方法は以下の例のように検索することをお勧めします。
コーディングワークスパブリッシングYouTubeチャンネル: https: //www.youtube.com/codingworks
インタビューと就職を呼ぶパブリッシャー 個人ポートフォリオ ホームページ制作スクリプト、レイアウト、インタラクティブウェブ、インタラクティブウェブ、ウェブデザイン、ウェブデザイン、ポートフォリオ、パブリッシング、レスポンシブウェブ、ウェブデザイン機能士実技試験、ブートストラップ、ブートストラップ、css frameworks、フレームワーク
学習対象は
誰でしょう?
Web サイトの制作プロセス全体を体験したいパブリッシャー
実用的なウェブサイト制作に出版の基本スキルを活用したい方
パブリッシング個人ポートフォリオのホームページ制作が必要な方
前提知識、
必要でしょうか?
HTML+CSS 基本コーディング能力
12,764
受講生
762
受講レビュー
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
全体
108件 ∙ (23時間 47分)
講座資料(こうぎしりょう):
37. CSSで変数 var() を使う
24:07
全体
32件
5.0
32件の受講レビュー
受講レビュー 5
∙
平均評価 5.0
5
講義受講前にはホームページ一つ作らなければならない!とコーディングをすると、ぜひ私の頭のように構造が出てこないピビトゥル抜きしてマージンに-230pxを与えたがどこにいてもまたほぼハンガジにはめ合わせながら構造を作りました。そして、それから&quot;あ〜私はフロントランが凧ではないかと思います〜の繰り返し........ 映像を見ると全体的な絵もよく描かれて、講師様が無限繰り返しを話してくれるはずだから、聞いてみると先生があんなに何を話すんだってことも分かるほどになると思います。 たとえば、講師は&quot;子要素にfloatを与えます。&quot;というコメントをすると、そのあとには無条件に付いてくるのが&quot;子要素にfloat値を与えたから親要素が高さ値を失ってしまうので、親にoverflow:hiddenを与える"というのがほぼ毎~~~~~~~~~ 。このように別に覚えようとしなくても、フロートにプルだけ出ても親オーバーフローヒドンがこのマシンのように覚えるほど繰り返しをしてくれるので、構造がぴったり頭に入るようになります。 講義の紹介によれば、学習方法でセクション3(ヘッダー~モバイル)作業を楽に見てほしいのですが、私も以前の講義ではそうではなく、ただ結果物が出ればそれに満足をしました。ころ講師様のように作った結果物を見て、私が作ったものと勘違いをするようになったんですよ…。と言えば…。だから今回はただ心を空けて初めてはベッドに横になっても見て、みかんを食べながらも見て、洗濯しても見て、バスでも見てww pcの前に座って見た時も世の中快適な姿勢で見たんですが..(..ㅎこれがまさにオンラインのメリットじゃないですか) 聞いてみると無条件に本人がよく分からない内容が出てきました。そんなことはまた聞くともちろん気にしないかもしれませんが、一度学ぶときに軽く~~にメモ帳を1つ入れてor(pcで聞くなら)インフラの右側に手書きするのに簡単なメモを添えて聞くとあまり眠くない(<s>睡眠の奴隷&lt; / s&gt;)手が遊んでいますないから覚えが良くなったんですよ。そして、&#x27;講義今日みんなでした〜&#x27;すると終わりで今日学んだ内容の中で私が本当に知らなかった内容がメモ帳に整理が次々となるので、軽くスッと見ながら理解し、復習する時も楽です。 そして、2回毒をする時は直接コーディングを入力しながら見る時はあえて講師様と同じ速度で作るよりも、まず完成本写真+基本構造を見て先に作ってみて、cssたっぷり入れてから、どのように講師様と違って入れたかを比較しながら見るのも楽しいと思います。そうすれば完全に私なのか、私が打者練習だけしたのかよく分かると思います。また、こうすれば質問も質の良い質問が来ることができると思います。 2回毒を終えれば、複数のサイトを見ながらf12を押さずに自分で作ってみるのもいいと思います。ところが2回毒を終えれば(イ・ジョンガンの含む) どんなサイトたちは構造が目に入って氷のようにまねる私の姿を見るようになりましたね! 故に、時間に追われて一回毒に終わるよ!と思うよりも、1回毒は本当に世界で一番楽な姿勢で見て、2回毒で直接コード入力する時は、どんどん残る記憶と思います。とにかく私のような愚か者もある程度追いつく講義とは、他の誰も挑戦する価値のある講義だと思います。 p.s) いや、ところが、この川の初級対象となっているのに、これ初級映像なのでしょうか..?......
aトーリング様~受講坪に本当に入念で詳細ですね。 前もありませんでしたが、これからもこんなに長くて詳細な受講評はないようです。^^ 努力するほどすぐに良い結果があるでしょう。ファイティング!
受講レビュー 3
∙
平均評価 5.0
5
コーディングワークスの講義中、本番サイト制作パートを3回目に学習しました。 このレクチャーの前にフレックスサイトの制作レクチャーを聞いたので、floatは使用せず、一度フレックスでレイアウトをキャッチしました。 時間的な余裕があってロゴも別々に作ってデザインもそれなりに若干変更して取ってみました。 スリックスライダーの概念を今回もう少し確実につかむようになりました。 jsパートでも概念整理を少しもっと熟したようです。 アニメーションが多く、今回その部分が特に印象深かったし、FAQパートでアコーディオンの作り方、inputとlabelをつなげてタップメニューの作り方なども私には多くのお役に立ちました。 少し残念なのは、私が3840解像度のモニターで作業していると思います。 メイン画面で縦を90vhにしたとき、次の段落であるceo accessと間隔があまりにも広がることになるという点。 また、flexで作業をしたとき、左右のアニメーションになると横スクロールが発生し、画面が壊れ、画面上部にfixedされたheaderが上下に隠れてしまうことが起こりました。 最初はスクロールが起こる原因を知らず、一日中ソースを見ながら頭を握った。 後で見るとそんな理由だったようです。 だからflexになっていた部分の中にアニメーション関連するところはすべてfloatに修正したところ異常はありません。 とにかく情熱あふれる講義はとても感謝しています。 常に健勝を祈ります。 ありがとうございます!
受講評ありがとうございます〜!
受講レビュー 6
∙
平均評価 5.0
5
音も抱きしめて会社で、、、、とてもおおまかな流れだけpcバージョンまで見ました 本当に流れだけ知っている... 今、講義ちゃんと見ながら従って、見ていない、どれだけ変わっているのか気になりますね。後で一番下に修正します。
lololoさん久しぶりですね。現職デザイナーですね。退勤して大変だから週末にじっくり一段階一段階映像見ながらフォローしてみて~
受講レビュー 5
∙
平均評価 5.0
5
これまで聞いたどんな講義よりも、実力向上に役立つ優秀な講義です。理論と実習の両方を理解しやすく、講師は本当に本当に説明を上手にしてください!講師、本当にありがとうございました!アップロードされる講義の皆さん、聞きたい程度で満足度が高いです。 ^^
mmさんこんにちは 講義が役に立ったのは本当に嬉しいですね。 コーディングワークス他の講義も関心をお寄せいただきありがとうございます。 勉強しましょうか、ご質問があれば質問してください。
受講レビュー 1
∙
平均評価 5.0
5
頑強成功しました。もともと基礎知識もあって5日で頑張ってしまいますね。
スンフンはすでに頑張っていましたか?講義が上がってから一週間しかできませんでしたが、熱心に頑張りましたね。今回作業したことを変更して、個人のポートフォリオにしたらいいと思います。 受講後ありがとうございます〜^^
¥7,754
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!