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!)
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
8,328
Learners
329
Reviews
224
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
All
26 lectures ∙ (4hr 0min)
Course Materials:
All
21 reviews
4.8
21 reviews
Reviews 4
∙
Average Rating 4.8
5
Adobe에서 Bracket이 처음 나왔을때 환호성을 지르던 1인이었어요^^ 편집기가 다양하지만 강사님께서 Bracket으로 강의해주셔서 인상적이었습니다. 반응형 페이지 제작을 하면서 기본적인 부분을 꼼꼼하게 알려주셔서 감사하고 태그 이해부터 개발자 도구 활용법까지 정말 유익한 강좌 잘 들었어요. 주변 지인들에게 강력 추천하고 싶은 강좌들 앞으로도 많이 개설해주세요. 더위에 지치지마시고 건강 조심하세요^^
kate님 감사합니다. 제 강좌 아껴주시고 열심히 들어주신 점 잘 알고 있습니다. 진심으로 감사드립니다. 제가 더욱 더 좋은 강의로 실력과 스킬을 업그레이드 시켜드릴 수 있도록 최선의 자세로 준비하도록 하겠습니다. 다음 강좌는 7월중에 오픈 예정입니다. 이사가 있는 관계로 출시가 늦어져 죄송합니다. 다시 한번 감사드립니다^^
Reviews 6
∙
Average Rating 4.3
5
정말 만족스러운 강의였습니다. 강의에서 사용하는 html 태그나 css 속성은 거의 다 알고 있는 것들인데 코드를 치고, 저장하고, F5를 누를 때마다 화면이 바뀌는 것이 놀랍고도 신기했습니다. 다음 강의도 기대되고, 좋은 강의 올려주셔서 감사합니다.
Reviews 3
∙
Average Rating 5.0
5
현재 개인사업을 하고 있는 40대 초반의 가장입니다. 다가오는 4차 산업 혁명 시대에 대비하기 위해 IT관련 기술의 핵심인 코딩에 관심이 생겨 기초부터 익히고 회사 홈페이지도 직접 제작할 생각에 검색하다가 강사님의 강의를 수강하게 되었습니다. HTML과 CSS 기초만 알고 있는 상태였는데 강사님의 강의를 들으며 실제 웹페이지를 제작해보니 이해가 너무 잘 되고 실제 활용법도 많이 배웠습니다. 이 강의를 계기로 웹페이지 제작에 대한 자신감을 얻은 아주 유용한 강의였습니다. 강사님의 대방 산업 강의도 곧 수강 예정입니다. 강사님의 강의에서 배운 것들을 기반으로 멋진 회사 홈페이지도 만들고 관련 자바스크립트 언어도 계속 학습하여 프런트엔트 개발까지 해 볼 생각입니다. 감사합니다.
조동찬님 수강평 감사드립니다^^ 지금부터라도 얼마든지 프론트엔드까지 공부하실 수 있으시죠~~ 회사 홈페이지도 아셔야 관리를 하실 수 있는만큼 배움의 길!!응원드립니다!!! 이어서 대방산업도 수강해주시는 점 감사드리고.. 대방산업 레이아웃과 화려한 인터렉티브 요소를 추가하시는데 많은 도움이 되실겁니다. 감사합니다^^ J.young드림
Reviews 3
∙
Average Rating 5.0
5
html, css 배우긴 했는데 헷갈리는게 많았는데 웹제작하면서 어디에 어떻게 사용하는지 잘알려주셔서 쉽게 복습할 수 있었습니다!
cnqjatlr2175님 높은 수강평 감사드립니다. 이후 제가 이번에 올린 html/css 기초탄탄 초스피드 완강코스 강의(무료강의)도 들어보신다면 실무활용에 많은 도움이 되리라 생각됩니다. 기초강의이지만 실무적용에 도움이 되실겁니다 감사합니다^^ J.young드림
$17.60
Check out other courses by the instructor!
Explore other courses in the same field!
.png?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드Course Thumbnail](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지Course Thumbnail](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?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)