강의

멘토링

로드맵

Programming

/

Web Development

SCSS(SASS) FLEX GRID Core Theory (PDF) Textbook and Usage Examples

SCSS(SASS) FLEX GRID Core Theory (PDF) and Usage Examples is a PDF textbook that summarizes the core theory of using SCSS(SASS), FLEX, and GRID in an easy-to-understand manner. For those aiming for intermediate to advanced publishing skills, understanding and using SCSS(SASS), FLEX, and GRID is essential. And I think it will be a great competitive advantage for publishing employment and job changes. In addition to the SCSS(SASS) FLEX GRID Core Theory (PDF), the completed theory usage examples (html, scss, css) are attached separately so that you can create applied examples using the theory after learning the theory.

(4.5) 11 reviews

196 learners

  • codingworks
3시간 만에 완강할 수 있는 강의 ⏰
HTML/CSS
Sass
Flex

Reviews from Early Learners

What you will learn!

  • SCSS (SASS) Essential Core Theory

  • FLEX Essential Core Theory

  • GRID Essential Core Theory

  • CSS(SASS) FLEX GRID Core Theory (PDF) Completed example using the theory

Web publishing taken to the next level!
Let's summarize the key points with Coding Works.

SCSS(SASS) + FLEX + GRID?

To have intermediate to advanced level publishing skills
You must be familiar with SASS + FLEX + GRID.

💡 This is a downloadable textbook (PDF) content, not a video content.

  • SCSS(SASS) Core Theory(PDF) and Usage Examples
  • FLEX Core Theory (PDF) and Usage Examples
  • GRID Core Theory (PDF) and Utilization Examples
  • Download PDF textbook and example files for the core theory book for intermediate to advanced publishing skills
  • High-quality PDF textbooks that are as good as printed books

💡 SCSS(SASS) FLEX GRID Core Theory(PDF) Lecture Content Composition

  • SCSS(SASS) Core Theory (Variables, Nesting, @minxin, Conditional Statements) - Page 67
  • FLEX Core Theory (Parent Element Child Element Usage Attributes) - Page 36
  • GRID Core Theory (alignment, grid template, repeat, minmax) - 66 pages
  • GRID practical examples (Holly Grail layout, media queries) - 19 pages
  • SCSS+FLEX+GRID Utilization Example HTML File - 233
  • Total download file size 27 MB

💡 Advantages of the SCSS(SASS) FLEX GRID Core Theory(PDF) textbook

  • Because only the core content is created in PDF format, learning is much more efficient than with a paper book.
  • There are few books on the market that cover SCSS (SASS), FLEX, and GRID theories.
  • Because Coding Works created all the lecture sources directly, they were explained in an easy-to-understand manner.


📚 SCSS(SASS) Core Theory Textbook (PDF) Class Contents

Chapter 01) Introduction and setting up SCSS (SASS)

  • Why use SCSS (SASS) and the differences between SASS and SCSS [See video]
  • What is Compile and CSS Preprocessor? [See video]
  • Setting up SCSS Live HTML Preview with Visual Studio Code [Video]
  • How to Use Live Sass Complier in Visual Studio Code [Video]
  • Don't generate map files in Visual Studio Code's Live Sass Compiler
  • Avoid Vendor Prefixes in Visual Studio Code's Live Sass Compiler
  • Formatting CSS in 4 Ways in Live Sass Compiler
  • Remove blank lines in compiled CSS in Live Sass Compiler

Chapter 02) SCSS Core Theory

  • Getting started with SCSS in Visual Studio Code
  • Selector Nesting & Comments
  • Nesting - Referencing the parent selector (&)
  • Duplicate Siblings Selector
  • Nesting - Special selector that refers to parent element
  • Nesting - Breaking out of nesting @at-root
  • Nesting - Using CSS property shorthand
  • Using Variables
  • Import external files with SCSS (@Import)
  • Using Operations in SCSS - Arithmetic Operators, Comparison Operators, Logical Operators
  • Declaring group reuse @mixin
  • Using declared @mixin, @include, parameters, arguments to @mixin
  • @extend to get the style of the selector
  • Placeholder selector %
  • @content block to reduce code duplication when using @mixin and @include
  • Conditional statement if
  • Multiple conditional statements @if, @else if, @else
  • @for loop
  • Loop @each
  • Data Types

