Real Practice! Website Creation! Step By Step! _Basic (Hanwha Chemical_Responsive Web)
This is a practical course on building a website (Hanwha Chemical/Solutions) using HTML5 and CSS3. It is a "Practical Web Page Creation! Step by Step!" Basic Course designed to help you fully understand and utilize PC mode layouts and responsive page creation.
(Completed lecture files are attached!)
I was one of those who cheered when Bracket first came out from Adobe^^
There are various editors, but it was impressive that the instructor taught using Bracket.
I am grateful that he taught the basics thoroughly while making responsive pages,
and I really enjoyed the useful lecture, from understanding tags to using developer tools.
Please open many more lectures that I would like to strongly recommend to people around me.
Don't get tired in the heat and take care of your health^^
5.0
ws k
100% enrolled
It was a really satisfying lecture.
I almost knew all the HTML tags and CSS properties used in the lecture,
but it was amazing and fascinating to see the screen change every time I typed the code, saved it, and pressed F5.
I'm looking forward to the next lecture, and thank you for uploading a great lecture.
5.0
조동찬
100% enrolled
I am a father in my early 40s who currently runs a business. In order to prepare for the upcoming 4th industrial revolution, I became interested in coding, which is the core of IT technology, and I searched to learn the basics and create my own company homepage. Then, I ended up taking the instructor's course. I only knew the basics of HTML and CSS, but after listening to the instructor's lecture and creating an actual webpage, I understood it very well and learned a lot about how to use it in practice. This lecture was a very useful lecture that gave me confidence in creating webpages. I am also planning to take the instructor's Daebang Industry lecture soon. Based on what I learned from the instructor's lecture, I plan to create a wonderful company homepage and continue to learn related JavaScript languages to develop front-end. Thank you.
What you will gain after the course
Web Accessibility HTML5 Markup - Defining Document Structure
Apply Layout Design by understanding various CSS3 properties.
Understanding and Application of Block and Inline Properties
Understanding and application of position
Understanding and Application of Animation Production
Understanding and Applying Pseudo-elements (:before, :after)
Creating Skip_nav
Various hover and focus effects
Understanding and Applying z-index
How to use and apply FontAwesome
How to Use and Apply Google Fonts
How to use developer tools
How to Create and Apply Responsive Web Pages
Even if you only know HTML and CSS, Web page creation is OK!
UI/UX designers or those aspiring to become front-end developersmust have at least 5–6 portfolios that implement web pages matching current trends.
This course is the Basic Course of the website production series "Practical! Website Production Step By Step," where you will learn to recreate the main page of the Hanwha Solutions/Chemical site exactly as it is.
The "Practical! Website Creation Step By Step" lecture series consists of courses where you select and recreate actual commercial websites that align with the latest trends, possess excellent aesthetic elements, and are suitable for portfolio creation, so please keep this in mind for your studies.
>> Creating CSS Animations
>> Creating a CSS Animation where the scale increases on mouse hover
>> Creating a sliding animation on mouse hover using pseudo-elements
>> Creating layouts from PC mode to tablet (1024px, 768px) and mobile resolutions (414px, 320px)
>> From PC mode layout to tablet (1024px, 768px) and mobile resolution (320px) scroll screens
This course is designed for those who have a basic understanding of HTML and CSS but lack a sense of how to build layouts, and it proceeds by implementing an actual webpage from scratch. Through the process of personally creating the main page of the Hanwha Solutions/Chemical site, I will help you increase your understanding of layout production by utilizing HTML5 and CSS3, and enable you to apply and create layouts with confidence regardless of the design. Let's learn step-by-step together so that you can not only gain a perfect understanding of responsive page production and strengthen your production capabilities but also walk away with a high-quality portfolio.
Step By Step! Get started right now.
If you take this course on web pages composed of essential interactive elements used in the field while also preparing your portfolio, you will be able to complete a high-quality portfolio by the end of the course and get much closer to successful employment.
After the lecture is over, What you gain :D
1. Solid layout creation skills
To create a webpage, the most important thing is to create an accurate layout based on HTML and CSS. Even if you have the basics of HTML and CSS but have no sense of Layout Design at all, 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!
2. Boost Work Productivity!
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 practice. As you consistently practice while taking the course, you will find your professional skills going UP! UP!
3. High-Quality Portfolio
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 as well as the subsequent website creation practice courses, you will be able to complete a portfolio that will serve as your greatest weapon in your job search.
4. Open Chat Room Operation
For smoother learning, if you join the Jalnan Web Design 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
Check out the curriculum for creating eye-catching websites
1. Defining document structure through HTML Markup for web accessibility 2. Understanding various CSS3 properties and applying Layout Design 3. Understanding and applying position 4. Understanding and applying Block and Inline properties 5. Understanding and applying Animation 6. Understanding and applying pseudo-selectors (:before, :after) 7. Various hover and focus effects 8. Understanding and applying z-index 9. Creating skip_nav 10. How to use and apply FontAwesome 11. Using Google Fonts 12. How to use developer tools
What's special about this course? I'm curious!
Q1. Will this help with getting a job? A1. A single image can be more powerful than a long piece of writing. If you build web pages while taking this course, you will be able to create a flashy portfolio that catches the eye of hiring managers, which will be a great help in getting a job.
Tools covered here
After this lecture, 9 website production lectures with different design styles and vibes will be opened sequentially.
Students preparing their portfolios should refer to this and join us in creating high-quality web pages.
html, css, html/css, website, website, coding, coding, jquery, jquery, layout, interactive web, interactive web, web design, web design, portfolio, publishing
Recommended for these people
Who is this course right for?
Those who have a basic understanding of HTML/CSS but are afraid of building a web page.
Graphic designers who want to transition to becoming a front-end developer.
Those who want to quickly create a portfolio to get a job as a web designer or publisher.
Those who want to design and implement various layouts to get a job as a web designer or publisher.
"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 professionals at universities and specialized 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
Completion of a practical portfolio that leads to job success
From those who feel overwhelmed about where to start, to office workers dreaming of a career change but lacking time, and even beginners who feel like coding is a world away—I will turn my 20-year journey into your shortcut. Until the day you stand confidently 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 Eliezer 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/private tutoring for design and development portfolios
For smoother learning, if you join the Jalnan Web Design open chat room run by J.young, I will provide answers to lecture questions and feedback on your portfolio.
- Open Chat Room Name: Jalnan Web Design - Code: jyoung
I was one of those who cheered when Bracket first came out from Adobe^^
There are various editors, but it was impressive that the instructor taught using Bracket.
I am grateful that he taught the basics thoroughly while making responsive pages,
and I really enjoyed the useful lecture, from understanding tags to using developer tools.
Please open many more lectures that I would like to strongly recommend to people around me.
Don't get tired in the heat and take care of your health^^
Thank you, Kate.
I know that you have been cherishing my lectures and listening to them diligently. I sincerely appreciate it.
I will prepare with the best attitude so that I can upgrade your skills and abilities with better lectures.
The next lecture is scheduled to open in July. I apologize for the delay in the release due to the move. Thank you again^^
When you get immersed in it, time flies by so quickly...
There's no time to get bored^^
I highly recommend learning through clone coding before jumping into real projects.
I am a father in my early 40s who currently runs a business. In order to prepare for the upcoming 4th industrial revolution, I became interested in coding, which is the core of IT technology, and I searched to learn the basics and create my own company homepage. Then, I ended up taking the instructor's course. I only knew the basics of HTML and CSS, but after listening to the instructor's lecture and creating an actual webpage, I understood it very well and learned a lot about how to use it in practice. This lecture was a very useful lecture that gave me confidence in creating webpages. I am also planning to take the instructor's Daebang Industry lecture soon. Based on what I learned from the instructor's lecture, I plan to create a wonderful company homepage and continue to learn related JavaScript languages to develop front-end. Thank you.
Thank you for your course review, Jo Dong-chan^^
You can study up to the front end from now on~~
You need to know the company homepage to manage it,
and learn from it!! I support you!!!
Thank you for taking the Daebang Industry course as well..
It will be a great help in adding Daebang Industry layout and fancy interactive elements.
Thank you^^
J.young Dream
It was a really satisfying lecture.
I almost knew all the HTML tags and CSS properties used in the lecture,
but it was amazing and fascinating to see the screen change every time I typed the code, saved it, and pressed F5.
I'm looking forward to the next lecture, and thank you for uploading a great lecture.
WS K
Thank you so much for your hard work and good class reviews.
It makes me want to film harder^^
We will always be together with you in the future for better classes
I sincerely thank you.
Have a great day today^^
I learned HTML and CSS, but there were a lot of things that were confusing. But while making a website, you explained well where and how to use it, so I was able to review it easily!
Thank you for your high course review, cnqjatlr2175.
If you listen to the HTML/CSS Basic Solid Super Speed Complete Course (Free Course) that I uploaded this time, I think it will be very helpful for practical use.
It is a basic course, but it will be helpful for practical application.
Thank you^^
J.young Dream
.gif)
.png?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] Perfect Guide for the Web Design & Development Technician Practical ExamCourse Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.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)
