GSAP의 ScrollTrigger를 활용한 포트폴리오 제작
J.영
GSAP의 ScrollTrigger를 활용하여 스크롤에 반응하는 인터랙티브 반응형 웹 포트폴리오를 만들어봐요!
초급
HTML/CSS, scrolltrigger, gsap
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.^^
Reviews from Early Learners
What you will learn!
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
.gif)
*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
.gif)
*Responsive web page creation
- 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
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!
Complete understanding of PC mode layout and responsive page creation!
Application Course 1 (Wise Studio_Responsive Web)
An eye-catching web page creation curriculum!
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!
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
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
8,666
Learners
343
Reviews
226
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
Co-instructor
Curriculum
All
32 lectures ∙ (5hr 10min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
20 reviews
4.8
20 reviews
Sh HReviews 2
∙
Average Rating 5.0
5
100% enrolled부트스트랩과 같은 도구를 사용하지 않고 반응형웹을 해보고 싶었는데, 강의가 너무 차분하고 깔끔해서 3일만에 다 들었네요ㅎㅎ 반응형웹을 만들기 위한 작업을 직접해보면서 아주 쉽게 쉽게 이해할 수 있었습니다 1강의 분량시간도 적절하고 전체적으로 군더더기나 많이 어려운 설명은 없었습니다 앞으로 학습에 많은 도움이 될 것같습니다:) 감사합니다.
- J.영Instructor
Sh H님 힘이나는 수강평 감사드립니다^^ 앞으로 더 좋은 강의로 찾아 뵙도록 하겠습니다. 오늘도 좋은 하루 되십시요^^ J.young드림
- ssssssso11
Reviews 1
∙
Average Rating 5.0
- jjarajan1213
Reviews 1
∙
Average Rating 5.0
5
16% enrolled차분하게 설명을 너무 잘해주셔서 큰 도움 됐어요 ^^ 코딩이 너무 어려웠는데 조금씩 배워가는 재미가 강의보면서 생기고 있어요!! 복잡한 반응형 레이아웃을 쉽게 정리하고 짜는법을 많이 배워가요~~ 앞으로도 좋은 강의 부탁드립니다!!!
- J.영Instructor
jjarajan1213님 수강평 감사합니다. 코딩이 처음에는 어렵게 느껴져도 자꾸 반복해서 웹사이트 (2개이상 페이지) 4-5정도 제작해보시면 사이트 제작 방법에 대해 자신감이 생기리라 생각됩니다. 열심히 공부하셔서 원하시는 목표를 꼭 달성하시기 바랍니다^^ 좋은강의로 찾아뵙겠습니다. 감사합니다^^ J.young드림
$37.40
jyoung's other courses
Check out other courses by the instructor!
.png?f=avif&w=420)
Similar courses
Explore other courses in the same field!
![부트스트랩을 활용한 반응형 웹제작[기본 개념편] 부트캠프강의 썸네일](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)