Chapter 03) SCSS theory usage example

  • Adjusting padding on mobile using conditional statement @if
  • Outputting a string in the virtual class after using the conditional statement @if
  • Utilizing the main CSS selectors and main pseudo-classes
  • Linking reset.scss with @import
  • Formatting text using @mixin nesting
  • @mixin Use an Array as an argument and return the argument with @include
  • Create @mixin for frequently used effects and reuse them with @include
  • Reuse CSS design by using @extend to get specific selector CSS properties
  • Organizing CSS selectors into chain selectors with placeholder (%) selectors
  • Creating various Border Radii using parameters in @mixin
  • Creating HTML layout structure using selector nesting keyword &

Before learning SCSS (SASS) textbooks [Must-read]

Please make sure to check the following!

1) This SCSS (SASS) lecture PDF textbook is not a class written in command-line format such as Ruby.
2) All setup and practice uses VS Code and the Live Sass Compiler extension . There is no content on Ruby installation, setup, or commands.
3) It does not cover functions and built-in functions.


📚 FLEX Core Theory Textbook (PDF) Class Contents

Chapter 01) Attributes used in parent elements

  • display: flex
  • justify-content
  • align-items
  • flex-direction
  • flex-wrap
  • align-content

Chapter 02) Attributes used in child elements

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • order
  • align-self
  • Margin property used by child elements

Chapter 03) Flex application example

  • Layout (1): Use vertical center and horizontal center overlapping
  • Layout (2) - Horizontally arranging nested divs as parent and child
  • Layout (3) – Creating Top Navigation
  • Layout (4) – Semantic Tag Responsive Layout


📚 GRID Core Theory Textbook (PDF) Class Contents

Chapter 01) GRID Core Theory – Attributes used in parent elements (Container) (1)

  • [Must Read] Understanding Grid Horizontal, Vertical, and Templates
  • display: grid / display: inline-grid
  • grid-template-columns
  • grid-template-rows
  • grid-column-gap / grid-row-gap / grid-gap
  • [Must Read] Understanding Grid Alignment Properties
  • justify-items
  • align-items
  • justify-content
  • align-content

Chapter 02) GRID Core Theory – Properties used in child elements (Grid Items)

  • justify-self / align-self
  • [Must Read] Essential Concepts for Grid Properties (Line Number)
  • grid-column-start / grid-column-end / grid-column
  • grid-row-start / grid-row-end / grid-row grid-column + grid-row
  • grid-area
  • z-index
  • grid-row
  • order

Chapter 03) GRID Core Theory – Parent Element Properties + Child Element Properties

  • grid-template-areas and grid-area #01
  • grid-template-areas and grid-area and grid-row
  • grid-template-areas and grid-area #02
  • grid-template-areas and grid-area #03, #04, #05
  • Placing 9 .items in parent element #01 – Apply batch layout
  • Placing 9 .items in parent element #02 – Apply batch layout
  • Placing 9 .items in parent element #03 – Apply batch layout
  • Placing 9 .items in parent element #04 – Applying layout individually
  • Placing 9 .items in parent element #05 – Applying layout individually
  • grid-template-columns, grid-template-areas, grid-area

Chapter 04) GRID Core Theory – Attributes used in parent elements (Container) (2)

  • repeat(count, size)
  • minmax(minimum, maximum)
  • min-content automatically adjusts minimum width
  • Repeat, minmax, min-content duplication
  • If auto-fill, auto-fit is not used
  • If you use auto-fill
  • Difference between auto-fill and auto-fit
  • grid-auto-flow



💬 Must-read before studying PDF textbooks

Q. Are there only videos on how to install SCSS as video content?

This lecture is a content of the book (PDF) . The content of installing Live Sass Compiler in Visual Studio Code is described in detail in the SCSS core theory part, but since it is an unfamiliar part, this part was produced as a video to help you with the video. If you do not install Live Sass Compiler in Visual Studio Code, you will not be able to continue the following content at all, so the purpose is to make sure that you set it up with the book and video.

