SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing

Increases publisher employment competitiveness
To improve SCSS (SASS) utilization capabilities
Systematic learning and practical examples

Same content, but easier to understand!
Only the essentials for practical use!
Coding Works lectures make this difference.

You can systematically learn SCSS(SASS) from the basics to its application. As the ability to utilize SCSS(SASS) increases competitiveness for employment as a publisher, you can also obtain practical portfolio publishing results using SCSS(SASS)+GRID+FLEX that prove your ability.

Ability to use SCSS (SASS) is also a plus for experienced publishers.
If you know how to do it, you will immediately become competitive!!

Section 1. Setting up and using the Live Sass Compiler in Visual Studio Code

You will learn in detail how to set up and use Live Sass Compiler in Visual Studio Code to use SCSS (SASS). In addition, we will provide detailed guidance on what to pay attention to in the settings, so that it can serve as a foundation for learning about core theories, examples of utilizing core theories, and practical portfolio publishing that will follow.

Section 2. SCSS Essential Theory

You will learn the core grammar of SCSS (SASS) systematically and in detail. Rather than simply teaching the grammar theory, you will practice applying the theory to HTML and SCSS and see how it is compiled into CSS, thereby solidifying your theoretical knowledge of SCSS.

Section 3. Examples of using SCSS core theory

We will introduce points to watch out for and tips (TIPs) when applying the theory while practicing how and where to apply the theoretical contents covered in the core theory through real examples. In addition, you will learn not only the core theory of SCSS but also the properties that you must know in CSS.

Section 4. SCSS+GRID+FLEX Practical Portfolio Publishing

The knowledge and skills acquired through the SCSS core theory and core theory utilization classes will be solidified through working on real publishing results, and the ability to apply them in real work will be enhanced. In particular, if you show the SCSS+GRID+FLEX real portfolio publishing work as a result called 'SCSS(SASS) Publishing Portfolio' on your personal portfolio homepage for publisher employment, I think your job competitiveness will greatly increase.

Section 5. Download the completed version and student learning materials

You can download all the completed files produced in the core theory, core theory application, and practical portfolio publishing videos. Before starting the class video, download the compressed file, make the folder the parent folder, and follow the video. And if there is any reference material for students, it will be updated as needed.

• [Finished Version] SCSS Essential Theory
• [Complete version] Examples of using SCSS core theories
• [Finished Version] SCSS+GRID+FLEX Practical Portfolio Publishing
• [Reference] Special Symbols for Publishing English Expressions (PDF)
• [Reference] Special Symbols for Publishing English Expressions (PDF)

The example of a job posting for a web publisher above is a job posting that a large company recently posted on a famous job search site. The qualifications section is the essential part that a web publisher must have for employment. However, if you look at the preferred qualifications, it says , “Preferential treatment for development experience using SCSS .” This literally means that if you have development experience using SCSS, you will be competitive.

It's not that new applicants can't apply just because it's a career position recruitment. There's no X-like company that will say anything about you applying. The company that you applied to makes the judgment. You might think, "Oh, this is a new recruit with good value for money." Of course, even for companies that don't list SCSS preferences, it can be competitive to have 'SCSS (SASS) capable' written in the skills section on the applicant's personal portfolio homepage. However, if you can show the SCSS (SASS) publishing results that prove your skills by actually learning SCSS (SASS), I'm sure that it will be a pretty good competitive edge for employment and job changes.

_{▲ Living animated heart used as a virtual class}

_{▲ Creating a Figma logo with GRID}

_{▲ Accordion drop-down navigation (Only SCSS, No JavaScript)}

_{▲ Accordion dropdown content (with SCSS+JQUERY)}

_{▲ Glowing CSS checkbox button (Variable, Color Function)}

_{▲ Login form design (attribute selector, Google font icon)}

_{▲ GRID Responsive Portfolio Section Layout (Blog Post Style) - Fullscreen Modal}

_{▲ GRID Responsive Portfolio Section Layout (Blog Post Style) - Responsive Layout}

_{▲ GRID Responsive Portfolio Section Layout (Project Info Style) - Fullscreen Modal/Mobile Mockup}

_{▲ GRID Responsive Portfolio Section Layout (Project Info Style) - Responsive Layout}

_{▲ Creating an iPhone Mobile Mockup with SCSS}

_{▲ Showing mobile web results using Mobile Mockup (Multi View)}

Q) What level of web coding skills are required before taking the course?

