inflearn logo
inflearn logo

簡単に学び、ポートフォリオにするレスポンシブWeb! #雪花水

簡単に作るレスポンシブWebワーキングポートフォリオ!

難易度 初級

受講期間 無制限

HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
Clone Coding
Clone Coding
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
Clone Coding
Clone Coding
날개 달린 동전

講座 を紹介して、成長と収益を得ましょう!

날개 달린 동전

マーケティングパートナーズ

講座 を紹介して、成長と収益を得ましょう!

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

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

4.9

5.0

foxball

64% 受講後に作成

講義を聞いているなら、あなたはすでに開発者です。 このように詳しく教えてくださる講義はどこにもありません。

5.0

시연

100% 受講後に作成

最初にクラスが多くて混乱していた部分がありましたが、紙に書き直して理解するまで描いたところ、なぜこのようにクラスを作成したのかすぐに理解されました。これからの講義が期待されます!

5.0

박병조

100% 受講後に作成

よく聞きました。

受講後に得られること

  • HTML + CSS + JavaScript + jQueryコア理論によるパブリッシング実践能力の向上

  • Click、Mouseenter、Mouseleaveなど聞いてみたが、活用できないScript作成能力

  • Position プロパティの正確な概念と活用

  • Hover、Before、After、Focus、Active仮想クラスの理解と活用

  • 自分で絞って作るAnimate Slider

  • Flexを使用したレイアウトの作成

  • Tab Menu, Toggle Menu, slideToggle

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

  • PC版とモバイル版で最適化されたレスポンシブWeb全体の制作能力

  • Class Methodを活用したイベント

実務にぴったりの、レスポンシブウェブサイトコーディング!

1. なぜこの授業を受けなければならないのですか?

  • 初心者も身につけてアクセスしやすくしました。
  • HTMLの基本だけを知っていれば誰でも簡単にフォローできます。

就職準備、今は絆にしてください!レスポンシブWebポートフォリオが必要な方、一緒に勉強して一緒に準備します!

ちょうどウェブを学んで就職を準備している方々に、単に勉強だけで終わるのではなく、自分だけのスタイルで結果物を直接作ることができます。

2. 自分だけのスタイルでカスタマイズしてみてください!

実際のオフラインレッスンを通じて学生が自分で作ったプロジェクトです!

現在、オフライン講義で実際の学生たちが自分だけのスタイルでシアン作業からコーディングまで一つ一つ変更していきながらポートフォリオを完成しました。実際には、新入社、Webデザイナーとして就職のためのポートフォリオを作成する際に講義の内容が多く役立つでしょう。

3. HTML情報設計をする方法をお知らせします。

Webコーディングで最も重要なのは情報設計です。きちんとした建築物が出るためには、心強い設計構造がなければなりません。コーディングも同様です。情報設計によって結果物が異なって出ることがあります。構造を織る方法を一つ一つお知らせします!

4. CSS Layoutの作成が難しいですか?

HTMLが何であるかを知って、基本的なCSSの使い方程度だけをご存知であれば、講義に沿って直接一つ一つ作っていき、変化する内容を確認しながらエラーを修正していきます。授業に参加すれば、FlexやPosition、Displayなど、さまざまな属性を自由に使うことができます。

5. Script をどのように活用するかを終えたら!

様々なイベントが待っています。実務ですぐに使えるスクリプト活用例を細かく分析していきながら一つ一つ作成してみると、基本的な原理や活用法を学ぶことができます!

6. レスポンシブウェブを簡単に解放してお知らせします。

レスポンシブWebは、Webパブリッシング/デザインポポールに不可欠である必要があるプロジェクトの1つです。

#雪花水

7. 実務で使う質のある構造をコーディングしてみたいなら!

単純なポポールレイアウトではなく、実際の会社で使用する質感のある構造をコーディングしてみたい方におすすめしたいと思います。ポートフォリオにレスポンシブなWeb商業サイトを追加制作したい方に強くお勧めします。実務で使う本物だけを集めました。

8. 講義セクション別段階別完成本とPSDファイル提供

各セクションに完成した本を提供します。途中で見逃した部分があってもフォローできるように、すべてのファイルを含むステップバイステップの作業ソースをセクションの最後の回数に提供します。

また、受講後期を作成してくださった皆様にPSDオリジナルファイルを共有いたします。

コンテンツを変更して独自のポートフォリオにしてみてください!

9. Flexを活用したレスポンシブWebハードコーディングの制作をしたいなら!

雪花水反応型ウェブサイトの製作は純粋なハードコーディングを用いて作業しました。 plugin sliderではなく一つ一つ作ってみて、原理を調べて勉強していくつもりです。

10. VScodeの活用法をお知らせします!

