강의

멘토링

로드맵

Programming

/

Web Publishing

CSS GRID Master: Practical Web Implementation of Figma Design

CSS Grid is a powerful tool that allows you to implement complex layouts simply and intuitively. This lecture is designed to help you easily learn the core concepts of CSS Grid to practical applications step by step. Stop being tied to complicated floats and flexboxes and learn the standard of efficient layout design! Start now!

(5.0) 2 reviews

15 learners

  • ezweb
실습 중심
HTML/CSS
jQuery
Figma

What you will learn!

  • A Complete Guide to Basic CSS Grid Syntax and Properties

  • Project practice with real-world examples

  • Design reference webpage implementation know-how

When to use CSS GRID?

How would you style a design like the one below?

You'll probably use float or flex to place elements. If the elements are aligned horizontally and vertically to fit a 12-column grid, such as in the design, it would be efficient to place them using float or flex.

How about a design like this?


The above design is not easy to arrange using float or flex. It is also difficult to process all elements as absolute. If you do so, it will be difficult to maintain later, and if you implement it responsively, it will become a site that is even more difficult to maintain.

When implementing a design like the example above, you must use CSS GRID to set up a grid as shown below and place elements on the set grid.


Key Learning Contents

Learn the various properties of CSS Grid.

  1. Grid Basic

  2. Fraction


  3. Positioning - Using line numbers

  4. Positioning - Using grid cell names


  5. auto-fit, min-max functions


    Learn how to place as many elements as possible within the width of a container.

  6. Automatic row placement
    Rows that do not specify a separate height can have their row height set automatically if there is not enough space.

  7. Place by grid line name


  8. New properties available only in Grid
    A property similar to flex's align-items can be used not only on the cross axis but also on the main axis.

  9. FLEX properties available in Grid
    You can also use various flex properties on elements that have display:grid applied.

  10. Automatically place rows - auto-fit, auto-fill
    Learn how to place as many columns as possible and deal with the remaining space.



  11. Implementing a website - article layout
    Let's implement a simple web page using the learned grid properties.



  12. Using Grid and Flex
    Learn how to style web pages using CSS grid and flex.


Learn how to implement a design reference website.

Identifying the design and creating elements

Make sure your design is organized in groups and layers in a coding-friendly way, and that your styles and variables are reflected in your design. Save the images you need according to the situation.

Writing HTML by Section

Create a large section of HTML by referencing the group name, and write appropriate HTML tags that match the content's characteristics by referring to the detailed design. At this time, write in compliance with search engine optimization, web standards, etc.

Set up the entire GRID layout

Add guides to align elements to make it easier to see the width of rows and columns.

Writing CSS by section

Write CSS by section, separated by comments.

Implementing a slideshow using the library

Move the slides using buttons or implement automatic slides using the jQuery library.

Using the Slide Library

We provide a PDF summary of the key points.

Provides descriptions and practice example files for all properties of flex.


Provides a starting example.

The 01_grid folder provides example files for the core grid properties. You can learn them by watching the lecture.


Provides a completed example.

We provide the source code for the completed version. Compare it with the example you completed in class.


I recommend the following lectures:

Javascript Basics

Learn the basics of pure JavaScript with practical examples.

jQuery Basic

Learn jQuery basics, practical examples, and how to use major libraries.

Recommended for
these people

Who is this course right for?

  • For those who have a basic understanding of HTML and CSS but struggle with layout design

  • For those who find it difficult to implement design drafts into code

  • For those who want to build a well-organized UI using CSS Grid

  • For those who want to transition from the existing float and flexbox methods to efficient layout management

  • For those who want to create their own clean and modern website

  • Those who want to gain practical experience through projects

Need to know before starting?

  • Basic HTML

  • CSS Basics

Hello
This is

2,553

Learners

50

Reviews

3

Answers

4.9

Rating

10

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

24 lectures ∙ (4hr 51min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

2 reviews

5.0

2 reviews

  • tomomo님의 프로필 이미지
    tomomo

    Reviews 7

    Average Rating 5.0

    5

    100% enrolled

    Thank you for the great lecture.

    • jinimini님의 프로필 이미지
      jinimini

      Reviews 4

      Average Rating 4.8

      5

      33% enrolled

      $22.00

      ezweb's other courses

      Check out other courses by the instructor!

      Similar courses

      Explore other courses in the same field!