This is a practical course for creating a website (Hanwha Chemical/Solution) using HTML5 and CSS3. This is a practical course for creating a web page! Step by Step! To fully understand and utilize PC mode layout and responsive page creation. (Attached is the completed lecture file!)
291 learners
Level Basic
Course period Unlimited
Reviews from Early Learners
5.0
김혜경
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
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
조동찬
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.
Web Accessibility HTML 5 MarkUp - Defining Document Structure
Understand various CSS3 properties and apply them to layout design
Understanding and applying Block and Inline properties
Understanding and applying position
Understanding and applying animation production
Understanding and applying virtual selectors ( :before, :after)
Skip_nav production
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
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 the Basic Curse of the website creation series, " Practical! Website Creation Step By Step." This lecture is about creating the main page of the Hanwha Solutions/Chemical site .
The "Real-World! Website Creation Step By Step" lecture series consists of lectures that select and create websites that are in line with the latest trends , have excellent aesthetics , and are suitable for portfolio creation among currently commercially available websites, so please refer to them for your studies.
>> Creating CSS Animations
>> Creating a CSS Animation that increases the scale when the mouse hovers
>> Create an animation that slides when the mouse hovers using virtual content
>> From PC mode layout to tablet (1024px, 768px), mobile resolution (414px, 320px) production
>> From PC mode layout to tablet (1024px, 768px), mobile resolution (320px) scroll screen
.gif)
This course is designed for those with a basic understanding of HTML and CSS but no understanding of layout . It proceeds by implementing an actual web page. Through the process of creating the main page of the Hanwha Solutions/Chemicals website, we will deepen your understanding of layout creation using HTML5 and CSS3 and help you confidently apply and create any layout.
Let's learn together step by step so that you can gain a thorough understanding of responsive page creation, strengthen your production skills, and even take home a high-quality portfolio.
Step By Step!
Get started right now.
After the lecture is over
What you get :D
When creating a web page, creating an accurate layout based on HTML and CSS is paramount . Even if you have a basic understanding of HTML and CSS but 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 !
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!
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.
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
1. Web accessibility HTML MarkUp - Document structure definition
2. Understand various CSS3 properties and apply them to layout design.
3. Understanding and applying position
4. Understanding and applying the Block and Inline properties
5. Understanding and Applying Animation
6. Understanding and Applying Virtual Selectors (:before, :after)
7. Various hover and focus effects
8. Understanding and Applying .z-index
9.skip_nav production
10. How to use and apply FontAwesome
11. Using Google Fonts
12. How to use developer tools
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.
After this lecture, you will have a different design style and feel.
Nine website creation courses will open sequentially.
Students preparing a portfolio should refer to this.
Please help us create high-quality web pages.
html, css, html/css, website, website, coding, 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
Need to know before starting?
HTML/CSS
9,035
Learners
366
Reviews
227
Answers
4.8
Rating
14
Courses
"디자인.개발 포트폴리오 멘토 J.Young입니다."
저는 지난 20년간 웹 디자인 및 앱 개발 회사를 운영하며 현장의 치열함을 몸소 겪어왔습니다. 그 경험을 바탕으로 현재는 대학과 전문 교육 기관에서 UI/UX 디자인부터 프론트엔드 개발까지, 후배 전문가들을 양성하는 데 매진하고 있습니다.
저의 강의 철학은 명확합니다.
기초부터 실무까지 막힘없는 연결
현업이 원하는 핵심 기술의 압축
취업 성공을 부르는 실무형 포트폴리오 완성
어디서부터 시작할지 막막하신 분, 이직을 꿈꾸지만 시간이 부족한 직장인, 그리고 코딩이 남의 이야기처럼 느껴지는 초보자분들까지. 제가 걸어온 20년의 길을 여러분의 지름길로 만들어 드리겠습니다. 당당히 실무자로 서는 그날까지, 여러분의 든든한 사수가 되어 최선을 다해 돕겠습니다.
J.young이 도와드리겠습니다.!!
또한!! 학습하시다 궁금하신 점 있으시면 댓글 남겨주시면
도움이 드릴 수 있는 답을 드리도록 최선을 다하겠습니다.
실무경력
- 2017~현) 웹개발 Director
- 2015년~2017년(주)엘리에셀 총괄 이사
- 2003년~2015년 (주)어뮤징웨어 총괄 이사
- 2003년: 서우씨앤디 디자인실장
- 현)
- UIUX웹기획/ 디자인/프론트엔드 부트캠프 강사 (이젠DX아카데미 -서초점)
- 디자인.개발 포트폴리오 전문 강의 및 그룹 및 개인 지도
* 운영중인 유튜브 (코딩하는 디자이너)
보다 원활한 학습을 위해, J.young이 운영하는 잘난웹디 오픈채팅방에 가입하시면,
강의 질문과 포트폴리오 관련 피드백 드립니다.
- 오픈채팅방명 : 잘난웹디
- 코드 : jyoung
Co-instructor
All
26 lectures ∙ (4hr 0min)
Course Materials:
All
22 reviews
4.8
22 reviews
Reviews 4
∙
Average Rating 4.8
5
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^^
Reviews 6
∙
Average Rating 4.3
5
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^^
Hello~~ ws k I posted a notice about the class review event~~^^ Please check it out
Reviews 3
∙
Average Rating 5.0
5
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
Reviews 2
∙
Average Rating 5.0
Reviews 3
∙
Average Rating 5.0
5
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
$17.60
Check out other courses by the instructor!
Explore other courses in the same field!
.png?f=avif&w=420)
![Modern Web Interactive CSS3 Bootcamp [Full vers.]강의 썸네일](https://cdn.inflearn.com/public/courses/334857/cover/4ccc6c75-74aa-4aba-b3d9-8aabe36e9452/334857.jpg?f=avif&w=420)
![[Fantasy Pig's Feet] From design to coding강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
![[2026 Examination Standards] Web Design Development Technical Qualification Practical Exam Complete Guide강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![Spring Framework in my hands [Spring 2]강의 썸네일](https://cdn.inflearn.com/public/courses/329630/cover/e05f1532-5d1d-440e-be03-c21c42cd5566/329630-eng.png?f=avif&w=420)
