[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.^^
172 learners
Level Basic
Course period Unlimited
Recommend Course to grow and earn commission!
Marketing Partners
Recommend Course to grow and earn commission!
Reviews from Early Learners
5.0
Sh H
I wanted to try responsive web without using tools like bootstrap, and the lecture was so calm and clean that I finished it in 3 days. I was able to understand it very easily while working on creating a responsive web. The length of the first lecture was appropriate, and overall, there were no unnecessary details or difficult explanations. I think it will be very helpful for my future studies:) Thank you.
5.0
uj06214
The teacher explained it in such detail and detail that it was easy to understand and it was a very helpful class. He also provided all the materials and was very kind!! Especially, since I am a beginner in coding, it was difficult to make a layout, but he explained it so easily and clearly that I felt like my skills were improving quickly as I studied. Thank you~~
5.0
ssssssso11
It was a lecture that explained everything step by step from the basics, so I was able to take the class without difficulty. Although it is an online lecture, it seems like a very informative lecture that goes into detail as if I was listening to it in person! Since it is so intense, I quickly created a website. Thank you.
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
9,110
Learners
367
Reviews
227
Answers
4.8
Rating
14
Courses
"I am J.Young, your design and development portfolio mentor."
I have run a web design and app development company for the past 20 years, experiencing the intensity of the field firsthand. Based on that experience, I am currently dedicated to nurturing future experts at universities and professional educational institutions, covering everything from UI/UX design to front-end development.
My teaching philosophy is clear.
From basics to practice, a seamless connection
A compression of core skills desired by the industry
Achieving Employment Success through a Practical Portfolio Completion
For those who feel overwhelmed and don't know where to start, office workers dreaming of a career change but lacking time, and beginners who feel like coding is a world away—I will turn my 20-year journey into your shortcut. Until the day you stand tall as a professional, I will do my best to be your reliable mentor and help you every step of the way.
J.young will help you!!
Also!! If you have any questions while studying, please leave a comment and
I will do my best to provide a helpful answer.
Professional Experience
- 2017~Present) Web Development Director
- 2015~2017) Executive Director at Eliesel Co., Ltd.
- 2003~2015) Executive Director at Amusingwear Co., Ltd.
- 2003: Design Manager at Seowoo C&D
- Current)
- UI/UX Web Planning/Design/Front-end Bootcamp Instructor (EZEN DX Academy - Seocho Branch)
- Professional lectures and group/individual tutoring for design and development portfolios
* YouTube channel in operation (Coding Designer)
Operating an Open Chat Room
For smoother learning, if you join the Jalnan Web Design 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 Design
- Code: jyoung
Co-instructor
All
32 lectures ∙ (5hr 10min)
Course Materials:
All
20 reviews
4.8
20 reviews
Reviews 1
∙
Average Rating 5.0
5
It was a lecture that explained everything step by step from the basics, so I was able to take the class without difficulty. Although it is an online lecture, it seems like a very informative lecture that goes into detail as if I was listening to it in person! Since it is so intense, I quickly created a website. Thank you.
Reviews 1
∙
Average Rating 5.0
5
The teacher explained it in such detail and detail that it was easy to understand and it was a very helpful class. He also provided all the materials and was very kind!! Especially, since I am a beginner in coding, it was difficult to make a layout, but he explained it so easily and clearly that I felt like my skills were improving quickly as I studied. Thank you~~
I am more encouraged by uj06214's course review. I am even happier that you seem to have accepted the course easily. I will always come back with good courses. Thank you.
Reviews 1
∙
Average Rating 5.0
5
It has both the core and practicality of the trend. It is a lecture that cannot be easily found anywhere else. I think it will be useful in practice. Thank you for the great lecture :) I will continue to take only j.young's classes in the future.
Thank you, vivien^^ vivien's class review gives me strength. I will research and upload even better classes. Thank you^^
Reviews 2
∙
Average Rating 5.0
5
I wanted to try responsive web without using tools like bootstrap, and the lecture was so calm and clean that I finished it in 3 days. I was able to understand it very easily while working on creating a responsive web. The length of the first lecture was appropriate, and overall, there were no unnecessary details or difficult explanations. I think it will be very helpful for my future studies:) Thank you.
Sh H, thank you for the encouraging class review^^ We will come back with better lectures in the future. Have a good day today^^ J.young Dream
Reviews 1
∙
Average Rating 5.0
5
Thank you for explaining things so calmly and well. It was a great help ^^ Coding was so difficult, but I'm learning little by little and having fun watching the lecture!! I'm learning a lot about how to organize and design complex responsive layouts easily~~ Please continue to provide great lectures!!!
Thank you for your review, jjarajan1213. Coding may seem difficult at first, but if you keep making 4-5 websites (more than 2 pages), I think you will gain confidence in how to make a website. I hope you study hard and achieve your goals^^ I will come back with a good lecture. Thank you^^ J.young Dream
Check out other courses by the instructor!
Explore other courses in the same field!
$37.40
.png?w=420)
![Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)Course Thumbnail](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?w=420)
![Responsive Web Development Using Bootstrap [Basic Concepts] BootcampCourse Thumbnail](https://cdn.inflearn.com/public/courses/333092/cover/5a3043a4-fc2d-4b25-9096-306c8f707b5b/333092.jpg?w=420)
![[2026 Examination Standards] Web Design Development Technical Qualification Practical Exam Complete GuideCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?w=420)
