강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Front-end

Real! Website Creation! Step By Step! ('Full Page Site Creation')

Real! Website production Step By Step! This is a process of making the main page of Phomein (https://www.phomein.com/brand/main/main.do) as it is. This is a process of making and implementing the gorgeous interactive web contained in the site as it is, and it will teach you the practical core know-how to easily and quickly make even complex layouts^^

(3.5) 4 reviews

98 learners

  • jyoung
HTML/CSS
Interactive Web
Clone Coding
jQuery

What you will learn!

  • How to create a layout that's suitable for your practice!

  • How to create a full-page scrolling layout!

  • How to create a GNB navigation with depth!

  • How to make a number countup!

  • How to create an image slideshow with animation!

  • How to create various scroll animations!

A website where you can learn by creating your own!
Challenge yourself with clone coding with J. Young.

I know HTML tags and CSS properties, but
You say that creating layouts is someone else's story?

You can create a real website layout by creating a layout that is already available!


If you only know HTML and CSS
Interactive web creation OK!

  • This course is designed for those with basic knowledge of HTML and CSS and will proceed by implementing actual web pages.
    • Master the basics of HTML Markup and CSS design!
    • Practice! Gain confidence and excitement in layout creation by exploring a variety of layout creation examples!
    • Try your hand at cloning layouts!


Step By Step!
Get started right now.

You can learn everything from the basics of jQuery to its use in creating web pages, and we will help you create cool and colorful web pages in a short period of time by utilizing various libraries and plugins.

You can acquire both work skills and core practical know-how at once through webpage lectures composed of interactive elements essential for practical work.

The real deal is speed and scalability.
Only those who can quickly complete high-quality projects within the given timeframe will be recognized and treated as skilled designers and publishers.

Let's build a domain site together and learn the know-how to quickly create a stunning website!


  1. How to create an accurate layout using HTML and CSS suitable for practical use
  2. How to Create a Fullpage Scrolling Layout
  3. How to create a Depth GNB network
  4. How to make a number countup
  5. Animations that occur during various scrolls
  6. How to Create Image Slides with Animation

Curious about real-world examples?

Fullpage layout
Image slide
GNB Navigation
Fullpage Navigation

20 years of practical experience and lecture know-how
J.young

Hello? This is J.young.

For over 20 years, I've been leading a design team at a web design and app development company. In my spare time, I teach UI/UX design, web design, web publisher, and front-end development at universities, schools, and vocational training institutions. I aim to train students with no prior design or coding experience to become professionals, including web designers and publishers.

  • From basics to practice!
  • What you want in practice!
  • Create a portfolio that can be used right away in practice!

Through our courses, we guide students to confidently enter the workforce as professionals. As a result, many of our students are now demonstrating their capabilities as working designers and publishers.

  • People who want to become a web designer or publisher but don't know where or how to start
  • People who want to attend a regular course for job change but can't even think about it due to work life
  • People who don't even know the 'code' of coding
  • Those who have learned the basics of HTML/CSS through academies or YouTube, but who have never learned how to create a website

J.young is here to help!

Also, if you have any questions while learning, please leave a comment and I will do my best to provide helpful answers.

Open chat room operation

For a smoother learning experience, join the Jalnan Webdi open chat room run by J.young.
We'll share some great tips and free webinar links related to Figma, UI/UX, coding, and portfolio creation.

- Open chat room name: Jalnan Webdi
- Code: jyoung

Work experience

  • 2015~2017 Managing Director, Elicell Co., Ltd.
  • 2003~2015 Managing Director, Amusingware Co., Ltd.
  • ~2003 Seowoo C&D Design Director

Lectures and other experiences

  • Running a well-known webtoon YouTube channel
  • Incheon Arts College (multimedia web lectures)
  • Seoul Hyundai Vocational School (Smart Web/App Lectures)
  • Polytechnic University (Design Lecture)
  • Korea IT College (Multimedia Design Course)
  • Dudurim Vocational School (Design Class)
  • Gwangmyeong City Women's Vision Center (Web Design Class)
  • Now Computer Academy Bundang Branch (Design Lecture)
  • The Joeun Computer Academy Seocho Branch ([Web Design Specialist] Digital Web & App Design - Course Evaluation-Type Qualification-A)
  • HiMedia Computer Academy Seocho Branch (UI/UX Web Design & Web Publishing Using Video)

Recommended for
these people

Who is this course right for?

  • Those who have basic knowledge of HTML/CSS but are afraid of creating web pages

  • Anyone who wants to quickly create a portfolio for employment as a web designer or publisher

  • Anyone who wants to learn the jQuery source code needed on the web

  • Anyone who wants to easily implement interactive web required in practice without basic JavaScript knowledge

  • Currently a graphic designer who wants to transition to a front-end developer or publisher

  • Anyone who wants to improve their work skills as a web designer

  • Anyone who wants to quickly implement an interactive web with scalability in mind

Hello
This is

8,328

Learners

329

Reviews

224

Answers

4.8

Rating

14

Courses

 안녕하세요? 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

Curriculum

All

16 lectures ∙ (2hr 31min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

4 reviews

3.5

4 reviews

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

    Reviews 1

    Average Rating 5.0

    5

    50% enrolled

    좋습니다.

    • J.영
      Instructor

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

    • J.영
      Instructor

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

  • office님의 프로필 이미지
    office

    Reviews 1

    Average Rating 3.0

    3

    100% enrolled

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

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

      Reviews 1

      Average Rating 3.0

      3

      50% enrolled

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

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

        Reviews 1

        Average Rating 3.0

        3

        100% enrolled

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

        • J.영
          Instructor

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

      $24.20

      jyoung's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!