강의

멘토링

커뮤니티

Programming

/

Front-end

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

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

難易度 初級

受講期間 無制限

  • jyoung
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
Clone Coding
Clone Coding
jQuery
jQuery
HTML/CSS
HTML/CSS
Interactive Web
Interactive Web
Clone Coding
Clone Coding
jQuery
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を迅速に実装したい方

こんにちは
です。

9,036

受講生

366

受講レビュー

227

回答

4.8

講座評価

14

講座

"디자인.개발 포트폴리오 멘토 J.Young입니다."

저는 지난 20년간 웹 디자인 및 앱 개발 회사를 운영하며 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하고 있습니다.

저의 강의 철학은 명확합니다.

  1. 기초부터 실무까지 막힘없는 연결

  2. 현업이 원하는 핵심 기술의 압축

  3. 취업 성공을 부르는 실무형 포트폴리오 완성

어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.

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

실무경력

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


- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -서초점)
- 디자인.개발 포트폴리오 전문 강의 및 그룹 및 개인 지도

 
* 운영중인 유튜브 (코딩하는 디자이너)

보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.

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

 

カリキュラム

全体

16件 ∙ (2時間 31分)

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

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

受講レビュー

全体

4件

3.5

4件の受講レビュー

  • joofeel00005834님의 프로필 이미지
    joofeel00005834

    受講レビュー 1

    平均評価 5.0

    5

    50% 受講後に作成

    いいですね。

    • jyoung
      知識共有者

      主必規の受講評価ありがとうございます。 熱いです。 インタラクティブなウェブ制作ができる実力を育ててくれて応援します。 ありがとうございます〜 J.youngドリーム

    • jyoung
      知識共有者

      ジュピルギュ様受講評価ありがとうございます。 フォーメインを完読していただければ、ミュージャインと対戦インタラクティブウェブを強調します。 レイアウトボックス構造の理解と レスポンシブウェブ、 インタラクティブWebを作成するのに役立ちます。 と思われます。 熱気です〜〜 ありがとうございます^^ J.youngドリーム

  • office1895님의 프로필 이미지
    office1895

    受講レビュー 1

    平均評価 3.0

    3

    100% 受講後に作成

    ライブラリの内容とダウンして適用する方法をもう少し説明していただければ幸いです。 (slick と fullpage)ライブラリの説明は添付されているファイルと少しの説明で終わりや残念がたくさん残ります。 講義は早くするために言うたびにタムを編集して速い感がありますが、倍速を遅くすればとても合うことができます。 それでも fullpage と transition の使用はコードがシンプルになっており、使いやすくなります。 そして、完成しているファイルではなく、ライブラリだけが追加されているファイルがあったら、コードをたどるのにはるかにきれいだったようです。 良い講義ありがとうございます。

    • gudghk07212222님의 프로필 이미지
      gudghk07212222

      受講レビュー 1

      平均評価 3.0

      3

      50% 受講後に作成

      スピードが速すぎてただフォローして忙しいです... ビデオをすばやく編集したかどうかわかりませんが、話が終わる前に別の言葉が続きます。プレイして.. 0.75倍速にしても早いです。 スリックスライダーやフルページの説明も少し不足しているようですが、よく理解できません。聞いてはいけないと思います。

      • hyeree19930226님의 프로필 이미지
        hyeree19930226

        受講レビュー 1

        平均評価 3.0

        3

        100% 受講後に作成

        講義はいいですね:) モバイル画面ではないのが少し残念です。そして講義は少し速いですㅠㅜ

        • jyoung
          知識共有者

          HYEREE AHNさん〜 本フォーメイン講座は、フルページ制作の方法と、カウントアップ、アクティブ時に行われるアニメーション、GNB MenuBarなどをお知らせするために制作された講義です。 反応型を勉強したい場合は、助けるアプリケーションやミューザイン講義を聞けばいいですし、そして映像は退屈をなくすためにわざわざ素早く編集しました。 今日も良い一日を過ごしてください〜J.young夢

      ¥3,837

      jyoungの他の講座

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

      似ている講座

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