今回のレスポンシブウェブサイト制作講義に使用されたテキストエディタはVScodeです。他のエディタを使っても構いません。ただし、授業中途中VScodeのショートカットと使い方の説明も含まれることをお知らせします。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • Flexをどのように書くべきか基本原理を知りたい方

  • クリエイティブあふれるインタラクティブウェブの実装に興味のある方

  • HTML + CSS + JavaScript + jQueryコア理論によるパブリッシング実践能力の向上

  • 初級から中級に基本機アップグレードが欲しい方!

  • 実務で使用する反応型ウェブサイトの制作をしたい方

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

  • 初心者でも可能

  • h1{color:red}を理解しているなら誰でも可能です!

  • <div>で開き、< / div>で閉じるタグ(Tag)の基本原理を知っていれば一緒です!

こんにちは
lizbです。

785

受講生

43

受講レビュー

92

回答

4.7

講座評価

7

講座

知識共有者のオフライン国費支援コースの受講レビューを見る

「レスポンシブウェブデザイン養成課程」受講レビューはこちら
(2022.03-2022.07)

3月から現在まで、長いと言えば長く、短いと言えば短い時間だったかもしれませんが、私の人生においては本当に重要で価値のある期間だったと思います。事前知識はある程度ありましたが、どうすればいいのか、どの方向へ進むべきか、何をすべきか全く分からず途方に暮れていました。しかし、先生が誠心誠意教えてくださったおかげで、技術面でも就職面でも確かな成長を遂げることができたと感じています。そのおかげで自信もつき、就職後も上手くやっていけそうだという気がしています!授業を担当してくださったパン・ミジョン先生、そして就職担当の先生方、本当にありがとうございました!:) 無事に就職して卒業します!後輩の皆さんも頑張って、良い経験を積んでくださいね!ファイト!:)

3月から7月までウェブパブリッシャー養成課程を受講しました :) デザイン以外は何も分からない状態で挑戦したのですが、先生や仲間の応援と支えのおかげで、多くのことを得られた気がします。学院で学んだことを土台に、これからも一生懸命勉強していきます~~ いつも親切に教えてくださったパン・ミジョン先生、そして就職担当の先生方、本当にありがとうございました!

「フロントエンド開発者養成課程」受講レビューはこちら
(2020.11.17-2021.05.11)

6ヶ月という時間が短く感じられるほど、訓練課程は興味深いものでした。アイデアを出しデザインをする作業は時間がかかりましたが、訓練課程を通じてコツを掴み、作業時間を大幅に短縮していく自分の姿を見て、実力がどんどん向上したようで誇らしかったです。職業の方向性をうまく定められずにいた私にとって、この訓練課程で学んだことは自分だけの知識であり、職業の方向性を示してくれる道しるべでした。そして、6ヶ月間共に学んだフロントエンド開発者養成課程3教室の仲間たちとパン・ミジョン講師は、素晴らしい縁であり心の支えでした。パン・ミジョン講師と就職支援チームの方々、行政職員の方々が熱心に助けてくださったおかげで、訓練課程を修了する前に就職が決まったのだと思い、心から感謝しています。この課程以外にも他にも良い課程がたくさんあるので、大宇職業能力開発院という学院を、私のように就職への不安があったり、職業の方向性をうまく定められなかったりする後輩や友人たちに推薦したいです。

初めて来たときは、デザインもコーディングも一度も学んだことがない私が、果たしてこの過程を受講して就職できるだろうか?と、とても心配していたように思います。ですが、通えば通うほど、そのような不安は消えていきました。イラストレーター、フォトショップ、HTML、CSS、JS、Vueなど、多くのことを学びました。新しく学ぶことが多いので、序盤は難しいかもしれませんが、情熱あふれるパン・ミジョン先生が本当に丁寧に教えてくださるので、心配しなくても大丈夫だと思います(笑)。他のスクールのレビューを見ると、毎年同じレパートリーの授業だったり、ひどい場合は先生に質問してもよく分かっていないケースもありますが、先生は常に情熱を持って新しいことも教えようとしてくださり、知識も豊富なので、たくさん助けていただきました!ウェブパブリッシャー、ウェブデザイナーを目指しているなら、超オススメです。~~

昨年2020年11月、偶然の機会に大宇職業能力開発院という素晴らしい機関を知り、ここで素晴らしい先生に出会って良い教育を受講できたことに心から感謝しています。もし私がこの教育訓練課程を受けていなかったら、おそらく今のような就職の機会を得ることは難しかったでしょう。大学卒業後、就職の分かれ道で方向性を定められず彷徨っていた時期に、他ではなかなか学べない先生の実際の教務経験とノウハウが詰まった5〜6ヶ月間の教育課程は、ウェブ開発について全く知らなかった私にとって大きな学びと成長の期間となりました。これを基盤に、多様なデザインとウェブ開発を学び、自分だけのポートフォリオも作ることができました。私にはあまりに馴染みのないコーディング言語を学ぶことは難しく、途中で諦めたくなる瞬間が何度もありましたが、諦めずに10回でも繰り返し教えてくださる先生の情熱と導きのおかげで、6ヶ月の課程をすべて修了する前(80%以上受講)に早期就職が決まり、教育課程を無事に終えることができました。このように、初めての職場を得て新たな出発ができるようにしてくださった先生と、大宇職業能力開発院という機関に深く感謝いたします。

