Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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,693 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,333

Learners

1,232

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

  • ses123you님의 프로필 이미지
    ses123you

    Reviews 19

    Average Rating 4.9

    5

    100% enrolled

    css 플렉스랑 그리드는 이름만 들어본 정도였는데, 이번에 개념부터 반응형으로 만드는법까지 알게되어 유익한 시간이었습니다. 유튜브에서 본 자바스크립트 기초 영상이 신호탄이 되어 "인터랙티브 웹 개발 제대로 시작하기 ", "SVG 마스터" 강의, 그리고 CSS flex & Grid 강의까지 듣게 되었는데 3개 강의 모두 만족합니다. 반복해서 보면서 배운내용 잘 활용하겠습니다~! 다음에 나올 스크롤 강의도 기대되네요 ㅎ

    • 1분코딩
      Instructor

      와- 유튜브에 이어 제 강의를 다 들으셨다니~~ 넘 감사합니다 ㅎㅎ 공부하신 내용들 잘 활용해서 멋진 작품 만들어주세요! 좋은 평가 감사드립니다^^

  • TaeHyun Lim님의 프로필 이미지
    TaeHyun Lim

    Reviews 19

    Average Rating 5.0

    5

    100% enrolled

    강의 추천드립니다 기존에 flex로 레이아웃을 짰었는데 웹페이지 만드는 예시를 보고 반응형으로 짜려면 어떻게 해야될지 감이 잡혔습니다. 그리고 그리드도 무작정 문서보고 하려니 어떤 것이 중요하고 어떤 것이 부가적인건지 헷갈렸는데 이제 그리드로 전체 레이아웃을 짤 수 있을 것 같습니다!

    • 1분코딩
      Instructor

      오- 태현님은 뭔가 이 강의의 핵심 내용들을 다 파악하신 듯한 느낌이네요! 좋은 말씀도 감사드리고 추천도 해주셔서 넘 고맙습니다 :)

  • tamarixda님의 프로필 이미지
    tamarixda

    Reviews 1

    Average Rating 5.0

    5

    71% enrolled

    강의중 말씀하신데로..처음이라서 무지 헷갈리네요.^^ 강의 듣다 잠시 딴 생각하면 헷갈리네요. ㅎㅎㅎ

    • 1분코딩
      Instructor

      네 처음이라 개념이 생소해서 그러셨을거에요 :) 기능 자체가 워낙 좋으니 익숙해질때까지 반복하고 연습하시다보면 기존 방식보다 훨씬 편안하고 빠르게 사용하실 수 있을거에요~~ 좋은 평가 감사합니다!

  • 진수진님의 프로필 이미지
    진수진

    Reviews 5

    Average Rating 5.0

    5

    98% enrolled

    유투브도 인프런 강의도 잘 보고 있어요! 강의 나올때 마다 수강해서 듣고 있는데, 막힘없이 술술 볼 수 있다는게 큰 장점이예요! 이번 강의도 이론부터 실전 활용 팁까지 잘 얻어갑니다! 앞으로도 재밌는 강의 계속 내주시길 바랍니다 👍

    • 1분코딩
      Instructor

      아, 첫 수강평부터 넘 좋은 말씀 해주셔서 기분이 좋네요😄 유용하게 활용하시면 좋겠습니다. 감사합니다 수진님!

  • 김기웅님의 프로필 이미지
    김기웅

    Reviews 4

    Average Rating 5.0

    5

    100% enrolled

    좋은 강의 잘 들었습니다~~~

$38.50

studiomeal's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!