Q. Aren't the Flex Core Theory textbook and Grid Core Theory textbook included in different lectures?

Yes. Flex core theory textbook and Grid core theory textbook are provided to students taking the corresponding course. This SCSS(SASS) FLEX GRID core theory (PDF) is a lecture created for those who study only with the core theory textbook rather than the video. Those who have taken the Flex lecture and Grid lecture have the corresponding textbook included, so please refer to it when taking the SCSS(SASS) FLEX GRID core theory (PDF) lecture!


❤ News of passing the publisher exam for Coding Works students


▲ A student who studied under me for about 4 and a half months in a nationally funded publishing course received a KakaoTalk message saying that he got a job.


▲ I received a KakaoTalk message about the interview results for students who took the offline course on creating a personal portfolio at Coding Works (April 24, 2023).

❤ Email sent by a Coding Works student after getting a job at a publisher

 

Hello teacher :)

Teacher, I am Kim O-jeong, a student who was taking Inflearn's lectures.
I am a student who sent an email this summer asking for advice on my personal portfolio.
Do you remember?😊😊

It's nothing else than,
I'm sending this email to tell you that I successfully landed a job at a publisher with the portfolio I received advice on from you!

Even!!
The company contacted me first after seeing the portfolio I posted on Saramin, and I was interviewed via Zoom and passed!
The company matched my desired salary, and I was able to join a company where I could do only publisher work, not design or development work.

It was a company looking for an experienced publisher, and they contacted me, a new employee, and asked me why they contacted me.
He said that he looked at a lot of other people's portfolios, but he contacted me because the "Functional Definition" in my portfolio caught his eye.

I think this is all thanks to the teacher's lectures.
If I hadn't taken the teacher's class, my portfolio would have just been ordinary, but I was able to successfully get a job thanks to the great tips the teacher gave me!

Although I have never actually met him,
While creating my portfolio, I relied on it a lot, trusted it, and worked hard while watching the teacher's lectures!

I feel like my skills have improved a lot in the three months I spent listening to the teacher's lectures and creating a portfolio, more than the skills I built up while taking long classes at the academy.

I desperately wanted it,
I believed and did as the teacher said and the results were really good.

Thank you so much!

Be careful of corona
I hope to see you again with another great lecture :)


Hello teacher~ I'm Inflearn student OOO~ I found out the email address from another student's answer..😊😊

I just wanted to say thank you 😊😊

I've had a hard time taking your class and submitting my resume for about two weeks now...
I passed the interview at a company and decided to come to work.. Thank you so much..😭😭

Actually, I was worried because I'm 32 years old. I submitted a lot of resumes, but I didn't get any calls.
But this company's HR manager said that he doesn't like people who graduated from private academies 😊😊
The company I decided to join is small, but it has developers and web designers.
They said they would train them for three months and then put them into practice.
It's a bit far and the salary is low, but I'm going to study hard and try to increase my salary~ 😊😊

Thank you so much for everything. You answered my questions so well, and I am so amazed that I got a job after taking this online class.

I will continue to study and improve my skills by listening to your lectures. Fighting~!

🙋🏻‍♂️ Please read before asking questions~!!

If you have any questions while learning, please ask. When asking questions, you must upload the content that is not working, the code, and a screenshot of the browser result. In the case of code, you must upload all HTML, CSS, and JS codes so that we can give you an accurate answer.

If you only describe your problem in text without any code in your question, it will be difficult to give you an accurate answer unless it is really simple. Then, I will have no choice but to reply again saying, 'Please upload HTML, CSS, JS code and browser capture~', which will be cumbersome and take more time to find a solution.


▲ Please check the frequently asked questions in the relevant lecture community first~

For effective learning, please refer to the Coding Works Publishing YouTube channel!

Please watch the theory video lectures on the Coding Works Publishing YouTube channel in parallel. Of course, not all theory videos are on the YouTube channel, but most of the important theory videos are there. Since there are many videos, it is recommended to search for videos as in the example below.