First, you need a basic understanding of HTML+CSS . For example, if you don't understand the float and position properties, it will be difficult to follow along. This lecture was created with people with basic publishing skills in mind. Please take note!

Also, prior knowledge of jQuery JavaScript is not required. Since the content is mainly about SCSS (SASS) theory and utilization, you don't have to worry about it.

Q) What text editor do you use in class?

This course was created using Visual Studio Code . Visual Studio Code is a free program with no usage restrictions. If you do not use Visual Studio Code as a text editor, we recommend using it as much as possible since the Live Sass Compiler usage and environment settings are explained based on Visual Studio Code.

_{Download Visual Studio Code (click)}

※ There are detailed videos on how to use Visual Studio Code and extensions on the Coding Works YouTube channel, so be sure to watch them!

• How to use and set up Visual Studio Code
• How to use Emmet in Visual Studio Code
• Prevent Full Reload from going up when modifying CSS in Visual Studio Code
• How to install and use the Visual Studio Code essential extension

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

Q) Where can I download the complete theory examples, the complete practice examples, and reference materials?

There are some people who ask on the Q&A board where to download the complete version. All the complete files (html, css, js, image files, etc.) and reference materials produced in the class videos can be downloaded in the section shown below.

Q) Are the images used in the example production copyrighted?

The images used in the example production are images without copyright. I searched Pixabay and FreePik and used the images needed for the example. Students, please use the attached images for the first time in the lecture video example production, but if you upload them to your personal portfolio homepage, please change the images in Pixabay and FreePik and upload them. Pixabay / FreePik

Q) Is the order of studying examples to be learned in order from the beginning?

You don't have to follow the exact order of the examples. You can study the examples you want in the section you want. The order of the sections does not go from easy to difficult. The types of examples are just different. However, since the process of creating a website prototype and a real-life responsive website require a lot of learning, we recommend that you start with them and continue to learn them all the way through.

You don't have to study Season 2 [Essential Theory] video and Season 1 [Essential Theory] video first and then move on to creating real-life examples. If you are creating a real-life example and the content from the example is in the Essential Theory video, it would be good to watch it again for learning purposes. Since it is impossible to include all the theories used in creating real-life examples in Essential Theory, please watch the real-life examples and Essential Theory together.

[TMI] There are a lot of theories that you need to know when studying publishing and creating practical examples. I would like to organize all the theoretical parts and make a video, but realistically, there are some difficult parts.. Please fill in the missing parts by watching the Season 1 and Season 2 theory videos, the theory videos on the Coding Works YouTube channel, and your own Googling.

Q) Is there a video explaining intermediate CSS theory while creating examples?

This course is not about creating a beginner publishing example. This course is about creating an intermediate publishing example. So you should have some knowledge of CSS beginner-intermediate theories. But you don't have to know them all. We will continue to repeat CSS beginner-intermediate theories while creating examples. And there is a detailed video of essential intermediate theories needed for creating examples on the [Intermediate Theory] CSS Intermediate Theory playlist on the Coding Works YouTube Publishing Channel, so it would be good to learn intermediate theories while taking this course.

Q) Where can I ask questions if I don't understand something while studying?

If you have any questions, please post a post on the [Questions & Answers] board and I will answer you as soon as I confirm, even if it is not right away. And please be as specific as possible with your questions. It is not easy to give a sufficient answer when your question is not specific. So when you ask a question, it will be much easier to answer if you attach a screenshot of the HTML, CSS, and JQUERY coding screen you are writing along with the content you are curious about .

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

If you have any questions while learning, please ask. When asking a question, you must upload the content that is not working, the code, and the browser result screen capture. In the case of code, you must upload all HTML, CSS, and JS codes so that we can give you an accurate answer. And when uploading code, it is convenient to use the Visual Studio Code Capture Extension, CodeSnap. For instructions on how to use the Visual Studio Code Capture Extension , CodeSnap, please refer to the contents of the Coding Works blog below.

■ How to use CodeSnap, the code capture extension: https://www.inflearn.com/blogs/1672

❤ 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

Section 0. [Introduction Video] SCSS(SASS)+ GRID+FLEX Portfolio Practical Publishing

• [Lecture introduction video] Practical portfolio publishing with SCSS, Flex, and Grid
• [Practical Example Production Note] SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing

Section 1. Setting up and using the Live Sass Compiler in Visual Studio Code

