강의

멘토링

커뮤니티

NEW
Programming

/

Front-end

Learning CSS Through Stories

This is a hands-on project course that beautifully styles a cafe homepage made with HTML using CSS. You can naturally learn all the CSS fundamentals from colors, layouts, and typography to Flexbox, Grid, animations, and responsive design by following the story of Minji and Teacher Code. With 4 hours of learning, even beginners can complete professional web design.

1 learners are taking this course

  • sarc
css기초
웹디자인입문
프로젝트기반학습
스토리텔링강의
반응형디자인
css
Responsive Web
Flex
css-grids
Web Design

What you will learn!

  • You can master all the fundamental CSS properties through hands-on projects.

  • You can understand the fundamentals of design such as color, layout, and typography.

  • You can actually make a cafe homepage created with HTML beautifully decorated

  • You can learn the basics of responsive web design through hands-on practice.

  • You can develop the skills to apply modern web design trends.

Learning CSS Through Stories - Designing Minji's Cafe Homepage

This is a practical project course that beautifully decorates a cafe homepage made with HTML using CSS.

Color, layout, typography, Flexbox, Grid, animation, and responsive design

You can naturally learn all the basics of CSS by following Minji and Teacher Code's story!


✨ What Makes This Course Special

🎭 Storytelling Learning

Follow the story of Minji and Teacher Code to naturally learn CSS. Learning through understanding in context rather than simple memorization!

🏗️ Real-World Projects

Complete the Code Brew Cafe homepage from start to finish. Immediately apply what you've learned and complete your portfolio!

📱 Responsive Design

Create websites that look perfect on all devices from mobile to desktop. Master essential practical skills!

Meet not only the story but also expected questions and answers for theoretical learning, plus Code Teacher's helpful tips

Mini quizzes and study summaries are also systematically organized

🎓 What will you learn?

Section 1: Getting Started with CSS

  • ✅ CSS Connection Methods and Selectors

  • ✅ Color and background styling

  • ✅ Font and Text Styling

Section 2: Box Model and Layout

  • ✅ Perfect Understanding of the Box Model

  • ✅ Adjusting margins and size

  • ✅ Element Layout Basics

Section 3: Modern Layout

  • ✅ Mastering Flexbox

  • ✅ Creating a Gallery with CSS Grid

  • ✅ Professional layout composition

Section 4: Interaction and Animation

  • ✅ Hover Effects and State Changes

  • ✅ CSS Animation

  • ✅ Smooth transition effects

Section 5: Responsive Design

  • ✅ Utilizing Media Queries

  • ✅ Mobile optimized

  • ✅ Cross-browser compatibility


🎯 Expected Learning Outcomes

What you will learn

Master all the fundamental CSS properties through hands-on projects

Understanding the fundamentals of design including color, layout, typography, etc.

Beautifully decorating a cafe homepage made with HTML

Learn the fundamentals of responsive web design through hands-on practice

The ability to apply modern web design trends

What you can do after completion

🚀 High-quality projects you can add to your portfolio

🚀 Directly design homepages for various industries

🚀 Deploy with GitHub Pages to operate an actual website

🚀 Solid foundation for learning the next step (JavaScript)

📋 Prerequisites


Recommended for
these people

Who is this course right for?

  • Beginners who have learned HTML basics but find design challenging

  • People who want to create beautiful websites with code

  • Someone who wants to make a simple HTML page look professional

  • Those who want to learn the basics of web design

  • Business owners who want to beautifully design websites for cafes, restaurants, and small businesses

Need to know before starting?

  • You need basic HTML knowledge! You should understand the fundamental structure of HTML tags. It's sufficient if you first take the "Learning HTML Through Stories" course or at least know basic tags like div, h1, p, a, img, etc.

Hello
This is

112

Learners

9

Reviews

3

Answers

4.0

Rating

5

Courses

안녕하세요. 소셜아카이브 입니다.

소셜 아카이브에서는 '장기 보존의 가치를 지닌 고품질 자료들의 보관소'를 운영하며, 여러분의 업무 방식을 혁신할 세 가지 역할을 수행합니다.

  1. [소프트웨어 엔지니어]카카오 엔터프라이즈에서 백엔드 API를 개발하며 업무 시스템의 근본적인 효율화를 고민했습니다. 이 경험이 AI 자동화 프로세스를 가장 견고하게 설계하는 기반이 됩니다.

  2. [AI 파일럿] 저는 GPT와 AI 툴을 활용하여 실무에서 가장 빠르고 정확한 성과를 도출하는 선행 사용자입니다. 검증된 노하우만을 선별하여 여러분에게 최적의 비행 경로를 제시합니다.

  3. [전문 강사]KB국민은행 IT 아카데미구름에듀의 주강사로서, 복잡한 기술을 실무에 바로 적용 가능한 쉬운 지식으로 풀어내는 전달력을 갖추었습니다.

이 강의는 세 가지 페르소나의 최고 역량이 집약된 고품질의 업무 혁신 자료입니다. 저와 함께 AI를 단순한 도구가 아닌, 미래의 핵심 자산으로 만들어 갑시다.

Curriculum

All

15 lectures ∙ (3hr 51min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$13,860.00

30%

$15.40

sarc's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!