강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

本当!ウェブサイト制作! Step By Step! (「フォーメイン」_フルページサイト制作)

本番! ウェブサイト制作 Step By Step! フォーメイン(https://www.phomein.com/brand/main/main.do) 、実装してみる過程で複雑なレイアウトも簡単かつ迅速に制作する実務コアノウハウをそのままお知らせします^^

  • jyoung
HTML/CSS
Interactive Web
Clone Coding
jQuery

こんなことが学べます

  • 実務に適したレイアウト制作方法!

  • フルページスクロールレイアウトの作り方!

  • デプスのあるGNBナビゲーションの制作方法!

  • 数字カウントアップの作り方!

  • アニメーションが入ったイメージスライドの作り方!

  • 様々なスクロールアニメーションの作り方!

自分で作って学ぶウェブサイト!
J. Youngと一緒にクローンコーディングに挑戦してください。

HTMLタグとCSSプロパティは知っていますが、
レイアウト制作は他人の話ですか?

発売されているウェブレイアウトをそのまま製作することで本番のウェブサイトレイアウトを製作できます!


HTMLとCSSだけを知っていても
インタラクティブウェブ制作OK!

  • このレッスンでは、HTMLとCSSに関する基本的な知識を持つ方を対象に、実際のWebページをそのまま実装して進行されます。
    • HTMLマークアップ、CSSデザインの基本的なカット!
    • 本当!レイアウト制作の様々な例を取り上げることで、レイアウト制作に自信と興味UP!
    • クローンコーディングレイアウトまで挑戦してみてください!


Step By Step!
今すぐ始めましょう。

Webページの制作に必要なjQueryの基礎から活用まで学ぶことができ、様々なライブラリやプラグインを活用して短時間で素敵でカラフルなWebページを制作できるよう、皆様をお手伝いいたします。

実務で必要なインタラクティブな要素で構成されたWebページ講義により、業務スキルと実務コアノウハウを一度に得ることができます。

実務は!スピード戦であり、スケーラビリティです。
作業時間内にすばやく、クオリティのプロジェクトを完了する方のみが実力あるデザイナー、パブリッシャーとして認められ、扱われます。

フォーメインサイトを一緒に作ってみながら、派手なウェブサイトも素早く制作していけるノウハウを身につけてみてください!


  1. 実務に適したhtmlとcssを用いた正確なレイアウト制作方法
  2. フルページスクロールレイアウトの作成方法
  3. Depth GNBネイトの作り方
  4. 数値カウントアップの作成方法
  5. さまざまなスクロール時に進行するアニメーション
  6. アニメーションが入った画像スライドの作り方

実際の例が気になったら?

フルページレイアウト
画像スライド
GNBナビゲーション
Fullpageナビゲーション

20年経歴の実務+講義ノウハウ
J.young

こんにちは? J.youngです。

20年間、Webデザイン&アプリ開発会社でデザインチーム総括でチームを運営しており、しっかり大学と学校および職業訓練機関でUIUXデザイン、ウェブデザイン、ウェブパブリッシャー、フロントエンド開発講義を行っています。デザインやコーディングの基礎が全くない学生を対象にウェブデザイナー/パブリッシャーなど専門家養成のため

  • 基礎から実務まで!
  • 実務で欲しい!
  • 実務ですぐに使えるポートフォリオ制作!

講義を進めて専門家として堂々と実務に進出できるよう指導しています。それだけ多くの弟子たちが現職デザイナーで、パブリッシャーでその力量を発揮しています。

  • Webデザイナーやパブリッシャーになりたいのにどこから始めるのか
  • 離職のための正規コース学園に通いたくても職場生活のために厳しくできない方
  • コーディングの「鼻」を知らない人
  • 学園やYouTubeなどでHTML/CSSの基礎は学んだが、導通ウェブサイト制作が他の話だった方々

J.youngがお手伝いします!

また、学習していただきたいことがありましたら、コメントを残していただければ、お役に立てる答えをお寄せいただくよう最善を尽くします。

オープンチャットルーム運営

よりスムーズな学習のために、J.youngが運営するよくあるウェブディーオープンチャットルームに加入すれば、
ピグマ、UI.UX、コーディング、ポートフォリオ製作関連の核蜂蜜チップと無料ウェビやリンクなどを共有いたします。

- オープンチャットルーム:よく知られたウェブディ
- コード:jyoung

実務キャリア

  • 2015~2017(株)エリエセル総括取締役
  • 2003~2015(株)アミュージングウェア総括取締役
  • ~2003 ソウ氏アンディデザイン実装

講義やその他のキャリア

  • 元気なウェブディYouTubeの運営中
  • 仁川文芸専門学校(マルチメディアウェブ講義)
  • ソウル現代職業専門学校(スマートウェブ/アプリ講義)
  • ポリテック大学(デザイン講義)
  • 韓国IT専門学校(マルチメディアデザイン講義)
  • タップ職業専門学校(デザイン講義)
  • 光明市女性ビジョンセンター(ウェブデザイン講義)
  • 今コンピュータ学園講義のブンダン店(デザイン講義)
  • ザ・ジョウンは、コンピュータアカデミーの瑞草店([ウェブデザイン機能士]デジタルウェブ&アプリデザイン - コース評価型資格-A)
  • ハイメディアコンピュータ学院の序点(映像を活用したUI/UX Webデザイン&Webパブリッシング)

こんな方に
おすすめです

学習対象は
誰でしょう?

  • HTML / CSSの基礎はありますが、Webページの作成が恐れている人

  • Webデザイナー、パブリッシャーとして就職のために迅速にポートフォリオを制作したい人

  • Webで必要なjQueryソースを習得したい人

  • JavaScriptの基礎なしに実務で必要とするインタラクティブWebを簡単に実装したい人

  • 現在グラフィックデザイナーとしてフロントエンド開発者やパブリッシャーに転向したい方

  • ウェブデザイナーとして業務スキルを向上させたい方

  • スケーラビリティを考慮したインタラクティブWebを迅速に実装したい方

こんにちは
です。

8,328

受講生

329

受講レビュー

224

回答

4.8

講座評価

14

講座

 안녕하세요? J.young 임자영입니다.

20여년간의 웹디자인 & 앱개발회사를 운영하며, 대학과 전문학교 및 직업훈련기관에서 UI.UX디자인,웹디자인, 웹퍼블리셔, 프론트엔드개발 강의를 하고 있습니다.

디자인이나 코딩에 대한 기초가 전혀 없는 학생들을 대상으로, 전문가(UI.UX디자이너/ 퍼블리셔/코딩하는 디자이너) 양성을 위해!!
- 기초부터 실무까지!
- 실무에서 원하는!
- 실무에서 바로 써 먹을 수 있는 포트폴리오 제작! 강의로 전문가로써 당당히 실무에 진출할 수 있도록 지도하고 있습니다.

그런 만큼... 많은 제자들이 실무자로써의 그 역량을 발휘하고 있습니다.

-UI/UX디자이너, 퍼블리셔, 프론트엔드개발자가 되고 싶어도 어디서 부터
어떻게 시작할지 막막하신 분들..
- 이직을 위한 정규 코스 학원을 다니고 싶어도 직장 생활로 인해 엄두도 못 내시는 분들..
- 코딩에 '코'자도 모르시는 분! 학원이나 유튜브 등으로 HTML/CSS기초는 배웠지만 -
도통...웹 퍼블리싱 개발 구현이란 남의 이야기이신 분들....

J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.

* 오픈채팅방운영

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
피그마, UI.UX, 코딩, 포트폴리오제작 관련 핵꿀팁과 무료웨비나 링크 등을 공유해드립니다.

오픈채팅방명 : 잘난웹디
코드 : jyoung

 

실무경력

- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장


- 현) UIUX & 웹포트폴리오 강의 진행 중(실무 진출 90프로 이상)

 

