
Sử dụng ScrollTrigger của GSAP để tạo portfolio
jyoung
Hãy tạo một trang web portfolio phản ứng nhanh, tương tác và phản hồi theo thao tác cuộn bằng cách sử dụng ScrollTrigger của GSAP!
Basic
HTML/CSS, scrolltrigger, gsap
[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.^^
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
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
.gif)
- 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
.gif)
- Responsive web design for mobile resolutions of 767 to 321px
- Responsive web design up to 320px on mobile
.gif)
* Create menuOpen bar
.gif)
* How to use developer tools
.gif)
After the lecture is over
What you get :D
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 !
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!
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.
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
html, css, html/css, website, website, coding, oding, jquery, jQuery, layout, interactive web, web design, portfolio, publishing
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
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
All
32 lectures ∙ (5hr 10min)
Course Materials:
All
20 reviews
4.8
20 reviews
Reviews 2
∙
Average Rating 5.0
5
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
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ơ
Reviews 1
∙
Average Rating 5.0
5
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 ~~
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
Reviews 1
∙
Average Rating 5.0
5
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
Reviews 1
∙
Average Rating 5.0
5
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.
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 ^^
Reviews 1
∙
Average Rating 5.0
5
Đó 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!!!
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
Check out other courses by the instructor!
Explore other courses in the same field!