강의

멘토링

커뮤니티

BEST
Programming

/

Web Development

Real! Website Creation! Step by Step! (Daebang Industry_InteractiveWeb)

[Website Creation Step By Step] This is a 3-step lecture, and it is a process of creating the main page of Daebang Industry as it is. It is a lecture that is as difficult as it is fancy, as it is a process of creating and implementing the gorgeous interactive web contained in the site.

(5.0) 13 reviews

236 learners

Level Basic

Course period Unlimited

  • jyoung
  • janey23
  • headong2
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
jQuery
jQuery
Clone Coding
Clone Coding
Interactive Web
Interactive Web
HTML/CSS
HTML/CSS
Responsive Web
Responsive Web
jQuery
jQuery
Clone Coding
Clone Coding
Interactive Web
Interactive Web

Reviews from Early Learners

Reviews from Early Learners

5.0

5.0

LHooOoo

100% enrolled

I'm a first year middle school student learning front-end development on my own, and since there aren't many good free lectures, I quickly finished them and looked for paid lectures. I started with the Daebang Industrial Development site because it looked cool, but it was fun to learn from because it explained things in detail and even touched on parts that I couldn't learn well from the free lectures :) It was a really fun lecture, and I think middle school students would be able to complete it if they work hard! I really liked how J. Young kindly responded to my requests for schoolwork and consistently answered my questions!

5.0

김혜경

97% enrolled

I took all of Instructor J. Young's lectures and completed them^^ This Daebang Industry website is a gorgeous interactive web that can be implemented as is, so I followed along more enjoyably than other lectures. More than anything, with the various jQuery animations I learned here, I'm burning with the will to level up my portfolio site!! Next time, if you open a lecture focused on mobile app creation, I think it would be very helpful. I ask for a lot of good lectures from J. Young to the many people who are having a hard time learning on their own online due to COVID-19. Thank you.

5.0

baam baam

97% enrolled

It was a very informative lecture. Thank you!!

What you will gain after the course

  • GNB jQuery showing 2depth on mouse over

  • FixHeader jQuery that changes design when scrolling

  • Text Animation jQuery (Splitting.js) Utilization and Application

  • Scroll event animation jQuery (scrolla.js) usage and application

  • Image slide with animation jQuery (slick.js) usage and application

If you only know HTML and CSS

Webpage & Interactive Web production OK!

