
Figma UI3 Basics + Practical Skills Solid Ultra-Fast Completion Course
jyoung
It is structured so that you can systematically, easily, and quickly complete the course from basics to practical application using Figma UI3.
Beginner
Figma, ui
Real-world! Website Creation! This is an Application Course from Step By Step where you will recreate the main page of Y Studio (http://www.ystudio.co.kr/) exactly as it is using HTML, CSS, jQuery, and plug-ins. (Completed lecture files attached!)
199 learners
Level Basic
Course period Unlimited
Reviews from Early Learners
5.0
지영
Thank you for the high quality lecture
5.0
SooJung Jo
Please upload a lot of trending homepages these days~
5.0
박수민
Thank you for the easy-to-follow lectures, I was able to complete the course without difficulty and with enjoyment!
Layout design using HTML5/CSS3
How to apply web font icons (Linearicons)
How to apply web fonts (Google Fonts)
Various mouseover effects
How to use developer tools
jQuery: GNB jQuery that appears when clicking the hamburger menu
jQuery: Header that fixes to the top upon scrolling jQuery
jQuery: jQuery for moving smoothly to the top when the "Go to Top" button is clicked.
plug-in: Animation that triggers on scroll (How to apply scrolla.jquery)
plug-in: Image slide with animation (slick plugin)
Creating a responsive webpage (PC mode, Tablet mode, Mobile mode)
Responsive: How to use media queries
Responsive: viewport
Even if you only know HTML and CSS,
Web page creation is OK!
UI/UX designers or those wishing to find employment as front-end developers must have at least 5–6 portfolios featuring web pages that reflect current trends.
This course is about selecting and recreating websites that fit the 2020 trends, have excellent aesthetic elements, and are suitable for portfolio production among currently commercialized websites.
.
This course is designed for those with basic knowledge of HTML and CSS, and it proceeds by implementing an actual webpage exactly as it is.
Even if you don't know difficult javaScript and jQuery, we will help you create cool and flashy webpages in a short period of time using libraries and plugins based on HTML and CSS.
Step By Step!
Start right now.
>> Responsive web page creation from PC mode to tablet and mobile modes (768px)
>> Creating responsive webpages from PC mode to tablet and mobile modes (414px)
>> Creation of responsive webpages from PC mode to tablet and mobile modes (320px)
What you will gain
after the course :D
To create a webpage, HTML and CSS based accurate layout creation is the most important. Even if you know HTML and CSS but have no idea about Layout Design, if you diligently follow this course—which teaches everything thoroughly from the basics— you will soon find that you have built a solid foundation in layout production!
To increase work productivity, you must be able to implement interactive websites in a short time using libraries and plugins. In this course, you can thoroughly study everything from web page layout creation to responsive page production, and you will build web pages using scripts, plugins, and animations required in the field. As you consistently practice while following the lectures, you will find your professional skills leveled UP! UP!
A high-quality portfolio is one of the most effective tools for showcasing your professional capabilities and seizing new opportunities. As you practice while taking the course, you will build up your own portfolio. By consistently implementing web pages through this course and the subsequent website production practice courses, you will be able to complete a portfolio that will serve as your greatest weapon in your job search.
For smoother learning, if you join the Jalnan Web-D open chat room operated by J.young,
we will share essential tips and free webinar links related to Figma, UI/UX, coding, and portfolio creation.
- Open Chat Room Name: Jalnan Web Design
- Code: jyoung
1. Setting up the layout with HTML/CSS
- How to apply web font icons (Linearicons)
- How to apply web fonts (Google Fonts)
- Various mouse-over effects
- How to use developer tools
2. Simple jQuery Usage
- GNB jQuery that appears when clicking the hamburger menu
- Header jQuery that fixes to the top upon scrolling
- jQuery for smooth scrolling to the top when the "Go to Top" button is clicked
3. Applying various jQuery plugins to create web pages more simply and effectively
- Animations triggered by scrolling - How to apply and use options for the scrolla.jquery plugin
- Image slides with animations - How to apply and use options for the slick plugin
4. Configuring a Responsive Web Page
- How to use media queries
- viewport
Q1. Will this help with employment?
A1. A single image can be more impactful than a long piece of writing. If you create web pages while taking this course, you will be able to build a flashy portfolio that catches the eye of hiring managers, which will be a great help in getting a job.
After this lecture, 10 website production lectures with different design styles and moods
will be opened sequentially.
Students preparing their portfolios should refer to this to create high-quality web pages together.
html, css, html/css, website, website, coding, coding, jquery, jquery, layout, interactive web, interactive web, web design, web design, portfolio, publishing
Who is this course right for?
Those who want to design and implement various layouts to get a job as a web designer or publisher.
Those who want to quickly create a portfolio to get a job as a web designer or publisher.
Graphic designers who want to transition to becoming a front-end developer.
Those who have a basic understanding of HTML/CSS but are afraid of building a webpage.
Need to know before starting?
HTML/CSS
Inflearn Verified
Career Verified
11,080
Learners
472
Reviews
247
Answers
4.8
Rating
15
Courses
Hello.
I have over 20 years of practical experience in web and app service planning, design, and development,
and I am currently working as an instructor for UI/UX web planning, design, and front-end bootcamps.
Based on my practical experience, I have helped over 500 students find employment in the design and IT fields, and I am currently focusing on teaching practical skills and new portfolio creation methods suited for the AI era.
Instead of simply learning how to use tools, I help you build capabilities that can be applied immediately in the field by experiencing the same process as actual work, from planning to design, development, and deployment.
We focus on learning AI utilization skills, problem-solving abilities, and collaboration skills required in the rapidly changing job market.
We focus on creating projects and portfolios that can capture the interest of interviewers.
Now, you need the
capabilities of a Fullstack Creator who can plan, design, implement, and deploy.
You will gain basic proficiency in design tools and create actual services using Claude, Codex, and Figma,
experiencing how to produce results alongside AI.
- If you are feeling lost on where to start,
- If you want to increase the competitiveness of your portfolio,
- If you want to grow faster by utilizing AI, I will be your reliable guide.
I will be with you until the moment your results are complete.
Professional Experience
2017~Present | Digital Product Director & UX Consultant
2015~2017 | Executive Director, EliEsel Inc.
2003~2015 | Executive Director, Amusingware Inc.
2003 | Head of Design, Seowoo C&D
Lecturing Experience
Employment Portfolio Creation and Project Mentoring
Corporate lectures and practical competency enhancement training
Practical lectures for universities, corporations, and educational institutions
Design · Development Portfolio Consulting and Group Mentoring
Team coaching and portfolio guidance based on practical projects
Practical training for corporate employees and job seekers
AI-based UI/UX · Frontend Practical Education and Consulting
- Current) Full-time Instructor for UIUX Planning · Design · Frontend Bootcamp (EZEN DX Academy - Gangnam Branch)
- Specialized Lectures on Design/Development Portfolios and Team Group Lectures
* YouTube Channel in Operation (Coding Designer)
Open Chatroom Operation
For smoother learning, if you join the Jalnan Web-D open chat room operated by J.young,
I will provide answers to lecture questions and feedback on your portfolio.
- Open Chat Room Name: Jalnan Web-D
- Code: jyoung
All
32 lectures ∙ (5hr 24min)
Course Materials:
All
16 reviews
4.9
16 reviews
Reviews 2
∙
Average Rating 5.0
5
Thank you for the high quality lecture
Jiyoung, thank you for your hard work~ You finished the lecture in a short time... Thank you... We are currently preparing the next stage of the course, so please continue to show interest Thank you^^
Reviews 1
∙
Average Rating 5.0
5
Thank you for the easy-to-follow lectures, I was able to complete the course without difficulty and with enjoyment!
Thank you for your class review, Sumin. We will come back with better lectures. J.young Dream
Reviews 1
∙
Average Rating 5.0
5
Please upload a lot of trending homepages these days~
Mr. Sujeong! Thank you so much for your hard work and for leaving a review. I will use your review to come up with a better course. I am currently filming an interactive web that is in line with the current trend... I will upload it soon so that it is cool, fancy, and easy to understand. I ask for your continued love and interest. Thank you^^
Reviews 4
∙
Average Rating 4.8
5
I tried to practice by reading the book alone, but I couldn't do it properly, but after taking J. Young's Wise Studio responsive web course, I feel like I'm starting to get the hang of it. As I follow the markup step by step, it feels easy, and now I'm confident^^ Thank you.
Kate Thank you for your course review. I am even more grateful that you gained confidence after taking my lecture.. I will always prepare lectures that are up to date with the latest trends and have high practical application, and I will make sure that it will be a lecture that will greatly help you in creating your portfolio. Thank you Have a great day today^^
Reviews 4
∙
Average Rating 5.0
5
Thank you for the great lecture.
Thank you, Choi Jason, for your review. We will prepare more useful lectures in the future~~^^ Have a great day today ^^~~
Check out other courses by the instructor!
Explore other courses in the same field!