非専門家でも理解しやすいように教えてくださり、そのおかげで無事に就職もできました。この課程を受講できて本当に嬉しいです。

デザインやコーディングツールを実務で使えるカリキュラムに合わせ、基礎から一歩ずつ丁寧に説明してくれます。自分自身で作業ができるよう、先生が最善を尽くしてサポートしてくださり、とても助かりました。国費の授業はクオリティが低いという偏見を打ち破るような教育でしたし、担任の先生も非常に進取的で、常に新しいことを教えようとしてくださったおかげで、多くのことを学ぶことができました。

非専門家でも理解しやすいように教えてくださり、そのおかげで無事に就職もできました。この課程を受講できて本当に嬉しいです。

以前から持っていた知識に加え、学院での教育を通じて様々なことを知り、学ぶことができました。資格も取得できるよう練習も重ね、私には難しかったコーディングという言葉も、大体は理解できるほどに上達しました。こちらを受講しながら就職も決まり、安心したと同時にとても嬉しく思っています。


建築学を専攻し、ウェブデザインと縁を結んでからかれこれ20年以上が経ちました。実務と講義を並行しながら、多くの喜怒哀楽を経て、現在は今の仕事をとても愛するようになり、興味と達成感を持ってさらに邁進するようになりました。私が持っている知識を共有することで、より多くの非専門家の方々が簡単に第一歩を踏み出せることを願い、あなたの望むすべてのことが叶うようお祈りいたします。

Lucete!

講義に関するお問い合わせメール: loo4love90@gmail.com

 

 

講師経歴  

  • 2018.3 - 現在。ウェブデザイン/マルチメディア/フロントエンド専門家課程 進行中

  • エリスアカデミー `クラスが違う HTML / CSS` オープン準備中

  • エリスアカデミー `クラスが違う javascript` オープン準備中

□ 現 大宇職業能力開発院 フロントエンド / マルチメディア / ウェブコンテンツ課程 講義
□ ハイメディア UI/UX ウェブパブリッシング 講義

□ イゼンコンピューター UI/UX ウェブパブリッシング講義
□ ザ・ジョウンコンピュータ学院 鍾路キャンパス ウェブデザイン講義
□ ザ・ジョウンコンピュータ学院 江南キャンパス ウェブデザイン/グラフィック講義
□ 英才職業専門学校 ウェブデザイン講義

 

  資格証  

□ ウェブデザイン技能士 資格
□ コンピューターグラフィックス運用技能士 資格

□ KPC 資格指導者(GTQ, GTQi, GTQid) 資格証

職業能力開発訓練教員3級(情報技術、デザイン、文化コンテンツ、情報技術戦略・計画

情報技術運用)
□ コンピュータ活用能力1級

 

もっと見る

カリキュラム

全体

42件 ∙ (7時間 57分)

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

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

受講レビュー

全体

11件

4.9

11件の受講レビュー

  • kbba785883님의 프로필 이미지
    kbba785883

    受講レビュー 33

    平均評価 4.8

    5

    64% 受講後に作成

    講義を聞いているなら、あなたはすでに開発者です。 このように詳しく教えてくださる講義はどこにもありません。

    • roykean19930688님의 프로필 이미지
      roykean19930688

      受講レビュー 35

      平均評価 5.0

      5

      100% 受講後に作成

      ありがとう

      • lizb
        知識共有者

        私もありがとう!

    • leekj9510089605님의 프로필 이미지
      leekj9510089605

      受講レビュー 3

      平均評価 5.0

      5

      100% 受講後に作成

      パブリッシャーの勉強中、最近の重要な部分であるHTMLの情報設計で多くの不足を感じている間、先生の講義を聞いて蜂蜜のヒントを学びます! ㅎㅎ光のような講義です他の講義も決済しました!最も重要な基本に忠実な講義!本当に必要だった内容だけがすっぽり詰まった授業ですね!もっと講義を楽しみにしています〜

      • lizb
        知識共有者

        ありがとうございます!昨日質問残してくださった方ですね!熱工していただき、ぜひお望みのことをお願いします。あわせて今も一生懸命講義していますが、良い受講評を残してくれてエネルギー充電されますね!ありがとうございます。より良い講義をさせていただきます!

    • siyeon002524님의 프로필 이미지
      siyeon002524

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      最初にクラスが多くて混乱していた部分がありましたが、紙に書き直して理解するまで描いたところ、なぜこのようにクラスを作成したのかすぐに理解されました。これからの講義が期待されます!

      • lizb
        知識共有者

        本当に一生懸命勉強したと思います!紙に書いてまでいただいたなんて、勉強し続けてみると、名前をつくるルールや、もっと簡単にコードを織る方法についても悩みます。私もより良い講義でお会いしましょう。ありがとうございます!

    • k971152849711님의 프로필 이미지
      k971152849711

      受講レビュー 1

      平均評価 5.0

      5

      100% 受講後に作成

      よく聞きました。

      lizbの他の講座

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

      似ている講座

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

      ¥7,481