This course covers the three-step process of website creation, replicating the main page of Daebang Industries (https://www.db-dvp.co.kr/). This course will teach you how to create and implement the vibrant interactive web experience found on the site.


Step By Step!
Get started right now.


This course is designed for those with basic knowledge of HTML and CSS, and will proceed by implementing actual web pages . Even without advanced JavaScript and jQuery knowledge, you can quickly create beautiful, vibrant web pages using HTML and CSS- based libraries and plugins . By taking this course, which features essential interactive elements for practical work, you'll gain three benefits: practical expandability, guaranteed skill improvement, and portfolio completion .


1. Creating a header area (GNB, Fixed header)

- GNB jQuery that shows 2 depths when the mouse hovers
- Create a submenu bar that slides smoothly when the mouse hovers over the GNB menu bar.
- Various mouse over effects using virtual selectors (before, after)
- Header jQuery that changes design when scrolling and is fixed at the top

2. Creating a Visual Area (Image Slider)

- Text animation created using Splitting.js
- Creating slide images using Slick .js
- Create slide 'prev', 'next' buttons
- Creating a slide indicator
- Gauge bar animation
-Image segmentation animation

3. Contents_imformation area (Banner Slider)


- Slide animation that doesn't show two at a time with Scrolla.js
- Creating a dot button with CSS
- jQuery that smoothly moves to the desired location when the scroll button is clicked
- Various mouse over effects (underline effect, border effect, image scale effect) using virtual selectors (before, after)

4. Contents_video area & Contents_news area

- Scroll animation jQuery (scrolla.js)
- Import YouTube videos
- Apply gradient color
- Apply motion animation

After the lecture is over
What you get :D

1. Solid layout production skills

When creating a web page, creating an accurate layout based on HTML and CSS is paramount . Even if you have a basic understanding of HTML and CSS but no sense of layout design , if you diligently follow this lecture, which thoroughly covers the basics , you will soon feel that you have a solid foundation in layout creation !

2. Increase work productivity!

To increase your work productivity, you need to be able to quickly create interactive websites using libraries and plugins. This course will cover everything from webpage layout creation to responsive page creation. You'll also learn practical skills like scripts, plugins, and animations to create webpages. By consistently practicing while attending the lectures, you'll find yourself improving your work skills in no time!

3. High-quality portfolio

A high-quality portfolio is one of the most effective tools for demonstrating your professional capabilities and seizing new opportunities. By attending lectures and practicing, you'll build your own portfolio. By consistently implementing web pages in subsequent website creation workshops, in addition to this lecture, you'll be able to build a portfolio that will become your most valuable weapon in your job search.

4. 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

html, css, html/css, website, website, coding, jquery, jQuery, layout, interactive web, web design, portfolio, publishing

Recommended for
these people

Who is this course right for?

  • 1. People who have basic HTML/CSS knowledge but are afraid of creating web pages.

  • 2. Those who want to quickly create a portfolio for employment as a web designer or publisher

  • 3. Those who want to learn the JQuery source code required on the web

  • 4. Those who want to easily implement interactive web required in practice without basic JavaScript knowledge

  • 5. Those who are currently graphic designers and want to transition to a front-end developer or publisher

  • 6. As a web designer, you want to improve your work skills.

  • 7. Those who want to quickly implement an interactive web that takes scalability into account

Need to know before starting?

  • HTML/CSS

Hello
This is

9,035

Learners

366

Reviews

227

Answers

4.8

Rating

14

Courses

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

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

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

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

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

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

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

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

실무경력

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


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

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

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

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

 

Curriculum

All

29 lectures ∙ (4hr 50min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

13 reviews

5.0

13 reviews

  • ihu07182702님의 프로필 이미지
    ihu07182702

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    I'm a first year middle school student learning front-end development on my own, and since there aren't many good free lectures, I quickly finished them and looked for paid lectures. I started with the Daebang Industrial Development site because it looked cool, but it was fun to learn from because it explained things in detail and even touched on parts that I couldn't learn well from the free lectures :) It was a really fun lecture, and I think middle school students would be able to complete it if they work hard! I really liked how J. Young kindly responded to my requests for schoolwork and consistently answered my questions!

    • jyoung
      Instructor

      Lim Hyun-woo ~~ I applaud you^^ Your parents must be very strong.... If it's Daebang Industry...even adults can have a hard time, but you've done it so enjoyably and it's really, really great~~ In a word, it's awesome!!! I'm grateful~~~ If you have any questions while studying, please leave a comment anytime....and I'll cheer you on^^ Have a fun afternoon today and a happy weekend^^ J.young Dream^^

  • winterlove님의 프로필 이미지
    winterlove

    Reviews 4

    Average Rating 4.8

    5

    97% enrolled

    I took all of Instructor J. Young's lectures and completed them^^ This Daebang Industry website is a gorgeous interactive web that can be implemented as is, so I followed along more enjoyably than other lectures. More than anything, with the various jQuery animations I learned here, I'm burning with the will to level up my portfolio site!! Next time, if you open a lecture focused on mobile app creation, I think it would be very helpful. I ask for a lot of good lectures from J. Young to the many people who are having a hard time learning on their own online due to COVID-19. Thank you.

    • jyoung
      Instructor

      Kate~ Thank you for your class review. I am deeply grateful that you have taken all of my classes.. I will always do my best to come back with better classes. The next class was interrupted during filming because I am moving, but I will come back as soon as it is organized. I plan to prepare a mobile app design class as well^^ Have a nice evening^^

    • jyoung
      Instructor

      Hello~~ Kate, I posted a notice about the class review event~~^^ Please check it out

  • hurbaam1568님의 프로필 이미지
    hurbaam1568

    Reviews 4

    Average Rating 5.0

    5

    97% enrolled

    It was a very informative lecture. Thank you!!

    • sjj925102님의 프로필 이미지
      sjj925102

      Reviews 1

      Average Rating 5.0

      5

      100% enrolled

      It was helpful.

      • jyoung
        Instructor

        Thank you for your review, sjj-92~ We will continue to provide good lectures. J.young Dream

    • jinfx4205171님의 프로필 이미지
      jinfx4205171

      Reviews 1

      Average Rating 5.0

      5

      100% enrolled

      Good!

      • jyoung
        Instructor

        Rulebulnim Thank you for the short and simple but powerful class review. Have a nice day today^^

    $37.40

    jyoung's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!