강의

멘토링

커뮤니티

Programming

/

Web Development

Real! Website Creation! Step by Step! (Musin_Responsive Web)

[Website Creation Step By Step] This is a 3-step course that will teach you how to create the main page of Musign (https://musign.net) as is. This course will teach you the core practical know-how to create complex layouts easily and quickly by creating and implementing the gorgeous interactive web that is contained in the site.^^

(4.8) 20 reviews

172 learners

HTML/CSS
jQuery
Interactive Web
Responsive Web

Reviews from Early Learners

What you will gain after the course

  • Responsive web publishing optimized for various devices (Media query)

  • Animation using SVG

  • Image animation using virtual selectors (before, after)

  • Interactive text animation using the Transform property

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

  • Effect that changes background color based on scroll position (jQuery)

  • GNB animation with underline following mouse over (jQuery)

  • GNB Hamburger Menu Open Animation

If you only know HTML and CSS

Webpage & Interactive Web production OK!

  • This course is designed for those with basic knowledge of HTML and CSS and will proceed by implementing actual web pages .


Step By Step!
Get started right now.

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


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

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 Muse site together and learn the know-how to quickly create a gorgeous website !

1. How to create a super simple layout using HTML and CSS
2. Text animation using transfrom
3. Animation using mask effect
4. SVG production application and animation
5. Animation that occurs when scrolling

*Responsive web page creation

- Responsive web design for PC mode resolutions of 1720px to 1401px
- Responsive web design for tablet resolutions of 1400px to 1025px
- Responsive web design for tablet resolutions of 1024px to 68px

*Responsive web page creation

- Responsive web design for mobile resolutions of 767 to 321px
- Responsive web design up to 320px on mobile

* Create menuOpen bar

* How to use developer tools

After the lecture is over
What you get :D

1. Solid layout production skills

When creating a webpage, creating an accurate layout based on HTML and CSS is paramount . Even if you have a basic understanding of HTML and CSS but no understanding of layout design , that's okay. If you diligently follow this course, which thoroughly covers the fundamentals , you'll soon find yourself with 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 taking the course, 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 securing 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

Real-World Website Creation
View other lectures

Basic Course (Hanwha Chemical_Responsive Web)
Complete understanding of PC mode layout and responsive page creation!
Application Course 1 (Wise Studio_Responsive Web)
An eye-catching web page creation curriculum!
Application Course 2 (Daebang Industry_Interactive Web)
Create a gorgeous, high-difficulty interactive web with your own hands!

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

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?

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

  • A graphic designer who wants to transition to a front-end developer.

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

  • For those who want to design and implement various layouts for employment as a web designer or publisher

  • Anyone who wants to quickly create a cool and flashy site with practical scalability in mind

Hello
This is

8,768

Learners

351

Reviews

227

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

32 lectures ∙ (5hr 10min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

20 reviews

4.8

20 reviews

  • ma12ghsh0234님의 프로필 이미지
    ma12ghsh0234

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    Không sử dụng các công cụ như Bootstrap Tôi muốn thử một trang web đáp ứng, Bài giảng êm dịu và rõ ràng đến mức tôi đã nghe hết trong 3 ngày. Trong khi trực tiếp làm việc để tạo một trang web đáp ứng, Nó rất dễ hiểu Độ dài mỗi bài giảng phù hợp. Nhìn chung, không có lời giải thích nào không cần thiết hoặc khó khăn. Tôi nghĩ nó sẽ giúp ích rất nhiều cho việc học sau này :) Cảm ơn

    • jyoung
      Instructor

      Sh H, cảm ơn đánh giá khích lệ của bạn ^^ Tôi sẽ trở lại với những bài giảng tốt hơn trong tương lai. Chúc bạn hôm nay một ngày tốt lành ^^ J.youngGiấc mơ

  • uj062148301님의 프로필 이미지
    uj062148301

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Lớp học rất dễ hiểu và rất hữu ích vì giáo viên đã giải thích một cách chi tiết và chi tiết. Họ đã đưa cho tôi tất cả tài liệu và rất tử tế!! Đặc biệt vì tôi là người mới bắt đầu viết mã nên rất khó để tạo bố cục, nhưng bạn đã giải thích nó rất dễ dàng và gọn gàng nên tôi cảm thấy như kỹ năng của mình được cải thiện nhanh chóng khi tôi xem và xem. đã học. Cảm ơn bạn ~~

    • jyoung
      Instructor

      Tôi được khuyến khích nhiều hơn bởi bài đánh giá bài giảng của uj06214. Tôi rất vui khi biết rằng bạn đã tham gia khóa học một cách dễ dàng. Tôi sẽ luôn trở lại với những bài giảng hay. Cảm ơn

  • ssssssso111739님의 프로필 이미지
    ssssssso111739

    Reviews 1

    Average Rating 5.0

    5

    100% enrolled

    Tôi có thể tham gia khóa học mà không gặp khó khăn gì vì đây là bài giảng dạy bạn từng bước từ những điều cơ bản. Mặc dù là một bài giảng trực tuyến nhưng nó có vẻ là một bài giảng rất giàu thông tin, giải thích từng chi tiết như thể bạn đang học trực tiếp! Bởi vì tôi bướng bỉnh nên tôi đã tạo ra một trang web ngay lập tức. Cảm ơn

    • lung62687754님의 프로필 이미지
      lung62687754

      Reviews 1

      Average Rating 5.0

      5

      88% enrolled

      Cả tính thực tiễn cốt lõi và xu hướng đều đã được nắm bắt rõ ràng. Đây là bài giảng mà bạn không thể dễ dàng tìm thấy ở bất kỳ nơi nào khác. Tôi nghĩ nó sẽ hữu ích trong thực tế. Cảm ơn vì bài giảng tuyệt vời :) Tôi dự định từ giờ trở đi sẽ chỉ học các lớp của j.young.

      • jyoung
        Instructor

        Cảm ơn vivien ^^ Tôi được khích lệ bởi bài phê bình bài giảng của Vivien. Học những khóa học thậm chí còn tốt hơn Tôi sẽ tải nó lên. Cảm ơn bạn ^^

    • jjarajan12132845님의 프로필 이미지
      jjarajan12132845

      Reviews 1

      Average Rating 5.0

      5

      16% enrolled

      Đó là một sự trợ giúp tuyệt vời vì bạn đã giải thích mọi thứ một cách bình tĩnh và rõ ràng ^^ Viết mã rất khó, nhưng tôi thấy rất vui khi học từng chút một trong khi xem các bài giảng!! Tôi đang tìm hiểu rất nhiều về cách dễ dàng sắp xếp và tạo các bố cục đáp ứng phức tạp. Tôi rất mong chờ các bài giảng trong tương lai của bạn!!!

      • jyoung
        Instructor

        Cảm ơn jjarajan1213 vì đánh giá của bạn. Ngay cả khi việc viết mã lúc đầu có vẻ khó khăn, nhưng nếu bạn tiếp tục tạo đi tạo lại 4-5 trang web (2 trang trở lên), bạn sẽ quen dần với nó. Tôi nghĩ bạn sẽ có được sự tự tin trong cách tạo một trang web. Chúc các bạn học tập chăm chỉ và đạt được mục tiêu mong muốn ^^ Tôi sẽ trở lại với một bài giảng hay. Cảm ơn bạn ^^ J.youngGiấc mơ

    $37.40

    jyoung's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!