GSAPのScrollTriggerを活用したポートフォリオ制作
jyoung
GSAPのScrollTriggerを活用して、スクロールに反応するインタラクティブなレスポンシブウェブポートフォリオを作ってみましょう！
Basic
HTML/CSS, scrolltrigger, gsap
Real! Website Creation! Step by Step! (Wise Studio_Responsive Web)
Real! Website Creation! Step By Step Application Course This is a course to create the main page of Ystudio (http://www.ystudio.co.kr/) using html/CSS/jQuery and plug_in. (Complete lecture file attached!)
Reviews from Early Learners
What you will learn!
Layout design using HTML5/CSS3
How to apply web font icon (linearicon)
How to apply web fonts (googlefonts)
Various mouse over effects
How to use developer tools
jQuery: gnb jQuery that appears when you click the hamburger menu
jQuery: jQuery header fixed to the top when scrolling
jQuery: jQuery that moves smoothly to the top when the top move button is pressed
plug-in: Animation that progresses when scrolling (scrolla.jquery application)
plug-in: Image slide with animation (slick plugin)
Creating a responsive web page (PC mode, tablet mode, mobile mode)
Responsive: How to use media queries
responsive: viewport
If you only know HTML and CSS
Web page creation OK!
If you are looking for a job as a UI/UX designer or front-end developer , you need to have at least 5-6 portfolios of web pages that fit the current trends .
This lecture is about selecting a website that is currently commercially available , has excellent aesthetic elements that are in line with the 2020 trends, and is suitable for portfolio creation, and creating it as is .
The course is designed for those with basic knowledge of HTML and CSS and will proceed by implementing actual web pages .
Even if you don't know difficult JavaScript and jQuery , we help you create beautiful and colorful web pages in a short period of time by utilizing libraries and plugins based on HTML and CSS .
Step By Step!
Get started right now.
If you prepare a portfolio while taking a webpage lecture composed of interactive elements essential for practical work , you will be able to complete a high-quality portfolio by the end of the lecture and get closer to successful employment.
>> Responsive web page creation from PC mode to tablet and mobile mode (768px)
.gif)
>> Responsive web page creation from PC mode to tablet and mobile mode (414px)
.gif)
>> Responsive web page creation from PC mode to tablet and mobile mode (320px)
.gif "ezgif.com-crop (3).gif")
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 know HTML and CSS but have 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
For creating an eye-catching website
Learn about the curriculum
1. Layout html/ccs
- How to apply web font icons linearicon
- How to apply web fonts googlefonts
- Various mouse over effects
- How to use developer tools
2. Simple jquery usage
- gnb jQuery that appears when you click the hamburger menu
- jQuery header fixed to the top when scrolling
- jQuery that moves smoothly to the top when the top move button is pressed
3. Create simpler and more effective web pages by applying various jQuery plugins.
- Animation that occurs when scrolling - How to apply the scrolla.jquery plugin/how to use options
- Image slides with animation - How to apply the Slick plugin/How to use options
4. Building a Responsive Web Page
- How to use media queries
- viewport
What's special about this course? I'm curious!
Q1. Will it help me get a job?
A1. A single image speaks louder than a long text. If you create a webpage while attending the lecture, you'll be able to create a compelling portfolio that will immediately catch the eye of hiring managers, greatly assisting your job search.
Tools covered here
After this lecture, you will have a different design style and feel.
Ten website creation courses will be opened sequentially.
Students preparing their portfolios are encouraged to refer to this and work together to create high-quality web pages.
tml, 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?
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 portfolio for employment as a web designer or publisher
A graphic designer who wants to transition to a front-end developer.
Those who have basic HTML/CSS knowledge but are afraid of creating web pages
Need to know before starting?
HTML/CSS
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 24min)
Course Materials:
Lecture resources
Published:
Last updated:
Reviews
All
16 reviews
4.9
16 reviews
kiki606a0614Reviews 2
∙
Average Rating 5.0
5
81% enrolled高品質講義ありがとうございます
- jyoungInstructor
ジヨンさん、本当に疲れました〜 早い時間内に講義を終えました… ありがとうございます... 現在、次のステップコース講義の準備中です。 継続的な関心をお寄せいたします。 ありがとうございます^^
- josujung10111483
Reviews 1
∙
Average Rating 5.0
5
97% enrolled最近のトレンドホームページをたくさんアップロードしてください〜
- jyoungInstructor
修正！熱工してくれて受講坪を残してくれて本当にありがとうございます。受講評に力を入れて、より良い講座に挨拶させていただきます。 現在トレンドに合ったインタラクティブウェブ撮影中にいますね…近いうちに素敵で派手で理解しやすいように制作して上げるようにします。着実な愛と関心をお寄せいただきありがとうございます^^
- bapzelo974355
Reviews 1
∙
Average Rating 5.0
5
100% enrolledフォローしやすく講義してくれて難しくなくジャミッと講義完了できました！ありがとうございます😊
- jyoungInstructor
スミン様受講評ありがとうございます。さらに良い講義でお会いしましょう。 J.youngドリーム
- jasonchoidba9534
Reviews 4
∙
Average Rating 5.0
5
97% enrolled良い講義ありがとうございます。
- jyoungInstructor
Choi Jasonさん 受講評 ありがとうございます 今後もっとお得な講義準備させていただきます~~^^ 今日も良い一日になります ^^~~
- winterlove
Reviews 4
∙
Average Rating 4.8
5
100% enrolled一人で本を見ながら実習しようと、きちんとできなかったのですが、J.ヤング様のワイスタジオ反応型ウェブ講座を聞いてみると体系が取れているようです。じっくりマークアップに従うと簡単に感じられてもう自信ができます^^ ありがとうございます。
- jyoungInstructor
kateさん 受講評 ありがとうございます。 私の講義を聞いて自信があったなんて私がもっと感謝したことでしょう.. 常に最新のトレンドに合わせて実務活用応用が高い講義で準備します。 ポポール製作にも大いに役立つ講座でお会いしましょう ありがとう 今日も良い一日になります^^
$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/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?f=avif&w=420)
![モダン ウェブ インタラクティブ CSS3 [PART2/3]Course Thumbnail](https://cdn.inflearn.com/public/courses/335745/cover/db39333d-68a5-4ca7-9629-dac891711a94/335745.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)
![[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)
![スプリングフレームワークは私の手に[スープ2弾]Course Thumbnail](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)
