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.
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
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.
■ [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 디자인 및 퍼블리싱
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.