감사합니다^^ 


운영중인유튜브

잘난웹디
https://www.youtube.com/channel/UCISuuIbv_SnkE6d4oDgrBWQ

カリキュラム

全体

16件 ∙ (2時間 31分)

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

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

受講レビュー

全体

4件

3.5

4件の受講レビュー

  • 주필규님의 프로필 이미지
    주필규

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    좋습니다.

    • J.영
      知識共有者

      주필규님 수강평감사합니다. 열공하셔서 인터렉티브 웹 제작하실 수 있는 실력을 키우시길 응원합니다. 감사합니다~ J.young드림

    • J.영
      知識共有者

      주필규님 수강평감사합니다. 포메인을 완독하셨으면 뮤자인과 대방인터렉티브웹을 강추드립니다. 레이아웃 박스구조에 대한 이해와 반응형웹, 인터렉트브웹 제작에 도움이 되시며 웹포폴에 사용할 수 있어 도움이 되시리라 생각됩니다. 열공하시구요~~ 감사합니다^^ J.young드림

  • office님의 프로필 이미지
    office

    受講レビュー 1

    平均評価 3.0

    3

    100% 受講後に作成

    라이브러리에 대한 내용과 다운해서 적용하는방법을 좀 더 설명해 주시면 좋을것같습니다. (slick 과 fullpage)라이브러리 설명은 첨부되어 있는 파일과 조금의 설명으로 끝이나 아쉬움이 많이 남습니다. 강의는 빠르게 하기위해 말할때마다 텀을 편집하셔 빠른감이 있지만 배속을 늦게 하면 그럭저럭 맞게 할수 있습니다. 그래도 fullpage와 transition 사용은 코드가 심플하게 되어있어 사용하기에 용이합니다. 그리고 완성되어 있는 파일이 아니라 라이브러리만 추가 되어있는 파일이 있었으면 코드를 따라 치는데 훨씬 깔끔했을것같습니다. 좋은 강의 감사합니다.

    • 블랙박스이슈님의 프로필 이미지
      블랙박스이슈

      受講レビュー 1

      平均評価 3.0

      3

      50% 受講後に作成

      스피드가 너무빨라서 그냥 따라쓰다가 바쁘네요... 비디오를 빠르게 편집하신건지 모르겠는데 말이 끝나기도전에 또다른 말이 계속나오고.. 코딩하는것도 편집 하신건지 타이핑속도보다 더 빠르고.. 말이 2시간짜리지 거의 4~5시간짜리같습니다. 정지시켯다가 다시플레이하고.. 0.75배속으로해도 빨라요.. ㅋ... 슬릭슬라이더나 풀페이지 설명도 조금 부족한듯싶습니다 잘 이해가안가요 .. 그리고 영상도 잘리는것들도 있고 자동스킵되는 부분들도있어서 아쉽네요 그래도 따라하다보면 홈페이지 구성은 되어지는거같아요. 그리고, 입문자나 초보는 절대 들으시면안될거같습니다 어느정도 코딩을 배우신다음 강의들으시는걸 추천드려요..

      • HYEREE AHN님의 프로필 이미지
        HYEREE AHN

        受講レビュー 1

        平均評価 3.0

        3

        100% 受講後に作成

        강의는 좋네요:) 모바일화면은 안되는게 조금 아쉽습니다. 그리고 강의가 좀 빨라요 ㅠㅜ

        • J.영
          知識共有者

          HYEREE AHN님~ 본 포메인강좌는 풀페이지제작에 대한 방법과, 카운트업, 액티브 시 진행되는 애니메이션, GNB MenuBar 등을 알려 드리기위해 위해 제작된 강의입니다. 반응형을 공부하고 싶으시면, 돕다Application이나 뮤자인 강의를 들으시면 됩니다. 그리고 영상은 지루함을 없애기 위해 일부러 빠르게 편집하였습니다. 온라인 강의는 반복해서 들을 수 있는 잇점이 있으니까요~~ 오늘도 좋은하루 되세요~ J.young드림

      ¥3,681

      jyoungの他の講座

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

      似ている講座

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