강의

멘토링

커뮤니티

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.

5 learners are taking this course

Level Beginner

Course period Unlimited

  • sarc
css
css
Responsive Web
Responsive Web
Flex
Flex
css-grids
css-grids
Web Design
Web Design
css
css
Responsive Web
Responsive Web
Flex
Flex
css-grids
css-grids
Web Design
Web Design

What you will gain after the course

  • 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

161

Learners

12

Reviews

3

Answers

3.9

Rating

5

Courses

Hello. This is Social Archive.

Social Archive operates a 'repository for high-quality materials with long-term preservation value' and performs three roles that will innovate the way you work.

  1. [Software Engineer] At Kakao Enterprise, I developed backend APIs and contemplated fundamental efficiency improvements for business systems. This experience serves as the foundation for designing the most robust AI automation processes.

  2. [AI Pilot] I am an early adopter who utilizes GPT and AI tools to derive the fastest and most accurate results in practice. By selecting only proven know-how, I present the optimal flight path for you.

  3. [Professional Instructor] As a lead instructor for KB Kookmin Bank IT Academy and goormedu, I possess the delivery skills to break down complex technologies into easy-to-understand knowledge that can be immediately applied in practice.

This lecture is a high-quality work innovation resource that integrates the peak capabilities of three personas. Together with me, let’s turn AI into a core asset for the future, rather than just a simple tool.

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!

$15.40

sarc's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!