Figma 참조 - 반응형 쇼핑몰 웹사이트 만들기 완벽 가이드
이지웹
html,css, javascript(jquery) 기초가 있으신가요? 그런데 전체 웹사이트 전체를 어떻게 만들지 잘 모르시나요? 그렇다면 디자인을 참조해서 쇼핑몰 메인페이지 구현을 도전해보세요. 완성된 디자인을 참조하고 기획 의도와 디자인의 상세한 사항들을 파악하여 웹사이트를 구현하는 노하우를 알려드립니다.
초급
Figma, HTML/CSS, JavaScript
Coding for the First Time with Web Publishing - CSS
Learn CSS from the basics to animations and responsiveness. Solidify your fundamentals by reviewing what you've learned through practical examples.
Reviews from Early Learners
What you will learn!
CSS selectors
CSS font and text styles
CSS Layout - float, position
CSS Layout - Flexbox
CSS animation, responsive
After HTML comes CSS!
Create standout web pages with CSS ⭐
CSS to improve the completeness of web documents 🎨
CSS is responsible for the appearance of web documents. You can select a target from an HTML element and set the color, background, position, animation, etc. of the selected target to create a web document that is attractive and easy to use.
This lecture is a continuation of <Coding for the First Time with Web Publishing - HTML Basics>, and assumes that you have learned HTML, and learns the essential techniques needed to set web page styles .
CSS is a priority for accurately selecting style targets from HTML elements. In this lecture, you can learn CSS selectors with certainty. Acquire the basics of responsiveness and implement web pages that are optimized for display on devices of various widths. Learn how to implement animations using transition, animation, and transform properties.
After taking this course, you will be able to use CSS selectors to accurately select the elements you want and freely set the styles of the selected elements!
✔️ Check out the lectures directly from the book author!
- This lecture is based on the contents of the book <Coding for Beginners with Web Publishing> by the author of Youngjin.com. It will be more helpful for your studies if you study with the book.
- After taking the course 'First Time Coding with Web Publishing - HTML Basics', please continue learning this course.
- If you need additional study, check out the author's YouTube channel for additional lectures.
I recommend this to these people 🙋♀️
I have basic HTML knowledge, but
For those who lack basic CSS skills
Responsive, animated implementation
Difficult person
Flexible with Flex
Anyone who wants to learn layout
Lecture Features ✨
Properties required for setting CSS styles
Let's learn one by one!
Based on many years of teaching experience,
Let me explain it to you in an easy-to-understand way !
As a simple example
Let's build a solid foundation !
Through Flexbox
Learn efficient layouts!
Learn things like this 📚
1) Learn CSS selectors thoroughly. CSS starts with accurately selecting a target.
2) Learn font-related styles.
3) Learn essential properties related to layout.
4) Learn all background related properties.
5) Learn the core flex of flexible layout to easily implement more diverse layouts.
6) Learn the basics of animation.
7) Learn and practice the basics of reactivity.
8) Implement the HTML web page created in the previous lecture using CSS.
Q&A 💬
Q. Is this a lecture that non-majors can also take?
If you have taken an HTML course or have basic knowledge, you can do it.
Q. What level of content is covered in the class?
It covers a huge amount of material, from selectors to reactive. Don't be greedy. If you study step by step from the beginning, you can complete the course.
Q. What kind of study should I do after I become strong?
Practice creating web pages using HTML and CSS by referencing various designs. After that, I recommend learning Javascript.
Introducing the knowledge sharer ✒️
Hello. I am instructor Kim Dong-ju, the operator of the rock's easyweb YouTube channel.
Main Books
- Figma Perfect Guide for Web Design & Web Publishing - Vijay Republic Publishing
- Coding for the first time with web publishing - Youngjin.com
Contact Me
You can check offline lecture information, additional videos, etc.
- Website https://ezwebpub.com
- YouTube http://www.youtube.com/c/EasywebPublishing
- Blog https://alikerock.tistory.com
Communication window (survey, 1:1 open chat room) ✒️
Students can provide their opinions and questions at any time through the Google survey and 1:1 open chat room introduced in the What's New section.
Recommended for
these people
Who is this course right for?
Someone who has studied HTML
For those who struggle with implementing responsiveness.
Someone lacking animation fundamentals
Need to know before starting?
HTML
Photoshop
2,510
Learners
48
Reviews
3
Answers
4.9
Rating
8
Courses
■ [현재] 그린컴퓨터아트학원 웹퍼블리싱, 프론트엔드 강의
■ [현재] 웹 퍼블리싱 유튜브 채널 'Rock's Easyweb' 운영
■ 더조은 컴퓨터아카데미 웹 퍼블리싱 강사
■ 한빛 컴퓨터아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
[ 도서 ]
2021.07.19 출간 / 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서 / 비제이퍼블릭
2022.08.25 출간 / 코딩을 처음이라 with 웹 퍼블리싱 / 영진출판사
2023.10 출간 /2024 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
2024.11 재판 /2025 SD에듀 유선배 웹디자인기능사 실기 과외노트 / 시대고시기획
[ 수상경력 ]
2022.08 그린컴퓨터 아트 학원 종로지점 - 우수강사 2021.06 그린컴퓨터 아트 학원 종로지점 - 우수강사 2018.06 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2017.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2016.05 그린 컴퓨터아카데미 신촌 지점 - 우수강사 2015.10 그린 컴퓨터아카데미 신촌 지점 - 우수강사
Curriculum
All
33 lectures ∙ (9hr 12min)
Course Materials:
Lecture resources
2. CSS Units
19:22
11. overflow
18:32
14. box model
16:02
15. Layout - float
16:25
21. gradient
18:39
22. transition
13:28
23. animation
17:35
Published:
Last updated:
Reviews
All
19 reviews
5.0
19 reviews
- 아라레
Reviews 214
∙
Average Rating 5.0
한예지Reviews 1
∙
Average Rating 5.0
- prayforyooh
Reviews 4
∙
Average Rating 4.8
Free
ezweb's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![웹디자인개발기능사 [2025년] 실기전체 (카톡질문가능)강의 썸네일](https://cdn.inflearn.com/public/courses/332868/cover/3a2245ca-bb9f-414a-ba67-403cfcb2b7c9/332868.jpg?f=avif&w=420)
![[2025년 출제기준] 웹디자인기능사 실기시험 완벽 가이드강의 썸네일](https://cdn.inflearn.com/public/courses/324878/course_cover/12211037-e74b-46b3-8942-46d465b81bba/webdesign-cover-02.png?f=avif&w=420)
![[환상의족발] 디자인부터 코딩까지강의 썸네일](https://cdn.inflearn.com/public/courses/332845/cover/5d0ef569-50e5-4300-96ed-3205d526795b/332845.png?f=avif&w=420)
