GSAPのScrollTriggerを活用したポートフォリオ制作
jyoung
GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！
Basic
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,570
Learners
339
Reviews
225
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
ma12ghsh0234Reviews 2
∙
Average Rating 5.0
5
100% enrolledブートストラップなどのツールを使用せずに レスポンシブウェブをやりたかったのですが、 講義はとても落ち着いてきちんとしたので、3日後に聞いたことがあります。 レスポンシブウェブを作成するための作業を直接見ながら とても簡単に理解できました 1講義の分量時間も適切です。 全体として、もっともっと難しい説明はありませんでした。 今後の学習に多くの役に立つと思います:) ありがとうございます。
- jyoungInstructor
Sh Hさんの力は受講評ありがとうございます^^ 今後より良い講義でお会いしましょう。 今日も良い一日になります^^ J.youngドリーム
- uj062148301
Reviews 1
∙
Average Rating 5.0
5
100% enrolled先生があまりにも詳細で詳細に教えてくれて理解が上手く、とてもお得な授業でした。資料も全部くださってとても親切です！ 特にコーディング初心者でレイアウトを作ることが難しかったですが、とても簡単でスッキリよく教えてくれてみて勉強するのですぐに実力が増える気持ちですありがとうございます~~
- jyoungInstructor
uj06214さんの受講評価で、私はもっと頑張ります。 講座を簡単に受け入れてくれたように、私がもっと嬉しいです。 いつも良い講座でお会いしましょう。 ありがとう
- ssssssso111739
Reviews 1
∙
Average Rating 5.0
- lung62687754
Reviews 1
∙
Average Rating 5.0
5
88% enrolledコアとトレンドの実用性の両方を確実に捉えました。 ヒョンガンどこでも簡単には見られない講義です。実務で役に立つようです。良い講義ありがとうございます :) これからもずっとj.youngさんの授業だけ受講する予定です。
- jyoungInstructor
vivienさん、ありがとうございます^^ vivienさんの受講に力があります。さらに良いコースを研究する アップロードさせていただきます。 ありがとうございます^^
- jjarajan12132845
Reviews 1
∙
Average Rating 5.0
5
16% enrolledじっくりと説明をとても上手くしてくれて大きな助けになりました^^ コーディングがとても難しかったのに少しずつ学んでいく楽しみが講義見ながらできていますよ!!複雑なレスポンシブレイアウトを簡単に整理し、織り方をたくさん学びましょう〜〜これからも良い講義をお願いします！
- jyoungInstructor
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!
![Bootstrapを活用したレスポンシブWeb制作[実践編]ブートキャンプCourse Thumbnail](https://cdn.inflearn.com/public/courses/333141/cover/2e0b10d5-7e3c-4dd9-ace8-b3374cb55007/333141.jpg?f=avif&w=420)
![ウェブデザイン開発技能士 [2025年] 実技全体 (カカオトーク質問可能)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![スプリングフレームワークは私の手に[スープ2弾]Course Thumbnail](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)
![[2025年出題基準] Webデザイン技能士実技試験完全ガイドCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