Coding Works Publishing YouTube Channel: https://www.youtube.com/codingworks

👨🏼‍🏫 Introducing the knowledge sharer

Coding Works

■ [Current] Freelance Front-end Publisher
■ [Currently] Operating HTML+CSS+JQUERY publishing YouTube channel 'Coding Works'
■ Green Computer Academy Web Publishing Instructor
■ Jo Eun Computer Academy Web Publishing Instructor
■ Now a Computer Academy Web Publishing Instructor
■ Front-end publisher, front-end publishing specialist instructor
■ UI/UX Web Design Portfolio Lecture
■ Web Design Technician Practical Certification Course
■ Easy & Edu Front-end UI/UX design and publishing
🌏 Coding Works Publishing YouTube Channel - https://www.youtube.com/codingworks
🌏 Coding Works Inflearn Blog - https://www.inflearn.com/users/@codingworks/blogs

scss, sass, flex, grid, html, css, html/css, website, web publisher, publisher employment, website, coding, jquery, javascript, jquery, javascript, layout, interactive web, interactive web, web design, web design, portfolio, publishing, responsive web, web design technician practical exam, bootstrap, css frameworks, framework

Recommended for
these people

Who is this course right for?

  • For those who need to learn the core theory of SCSS(SASS) FLEX GRID

  • Those who aim for mid-to-high level publishing

Need to know before starting?

  • HTML+CSS Publishing Basics

Hello
This is

12,637

Learners

745

Reviews

2,114

Answers

4.9

Rating

23

Courses

■ [현재] 국비 퍼블리싱 & 프론트엔드 강사 
■ [현재] 프리랜서 프론트엔드 퍼블리셔
■ [현재] HTML+CSS+JQUERY 퍼블리싱 유튜브 채널 '코딩웍스' 운영
■ 그린 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 더조은 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 이젠 컴퓨터 아카데미 웹 퍼블리싱 강사
■ 프론트엔드 퍼블리셔, 프론트엔드 퍼블리싱 전문강사
■ UI/UX 웹 디자인 포트폴리오 강의
■ 웹디자인 기능사 실기 자격증반 강의
■ 이지앤에듀프론트엔드 UI/UX 디자인 및 퍼블리싱

 

🌏코딩웍스 인프런 강의목록 - https://www.inflearn.com/users/@codingworks
🌏인프런 코딩웍스 강의 학습 순서(학습 로드맵) - https://www.inflearn.com/blogs/2351
🌏코딩웍스 인프런 퍼블리싱 블로그 - https://www.inflearn.com/users/@codingworks/blogs
🌏코딩웍스 퍼블리싱 유튜브 채널 - https://www.youtube.com/codingworks
🟣인프런 인포커스 코딩웍스 인터뷰 보기 : https://www.inflearn.com/pages/infocus-8-20230704

Curriculum

All

13 lectures ∙ (1hr 15min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

11 reviews

4.5

11 reviews

  • ggamjige88889907님의 프로필 이미지
    ggamjige88889907

    Reviews 15

    Average Rating 5.0

    5

    100% enrolled

    • codingworks
      Instructor

      Thank you for your feedback on the course.

  • junmibubu4757님의 프로필 이미지
    junmibubu4757

    Reviews 20

    Average Rating 4.8

    5

    100% enrolled

  • teacher0061856님의 프로필 이미지
    teacher0061856

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

  • wlskek6391님의 프로필 이미지
    wlskek6391

    Reviews 2

    Average Rating 5.0

    5

    100% enrolled

    Thank you for the great lecture. It was helpful.

    • codingworks
      Instructor

      Thank you for your course review~

  • rohsoorin0822님의 프로필 이미지
    rohsoorin0822

    Reviews 2

    Average Rating 5.0

    5

    46% enrolled

    It's really fun and informative! I'm listening to this lecture at the end after listening to all the other lectures, so I hope I can learn this lecture completely and get a good job.

    • codingworks
      Instructor

      Thank you for your course review~^^

$17.60

codingworks's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!