• Why use SCSS (SASS) and the differences between SASS and SCSS
• What are Compile and CSS Pre-processors?
• Setting up and using Live Sass Compiler in Visual Studio Code (1)
• Setting up and using Live Sass Compiler in Visual Studio Code (2)
• SCSS Reference & Tip – Eliminating Blank Lines in Compiled CSS Code
• Disable generation of map files and Vendor Prefixes in Live Sass Compiler settings

Section 2. SCSS Essential Theory

• SCSS Core Theory (01) - Selector Nesting
• SCSS Core Theory (02) - Parent Selector Reference (&) and Comment Processing
• SCSS Core Theory (03) - Application of Parent Selector Reference (&)
• SCSS Core Theory (04) – Creating representative CSS selectors in SCSS
• SCSS Core Theory (05) - Parent Selector Reference (&) Virtual Class
• SCSS Core Theory (06) - Parent Selector Reference (&) Attribute Selector
• SCSS Core Theory (07) - Exiting Parent Selector Nesting @at-root
• SCSS Core Theory (08) – Automatically generating CSS properties using prefixes
• SCSS Core Theory (09) – Reducing Selector Duplication with Virtual Class :is
• SCSS Core Theory (10-1) - Variables 01
• SCSS Core Theory (10-2) - Variables 02
• SCSS Core Theory (10-3) - Variable Scope and CSS Variable Declaration
• SCSS Core Theory (11-1) - Importing External Files @import
• SCSS Core Theory (11-2) - Importing Partial Files with @import
• SCSS Core Theory (12) - Operators, Removing the Output Window
• SCSS Core Theory (13-1) - Declaring a group @mixin, using a group @include
• SCSS Core Theory (13-2) - Applying @mixin and @include
• SCSS Core Theory (13-3) - Button Design Using @mixin and @include
• SCSS Core Theory (13-4) - Using @mixin's parameters (arguments) with @include
• SCSS Core Theory (14) - @extend to get selector properties
• SCSS Core Theory (15) - Placeholder Selector % used with @extend
• SCSS Core Theory (16) - Declaring multiple variables, built-in functions (map-get)

Section 3. Examples of using SCSS core theory

• Using the main CSS selectors and main pseudo-classes
• Linking reset.css and normalize.css with @import
• Formatting text using @mixin nesting
• Using @mixin array as parameter and returning arguments with @include
• Reuse frequently used effects with @mixin and @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
• Create a consistent HTML layout structure by referencing parent elements

Section 4. SCSS+GRID+FLEX Practical Portfolio Publishing

• Living animated heart using virtual class
• Create a Figma logo with GRID
• Accordion Dropdown Navigation (Only SCSS, No JavaScript) 01
• Accordion Dropdown Navigation (Only SCSS, No JavaScript) 02
• Accordion dropdown content (with SCSS+JQUERY)
• Shiny CSS Checkbox Google Icon Button (Variable, Color Function) 01
• Shiny CSS Checkbox Google Icon Button (Variable, Color Function) 02
• Login form design (attribute selector, Google font icon) 01
• Login form design (attribute selector, Google font icon) 02
• GRID Responsive Portfolio Section Layout (Blog Post Style) 01
• GRID Responsive Portfolio Section Layout (Blog Post Style) 02
• GRID Responsive Portfolio Section Layout (Blog Post Style) 03
• GRID Responsive Portfolio Section Layout (Blog Post Style) 04
• [Mission #01] Create separate files for Mixins and Variables and import them (Blog Post Style)
• GRID Responsive Portfolio Section Layout (Project Info Style) 01
• GRID Responsive Portfolio Section Layout (Project Info Style) 02
• GRID Responsive Portfolio Section Layout (Project Info Style) 03
• GRID Responsive Portfolio Section Layout (Project Info Style) 04
• GRID Responsive Portfolio Section Layout (Project Info Style) 05
• [Mission #02] Create individual Mixins, Map-get, and Reset files and import them (Project Info Style)
• GRID Responsive Portfolio Section Layout (Project Info Style) – Full Screen
• Creating an iPhone Mobile Mockup with SCSS 01
• Creating an iPhone Mobile Mockup with SCSS 02
• Creating an iPhone Mobile Mockup with SCSS 03
• Show mobile web results using Mobile Mockup (Multi View)

Section 5. Download the completed version and student learning materials

• [Finished Version] SCSS Essential Theory
• [Complete version] Examples of using SCSS core theories
• [Finished Version] SCSS+GRID+FLEX Practical Portfolio Publishing
• [Reference] Special Symbols for Publishing English Expressions (PDF)
• [Reference] Emmet's Major Cheat Summary (PDF)