강의

멘토링

로드맵

BEST
Programming

/

Web Development

Learn CSS Flex and Grid Properly

You'll learn about Flex and Grid, the current and future standards for writing CSS layouts.

(4.9) 212 reviews

2,709 learners

  • studiomeal
HTML/CSS
Flex

Reviews from Early Learners

What you will learn!

  • Essential features of Flex and Grid

  • CSS code that is practical and future-oriented right now

  • How to apply Flex and Grid to various UIs

  • Using Grid in IE (Internet Explorer)

  • Translating grid-based designs directly into code

What if you're a web publisher, front-end developer, or designer who codes?
It's time to learn Flex and Grid! 💁‍♂️

Why Flex and Grid?
Should I learn it? 🤔


In many environments, screens are still composed using Float, etc. instead of Flex and Grid.
Code structured like this causes many problems.

👌 Flex and Grid are technologies that will become the standards and foundation of CSS in the future.
Numerous services are being designed based on Grid, and it is essential to apply it as is.

👌 Simple and easy.
While previous technologies required all sorts of tricks to express things, Flex and Grid solve many problems very simply and easily.

👌 This is a technology that can be applied immediately in practice.
Just because Flex and Grid don't work in Internet Explorer doesn't mean they can't be used in practice.
You can use it if your project supports the latest version of Internet Explorer.


What you'll learn in class 📋

A summary of key concepts organized for easy understanding.

This is a new concept, so there's quite a bit to learn. Beginners may find some parts confusing and challenging, even after reading the organized documentation. Since this is the foundational technology for CSS layout coding, we've dedicated considerable time to explaining the concepts so you can fully grasp them.

Creating a simple UI based on the concept

After learning the basic core concepts, you will create essential and frequently used UI patterns and responsive pages yourself.
The course is structured to help you build a solid foundation and become accustomed to it naturally.

Practice creating responsive pages with Flex and Grid.

99% of services being built these days are responsive. Create powerful responsive pages much more easily and conveniently using Flex and Grid. Let's create a 3D game board just as you designed and imagined, and use what we've learned to get a feel for how we can bring our imaginations to life!

Using Grid in Internet Explorer

Flex and Grid aren't "technologies that can't be used in practice because they don't work in Internet Explorer." Let's compare their properties and learn how to use Grid.


Related Roadmap
🚎

Create dynamic, interactive websites that will elicit exclamations of "Oh!"
Creating an interactive website with 1 Minute Coding
This is a roadmap of lectures.
This lecture is included .

Recommended for
these people

Who is this course right for?

  • For those who plan to continue coding CSS in their careers.

  • Anyone who wants to learn new ways to create layouts using Flex and Grid

  • Anyone who wants to break away from old-fashioned coding and learn new layout standards.

  • I studied Flex and Grid, but I don't know how to use them.

  • Float Mania

Need to know before starting?

  • CSS Basics

Hello
This is

19,408

Learners

1,240

Reviews

1,175

Answers

5.0

Rating

11

Courses

서울에서 웹 개발자/디자이너로 일했고, 제주를 거쳐.. 현재는 말레이시아 페낭에서 열심히 개발도 하고, 교육 콘텐츠도 만들고, 1인 기업으로서 해볼 수 있는 여러가지 시도와 실험들을 해보고 있습니다.
비주얼 임팩트가 있는 인터랙티브 웹에 관심이 많고, 유튜브와 페이스북 "1분코딩"에서 웹 개발 관련 기술들을 공유하고 있어요.

Curriculum

All

42 lectures ∙ (5hr 50min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

212 reviews

4.9

212 reviews

  • ses123you7079님의 프로필 이미지
    ses123you7079

    Reviews 19

    Average Rating 4.9

    5

    100% enrolled

    CSS Flex and Grid were only the names I had heard, but this time I learned about the concept and how to make it responsive, so it was a useful time. The JavaScript basics video I saw on YouTube became a signal, so I took the lectures "Getting Started with Interactive Web Development Properly", "SVG Master", and CSS Flex & Grid, and I am satisfied with all three lectures. I will watch them repeatedly and make good use of what I learned~! I am also looking forward to the next scroll lecture.

    • studiomeal
      Instructor

      Wow- You listened to all my lectures after YouTube~~ Thank you so much ㅎㅎ Please use what you learned well to create great works! Thank you for the good review^^

  • thsoon님의 프로필 이미지
    thsoon

    Reviews 19

    Average Rating 5.0

    5

    100% enrolled

    I recommend this lecture. I used to do layouts with flex, but after seeing examples of creating web pages, I got a feel for how to do it responsively. And when I was just looking at the document for grid, I got confused about what was important and what was additional, but now I think I can do the entire layout with grid!

    • studiomeal
      Instructor

      Oh- Taehyun, it seems like you've grasped all the key points of this lecture! Thank you for your kind words and for the recommendation :)

  • tamarixda3880님의 프로필 이미지
    tamarixda3880

    Reviews 1

    Average Rating 5.0

    5

    71% enrolled

    As you said during the lecture... I'm really confused because it's my first time.^^ If I listen to the lecture and think about something else for a moment, I get confused. Hahaha

    • studiomeal
      Instructor

      Yes, it must have been because it was your first time and the concept was unfamiliar :) Since the function itself is so good, if you repeat and practice until you get used to it, you will be able to use it much more comfortably and quickly than the existing method~~ Thank you for the good review!

  • jinsu님의 프로필 이미지
    jinsu

    Reviews 5

    Average Rating 5.0

    5

    98% enrolled

    I'm watching YouTube and Inflearn lectures well! I listen to the lectures every time they come out, and the biggest advantage is that I can watch them smoothly without any problems! I'm learning a lot from this lecture, from theory to practical application tips! I hope you continue to give fun lectures in the future 👍

    • studiomeal
      Instructor

      Ah, I feel good that you gave me such good advice from the first class review😄 I hope you find it useful. Thank you, Sujin!

  • ymo3213946님의 프로필 이미지
    ymo3213946

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    I listened to the great lecture~~~

$38.50

studiomeal's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!