강의

멘토링

로드맵

BEST
Programming

/

Web Development

SCSS(SASS)+FLEX Practical Responsive Web Project with Figma

Master the practical use of SCSS (SASS) and FLEX Layout! This is a systematic responsive website project creation process that designs the main page and key sub-page UI of the entire website with Figma, creates an HTML wireframe structure with consistent class names, and completes publishing. In the course, which lasts more than 41 hours in total, you will learn the core theory and practical application skills and design and create PC-mobile-tablet responsive layouts, which will greatly improve your experience and know-how with responsive web projects as well as your core jQuery theory and practical application skills.

(4.9) 22 reviews

314 learners

  • codingworks
실습 중심
웹퍼블리싱
HTML/CSS
Sass
scss
JavaScript
jQuery

Reviews from Early Learners

What you will learn!

  • Systematic Responsive Website Project Creation Process

  • SCSS (SASS) Core Theory and Practical Application Skills

  • FLEX Layout Core Theory and Practical Application Skills

  • Responsive layout design and production compatible with PC, mobile, and tablet

  • Core theory and practical application skills of jQuery for creating responsive web projects

  • Website UI Design Skills Created with Figma

  • Systematic HTML wireframe structure and class name design capabilities

  • The best responsive web portfolio builder for web publishers and developers

Looking for an overwhelming portfolio for web publishers and developers?
SCSS(SASS)+FLEX responsive online lecture site project!

"SCSS(SASS)+FLEX Practical Responsive Web Project with Figma Lecture
"Complete the ability to create a systematic responsive website project"
"A massive learning volume of over 41 hours"

Since it is a somewhat unfamiliar SCSS (SASS) publishing task, it may be a bit burdensome for beginners , but beginners can complete it if they follow it sequentially by section.

Perfectly utilize SCSS (SASS) and FLEX in practice!

Point 1. Create SCSS (SASS) + FLEX website UI design with Figma
Point 2. SCSS(SASS)+FLEX website HTML wireframe Detailed production of all pages
Point 3. Create a variety of web page publishing using SCSS (SASS) + FLEX
Point 4. Design, production, and perfect publishing of responsive layouts for PC, mobile, and tablets
Point 5. Ability to utilize core jQuery theories and practices for creating responsive web projects

Coding Works contains the intermediate and advanced publishing production know-how that has been taught in numerous offline academies and personal portfolio homepage production courses. In particular, since it is a responsive web publishing project based on SCSS (SASS) + FLEX, you can maximize your SCSS (SASS) + FLEX capabilities.
I am confident that after completing this course you will have advanced intermediate to advanced responsive web publishing skills!

SCSS Core Theory Video Update (5 hours 9 minutes)

For smooth SCSS(SASS)+FLEX practical responsive web project publishing work, we have updated the SCSS Essential Theory. The SCSS Essential Theory video covers almost all the theories of SCSS over 5 hours and 9 minutes, so you can learn the SCSS Essential Theory in depth.

You do not need to learn all the videos added for publishing work from Section 5. The essential theory videos for publishing work from Section 5 are as follows, so learning only these will not hinder publishing work at all.

1. SCSS Core Theory (01) - Selector Nesting

2. SCSS Core Theory (02) - Parent Selector Reference (&) and Comment Processing

3. SCSS Core Theory (03) - Application of Parent Selector Reference (&)

4. SCSS Core Theory (04) – Creating representative CSS selectors in SCSS

5. SCSS Core Theory (05) - Parent Selector Reference (&) Virtual Class

6. SCSS Core Theory (06) - Parent Selector Reference (&) Attribute Selector

7. SCSS Core Theory (07) - Exiting Parent Selector Nesting @at-root

10. SCSS Core Theory (10-1) - Variables 01

11. SCSS Core Theory (10-2) - Variables 02

13. SCSS Core Theory (11-1) - Importing External Files @import

※ You can watch the remaining videos later if you need to learn SCSS in more depth.

============================================================================

▼ Added sections and full theory video content (2023.07.06)

Section 4. SCSS Essential Theory

  1. SCSS Core Theory (01) - Selector Nesting

  2. SCSS Core Theory (02) - Parent Selector Reference (&) and Comment Processing

  3. SCSS Core Theory (03) - Application of Parent Selector Reference (&)

  4. SCSS Core Theory (04) – Creating representative CSS selectors in SCSS

  5. SCSS Core Theory (05) - Parent Selector Reference (&) Virtual Class

  6. SCSS Core Theory (06) - Parent Selector Reference (&) Attribute Selector

  7. SCSS Core Theory (07) - Exiting Parent Selector Nesting @at-root

  8. SCSS Core Theory (08) – Automatically generating CSS properties using prefixes

  9. SCSS Core Theory (09) – Reducing Selector Duplication with Virtual Class :is

  10. SCSS Core Theory (10-1) - Variables 01

  11. SCSS Core Theory (10-2) - Variables 02

  12. SCSS Core Theory (10-3) - Variable Scope and CSS Variable Declaration

  13. SCSS Core Theory (11-1) - Importing External Files @import

  14. SCSS Core Theory (11-2) - Importing Partial Files with @import

  15. SCSS Core Theory (12) - Operators, Removing the Output Window

  16. SCSS Core Theory (13-1) - Declaring a group @mixin, using a group @include

  17. SCSS Core Theory (13-2) - Applying @mixin and @include

  18. SCSS Core Theory (13-3) - Button Design Using @mixin and @include

  19. SCSS Core Theory (13-4) - Using @mixin's parameters (arguments) with @include

  20. SCSS Core Theory (14) - @extend to get selector properties

  21. SCSS Core Theory (15) - Placeholder Selector % used with @extend

  22. SCSS Core Theory (16) - Declaring multiple variables, built-in functions (map-get)

Lecture Open Commemorative Course Review Event 😋

We provide the SCSS(SASS)+FLEX core theory PDF textbook and usage example files only to those who write a course review for the course. The PDF textbook and files provided are It will be a good reference for publishing work and future practical work.

For the course review, students can write an honest review of the course they took. After writing the course review, take a screenshot of the review and send it to the email below. We will send you the [SCSS(SASS)+FLEX core theory and usage example file] by email.

The course review event will be held for a limited time, during the 4-week discount period for the course opening.
※ The course review event will be held without a time limit, so you can write a course review at any time.

■ Period: 4 weeks (July 1, 2023 - July 28, 2023)
■ Target: All those who wrote a review of the course
■ Email: webnlife@naver.com

🚩Provided files

- SCSS (SASS) core theory textbook (PDF, 67 pages) and examples of using the completed version
- FLEX core theory textbook (PDF, 36 pages) and examples of using the completed version

※ The completed version of the usage example is a completed version of all the examples that appear in the textbook.
※ SCSS(SASS)+FLEX core theory textbook and detailed introduction to provided files: https://inf.run/qzdx
※ GRID core theory textbook and usage examples are not included.
※ If you send us an email confirming your course review, the provided files will be sent within 24 hours.

SCSS (SASS) usage skills are preferred and required 👍

In the past or present, when looking at job postings for web publishers and front-end developers in large companies, the ability to use SCSS (SASS) is always treated as a ' preferred factor ' in hiring. Preferred factor means that it is not a mandatory qualification, but if you know how to do it, you will be given more preferential treatment. In other words, it means that you have a high competitiveness compared to other applicants.

🔥 As a publisher or developer, it is not enough to just say that you have SCSS(SASS) skills in your application and interview . There are many applicants who have only heard of SCSS(SASS) or used it briefly, but say that they know how to do it during the interview. People do not believe that you have publishing skills or development skills that are only talked about. However , if you can show a responsive web project that you actually created using SCSS(SASS), it will be the best way to prove your SCSS(SASS) skills, and you will naturally be given preferential treatment in the hiring process.

Last year, most job postings listed SCSS (SASS) skills as a preference for web publishers. There weren't many cases where developers were required to use SCSS (SASS). However, after preparing to open a lecture recently, I looked at job postings and saw that SCSS (SASS) skills were often listed as a requirement for web publishers or as a preference or qualification for developers. In particular, many places require Figma skills for web publishers.

Actual job postings for web publishers and web developers recently searched on Job Korea


Create your own virtual lecture site
Make sure to improve your skills.

💡 Through the [SCSS(SASS)+FLEX Practical Responsive Web Project with Figma] course, you can improve your SCSS(SASS) core theory and practical application skills, FLEX Layout core theory and practical application skills, and PC, mobile, and tablet responsive layout design and production skills to an intermediate to advanced level.

Coding Works is creating a virtual online lecture website called 'Beyond Insight' . You can think of it as similar to Inflearn or Class 101. It is a responsive website creation project for intermediate and advanced skill improvement, where various pages and various layouts are coded with SCSS (SASS) from the main page to the subpage as a project concept, and all layouts are created with FLEX layout.

  • A systematic process for creating a responsive website project
  • SCSS(SASS) core theory and practical application skills
  • FLEX Layout core theory and practical application skills
  • Responsive layout design and production for PC, mobile, and tablet
  • jQuery core theory and practical application skills for creating responsive web projects
  • Website UI design skills using Figma
  • Ability to design systematic HTML wireframe structure and class names
  • Perfect learning of essential jQuery interactions that are needed in practice!
  • All production sources provided (Figma design files, publishing source files, lecture material PDF, published finished version)

Just being able to do SCSS (SASS) will give you a competitive edge in publisher employment and job changes. However, if you use SCSS (SASS) to create a great responsive website project, I am sure that your ability and results will give you a greater competitive edge than anyone else in employment and job changes. Of course, it is a class content close to an intermediate-level and the amount is not easy, but if you follow it well , I think you will achieve greater results than any other lecture at Coding Works.

The responsive web project we are creating in this lecture is not simply creating a main page. It is the most important page of the entire website, the front page, the lecture introduction page, the category main page, the course registration basket page, and the member registration page, a total of 5 pages. This is a lecture where responsive publishing work is performed by changing all pages to PC, Mobile, and Tablet layouts. In addition, you will learn various jQuery interactions and create various modals.


Responsive Web Project Lecture Learning Order 🙆‍♀️

  • Step 01. Responsive Website PC Layout Figma UI Design
  • Step 02. Designing HTML wireframe structure with class names in Figma
  • Step 03. HTML Coding with a Text Editor
  • Step 04. Coding SASS (SCSS) with a text editor along with jQuery interaction
  • Step 05. Publishing that changes the PC layout to a mobile layout
  • Step 06. Publishing that changes the PC layout to a tablet layout
  • Step 07. Final finishing work on detailed publishing of all web pages

1) Create a practical responsive web project UI design using SCSS (SASS) + FLEX with Figma

2) Creating a real-life responsive web project HTML wireframe structure using SCSS (SASS) + FLEX with Figma

3) HTML coding using a text editor based on the HTML wireframe structure

4) SCSS (SASS) coding using a text editor based on the HTML wireframe structure

5) Change to a mobile responsive web layout

6) Change to a tablet-friendly responsive web layout

7) Final finishing touches on jQuery interaction and detailed publishing for all web pages

▼ Detailed finishing work on various types of real device mockups

Preview of the finished version of the publication & definition of features 🙆‍♀️

The web pages produced in this lecture are the front page, lecture introduction page, category main page, course registration basket page, and member registration page. This is a lecture that carries out responsive publishing work that changes all pages to PC, mobile, and tablet layouts . In addition, various modals are produced.

If you watch the [Publishing Complete Preview & Function Definition] video in the section below, you will see a detailed explanation of what is being created in the corresponding lecture and the publishing function definition. And you can see the table of contents of the lecture contents as an image in [Full Curriculum] .

▼ SCSS(SASS)+FLEX Practical Responsive Web Project: Front Page

🚩 Front Page

  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • Shows the identity of the website to the user as the first page of the website.
  • How to manage complex HTML structures and create well-organized hierarchies (Clean Coding)
  • Branch the script that operates PC & Tablet layout navigation and Mobile navigation with if conditions
  • Use a script to fix the header to the top when scrolling a certain amount
  • Show mentor application and event modal on front page
  • Create the main slider and the lecture item slider with slick sliders
  • Working with jQuery components for Header & Footer that all pages have in common
  • Using the countdown timer plugin
  • Convert footer navigation to drop-down accordion when in mobile layout
  • Inserting a font icon into a search form element and using :focus ::placeholder
  • Using Unicode font icons with virtual classes :before and :after
  • How to use SVG images
  • How to use the CSS property Object-fit in practice
  • Essential jQuery interaction methods (class control, element selection, event handlers, etc.)
  • How to use essential inline JavaScript
  • How to reuse the lecture item card UI in various forms (@at-root)
  • How to use and utilize font icons (Bootstrap Icons)
  • Change responsive layout by media query breakpoint (min 1024, 768~1024, max 767)

▼ SCSS(SASS)+FLEX Practical Responsive Web Project: Lecture Introduction Page (Class Detail)

🚩 Class Introduction Page (Class Detail)

  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • The lecture introduction page is the page with the most content and therefore has the most published work.
  • Scroll down the lecture introduction right sidebar and fix it
  • Scroll down to pin the lecture details sub-navigation schedule
  • Click the Share button on the sidebar and then open the Share modal
  • Introduction to Curriculum jQuery Accordion
  • Frequently Asked Questions jQuery Accordion
  • Course Review Rating Bar CSS Design
  • Color built-in function
  • Change responsive layout by media query breakpoint (min 1024, 768~1024, max 767)

▼ SCSS(SASS)+FLEX Practical Responsive Web Project: Category Main Page

🚩 Category Main Page

  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • Class Lecture List Slick Slider
  • Paging CSS Design
  • Change responsive layout by media query breakpoint (min 1024, 768~1024, max 767)

▼ SCSS(SASS)+FLEX Practical Responsive Web Project: Take Course

🚩 Take Course

  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • Deleting and deleting all items in the shopping cart using jQuery
  • Various CSS3 properties (accent-color)
  • Change responsive layout by media query breakpoint (min 1024, 768~1024, max 767)

▼ SCSS(SASS)+FLEX Practical Responsive Web Project: Member Registration Page (Member Register)

🚩 Membership registration page (Member Register)

  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • Detailed learning about the features and properties of HTML Form elements.
  • Utilizing form element pseudo-classes (:focus ::placeholder)
  • :is pseudo-class to effectively clean up duplicate selectors
  • Create pretty checkboxes and radio buttons with custom checkboxes
  • Script to set password view/hide

▼ SCSS(SASS)+FLEX Practical Responsive Web Project: Login Modal

🚩 Login Modal

  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • Detailed learning about the features and properties of HTML Form elements.
  • Utilizing form element pseudo-classes (:focus ::placeholder)
  • :is pseudo-class to effectively clean up duplicate selectors
  • Create pretty checkboxes and radio buttons with custom checkboxes
  • Script to set password view/hide
  • Using @mixin @include

🚩 Share Modal, Check Cart Modal

  • Figma UI design and HTML wireframe structure creation
  • Figma UI design and HTML wireframe structure creation
  • Full publishing production with SCSS (SASS) and FLEX layout
  • Creating shapes with virtual classes :before :after
  • Check class cart modal Automatically close after 4 seconds with setTimeout

Provides various files 🗂️

📝 [SCSS(SASS)+FLEX Practical Responsive Web Project with Figma] All Complete Versions

Section 7 provides a complete design and publishing version along with all source files for creating the lecture. In addition, a PPT file for explaining the core theory and important points in the lecture is provided in PDF format.

  • [Download] Design Work (Beyond Insight)
  • [Download] HTML Wireframe Structure (Beyond Insight)
  • [Download] Publishing Work (Beyond Insight)
  • [Lecture Notes PDF] SCSS(SASS)+FLEX Practical Responsive Web Project with Figma

📝 Provide PDF of PPT lecture materials used in video lectures

  • Provides a variety of reference materials for design and publishing work.
  • [Lecture Notes] SCSS(SASS)+FLEX Practical Responsive Web Project with Figma (Total 39 Pages)

SCSS(SASS)+FLEX Clean Coding Standard 🧽

[SCSS(SASS)+FLEX Practical Responsive Web Project with Figma] I think that while taking this course, you will develop your skills in many ways, such as Figma UI design skills, HTML wireframe creation skills, and SCSS(SASS) + FLEX Layout usage skills for publishing. These areas are very important, but the most important thing you will learn is the ' Clean Coding Principles for Publishing Like an Experienced Person '. All publishing in the course is written under these principles.

In particular, this lecture frequently emphasizes the need to code SCSS (SASS) sequentially according to the hierarchy. In the case of SCSS (SASS), the selector hierarchy is much more important than in general CSS.

<The Essentials of Clean Coding for Publishing Like an Expert> includes inserting necessary comments where necessary, coding CSS selectors in the right order to match the order they appear in HTML, and organizing common CSS selectors in Common CSS for later maintenance... If you learn these coding principles and habits, they will be of great help in practice.

In particular, when applying for a job, the HR manager or someone similar to him/her will look at the applicant's publishing results and source code. In this case, just by looking at the source code for a moment, he/she can judge the applicant's publishing fundamentals.

💡 What is the special attraction point of this lecture?

  • You can acquire the ability to create responsive web UI through practical production using Figma.
  • Learn detailed HTML wireframe writing techniques that will dramatically improve your publishing skills.
  • Learn the fundamentals of clean coding to publish like a publishing professional.
  • Create a variety of pages and layouts, understandable explanations, and explain concepts in depth.
  • Explains everything students need to know for responsive web publishing.
  • You will learn in-depth understanding and utilization of SCSS (SASS) and FLEX.
  • You will learn SCSS (SASS) coding in a sequential and systematic way according to the hierarchical structure.
  • You will learn FLEX with confidence by understanding and applying FLEX layouts in practice.
  • Best portfolio for publisher employment and career change, SCSS (SASS) responsive web project possession

Things to note before taking the class 📢

🌈 Practice environment (text editor)

  • The text editor is built with Visual Studio Code .
  • You can use other text editors such as Blanket, Sublime, etc., but your text editor must support the Live Sass Complier as an extension to follow the course.
  • For SCSS(SASS) coding, you must use Live Sass Complier, an extension of Visual Studio Code. For this lecture, you must use Visual Studio Code to use Live Sass Complier.

Download study materials

All study materials can be found in the sections below. They are provided as compressed files in a folder format, so after downloading, unzip them and follow the lectures in order.

💡 How to use the download file and folder contents

① Materials required for design work and publishing work
② Materials needed when starting design work
③ Publishing completed version materials

💡 Publishing work text editor <Visual Studio Code>

This lecture This lecture was created using Visual Studio Code . Visual Studio Code is a free program with no usage restrictions. All lecture videos are explained based on Visual Studio Code.

Please learn the basic usage first through the Coding Works YouTube video below, and then study <Section 3. Mobile Web Detailed Publishing (HTML+CSS+JS)>.

Download Visual Studio Code (click)

  • ✅ There is no video on YouTube showing how to install the Live Sass Compilier Extension, but you must install it.
  • ✅ Before publishing, be sure to learn how to install and use the Live Sass Compiler extension in the section below.


Q&A 💬

If you have any questions other than the ones listed below, please leave them on the Q&A board of the relevant lecture community and we will do our best to answer them.

Q. I have never studied SCSS (SASS) and FLEX before. Will I be able to follow the class?

🔊 FLEX Pre-Learning
FLEX is such a common topic that if you search for flex layout or CSS Flex on YouTube, you will find many videos that summarize the theory of Flex in 20-30 minutes. If you watch one or two of these videos and practice, your prior knowledge of Flex will be sufficient. Flex layout does not have as much theoretical content as you might think.

🔊 SCSS(SASS) pre-learning
There is no need to study SCSS (SASS) pre-learning without studying Section 4. SCSS Essential Theory included in the lecture.

Q. How much publishing knowledge is required?

If you have basic experience using HTML+CSS, you can follow along and get the results and skills you expect. However, it may be burdensome for those whose CSS skills are at a very basic level. Even if you have some CSS skills, you can follow along.

And for those who are new to SCSS (SASS), there is a more than 5-hour theory class in Section 4. SCSS Essential Theory, so if you study Section 4 and follow Sections 5 to 7 well, you can complete the project.

Q. There are already two SCSS (SASS) lectures in Coding Works. How is it different from the current lecture?

Yes. Among the existing Coding Works lectures class There are two lectures.

< SCSS(SASS)+FLEX Practical Responsive Web Project with Figma > is a video lecture that studies the core theory and practical application of SCSS(SASS). However, unlike this course, it is not a course that creates an entire website with SCSS(SASS), so it is a lecture with a less difficult burden from the student's perspective. Therefore, it is a suitable lecture for those who are new to SCSS(SASS) to gain experience with SCSS(SASS) and create practical examples using SCSS(SASS).

This lecture is not a video lecture, but a lecture that provides textbooks and practical example files. As a publisher, it would be helpful to have it for reference.

You can take this SCSS(SASS)+FLEX responsive web project course without going through the above two processes. However, you should have some CSS skills.

Q. I have no experience using graphic programs. Can I design in Figma?

As mentioned in the introduction video, Figma has a very good performance for the effort. If you can handle PowerPoint to a minimum, you can follow the Figma design class. However, in order to better understand the class, I recommend that you watch the video <[Must Read] SCSS(SASS)+FLEX Practical Responsive Web Project Figma Basic Course (ft. Dual Monitor Usage)> and do some pre-study through the YouTube channel introduced.

Q. What is the core content that differentiates you ?

This is a design lecture at a level where even someone with no prior knowledge can make good use of Figma, rather than a design expert. So, the Figma design work class <Section 1. SCSS (SASS) + FLEX Responsive Web Project UI Design Production with Figma> is at a level that can be easily accepted by someone who is just starting out with Figma rather than a class for experts.
However , the <Section 2. SCSS(SASS)+FLEX Responsive Web Project HTML Wireframe with Figma> class is taught by an instructor who has been teaching publishing for a long time, and it is the most reliable and systematic way to improve publishing skills. And I think the key is that the class was created to help you gradually achieve high-level results from the unfamiliar and difficult task of mobile web publishing.

In particular , Section 4, which covers SCSS (SASS) responsive web projects, covers SCSS essential theory for more than 5 hours, so you can learn SCSS essential theory perfectly.

I think you'll gain intermediate to advanced publishing skills by creating various layout HTML structures for various pages and publishing them.

Q. Is this a course that non-design majors can also take?

It is possible. I have a major that has nothing to do with design. As shown in the video <[Must Read] SCSS(SASS)+FLEX Practical Responsive Web Project Figma Basics Course> in Section 1, if you are good at handling PowerPoint, you will have no trouble learning and utilizing Figma. I also studied for a short period of time for the Figma course, but I was able to obtain good design results.

Q. I am a designer and I am good at Figma. Do I need to learn Figma Design in Section 1?

As I mentioned in the introduction video, I am not someone who has been using Figma for a long time or is good at it. So if you are confident in working with Figma, you can skip <Section 1. SCSS(SASS)+FLEX Responsive Web Project UI Design with Figma> and go straight to <Section 2. SCSS(SASS)+FLEX Responsive Web Project HTML Wireframe with Figma> to learn.

Starting with Creating an HTML Wireframe Structure in Section 2, this is a publishing lecture, not a design lecture.

Q. Why should I learn the SCSS (SASS) + FLEX responsive web project creation process and what are the specific expected results ?

Through the [SCSS(SASS)+FLEX Practical Responsive Web Project with Figma] lecture, you can improve your SCSS(SASS) core theory and practical application skills, FLEX Layout core theory and practical application skills, and PC, mobile, and tablet responsive layout design and production skills to an intermediate to advanced level.

The specific expected effects are actually different for each person. However, what Coding Works can tell you for sure is that ' the ability to create HTML wireframe structures will be greatly improved . ' While creating various HTML wireframe structures, you will receive sufficient training on how to systematically organize complex HTML hierarchies. In addition, we will teach you in detail how to name and share consistent class names.

<Section 2. SCSS(SASS)+FLEX Responsive Web Project HTML Wireframe with Figma> trains you to create various HTML wireframe structures and <Sections 5-7. SCSS(SASS)+FLEX Responsive Web Project Detailed Publishing> trains you to apply practical web publishing , so you will gain confidence in creating various web UI layouts in the future.

Q. What level of content is covered in the class?

SCSS(SASS)+FLEX responsive web projects have a large number of files and folders due to their nature. Therefore, a lot of content is covered quickly. The level to which this is appropriate varies depending on the individual's standards, but this is a class that covers enough content for a publisher's personal portfolio.

The SCSS(SASS)+FLEX responsive web project course is at an intermediate level, but you can think of it as closer to intermediate. In other words, it covers a lot of content. It may be burdensome for beginners, but I think you will feel that your publishing ability has improved considerably after completing the course .

Q. I took Coding Works' <Mobile Web Publishing Portfolio with Figma> course.

If you have taken the Mobile Web Publishing Portfolio with Figma course, you do not necessarily need to learn [Section 1. Creating a SCSS (SASS) + FLEX Responsive Web Project UI Design with Figma Design] . (If possible, we recommend creating it quickly.)

You can start learning from [ Section 2. SCSS(SASS)+FLEX Responsive Web Project HTML Wireframe with Figma] .

Q. How long is the total lecture time?

The entire video lecture time is over 41 hours, which is enough class time for in-depth learning. The entire class ratio is 15% Figma design work and 85% publishing work. Section 1 of the entire video is Figma UI design work, and the remaining sections are responsive web publishing learning areas.

  • Section 1. SCSS(SASS)+FLEX Responsive Web Project UI Design Creation - 6 hours 37 minutes
  • Section 2. SCSS(SASS)+FLEX Responsive Web Project HTML Wireframe - 5 hours 21 minutes
  • Section 3. Setting up and using Live Sass Compiler in Visual Studio Code - 1 hour 15 minutes
  • Section 4. SCSS Essential Theory - 5 hours 9 minutes
  • Section 5. SCSS(SASS)+FLEX Responsive Web Project for PC Layout - 15 hours 44 minutes
  • Section 6. SCSS(SASS)+FLEX Responsive Web Project for Responsive Layout - 3 hours 35 minutes
  • Section 7. [Final Finishing] SCSS(SASS)+FLEX Responsive Web Project - 2 hours 53 minutes

Q. Are there any notes regarding taking the course (environment required, other things to keep in mind, etc.)?

The class content is extensive and progresses quickly. However, it does not go without sufficient explanation, but explains in detail. I think you will follow along well. However, I strongly recommend that you have a dual monitor environment rather than learning with a single monitor . Please make sure to watch the video [Must-read] SCSS (SASS) + FLEX Practical Responsive Web Project Figma Basics Course (ft. Dual Monitor Usage) in Section 1 before registering for the course.


Introducing the knowledge sharer ✒️

[SCSS(SASS)+FLEX Practical Responsive Web Project with Figma] Coding Works , which created the course , has taught publishing theory, application, and personal portfolio homepage creation to over 300 students in the national publishing course. In particular, the instructor has specialized in publishing lectures for several years, perfectly guiding all the preparation processes for publisher employment from A to Z, so that most students can get jobs right after the course ends. He has also received positive reviews from Inflearn students for his publishing-related lectures.

🙋🏻‍♂️ 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 , the creator of the [HTML+CSS+JS Practical Portfolio (Season 3)] course , has taught publishing theory, application, and personal portfolio homepage creation to over 300 national publishing course students. In particular, the instructor has specialized in publishing lectures for several years, perfectly guiding all preparation processes for publisher employment from A to Z, so that most students can get jobs right after completing the course. In addition, he has been receiving positive reviews from Inflearn students for being very helpful in his publishing-related lectures.

Recommended for
these people

Who is this course right for?

  • Those who need SCSS (SASS) core theory and practical application skills

  • Those who need a portfolio of systematic responsive website project creation

  • Front-end developers who want to know the essence of publishing

  • If you need the most competitive responsive web project as a publisher

  • Those who want to be competitive in their resume with their ability to use SCSS (SASS)

Need to know before starting?

  • Basic HTML+CSS skills or higher

Hello
This is

12,605

Learners

743

Reviews

2,113

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

125 lectures ∙ (41hr 14min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

22 reviews

4.9

22 reviews

  • ds4odk님의 프로필 이미지
    ds4odk

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    I was worried because it was my first time developing a front-end web. The tuition fee was a bit different from other courses, so I was a little worried (lol) but my choice turned out to be a godsend. (The lectures are really good!!) I have no experience in web development at all. I thought I should prepare and study in advance because I wanted to service the main program I developed on the web/mobile, so I applied for the course and took a week off to study. On the 4th day~ I was going to come out on Saturday. Anyway, on the 5th day, I finished all the lectures and tested a few things with ASP.Net Core 7 Razor page. (After taking the 15,000 won ASP.NET Core Web Application Using Razor Pages lecture on the Udemy site~lol) I was so happy that the test results were well-linked with the DB and expressed well, and I experienced a new world. I started with COBOL and FORTRAN in the past, and now I have developed desktop work with C#, VB.NET, and several other development tools. I wondered if I could adapt to the current development environment that fits the trend.. I was able to understand it easily with the detailed explanation. Thanks to this, it gave me courage and helped me a lot. SCSS / Figma (paid) / JQuery / HTML I leveled up just with the above 4 items and sample example lectures!! I have used Photoshop for nearly 20 years, but thanks to this, I think I will hardly ever use Photoshop. ㅎㅎ That was a long postscript. It is the first time I have finished 100% of a long lecture..ㅎㅎ Thank you for the great lecture, teacher. I will always pray for your good health.

    • codingworks
      Instructor

      As a practitioner, I think it will be very helpful to prospective students because it provides specific content. Thank you for your review~!!

  • pcdoomco44801님의 프로필 이미지
    pcdoomco44801

    Reviews 3

    Average Rating 5.0

    5

    83% enrolled

    One of the instructors considered to offer the most cost-effectiveness in Inflearn is Coding Works. Recently opened courses are a bit pricey because they are cutting-edge technologies, but looking at the existing content, I was impressed by the low tuition and the vast volume, so I found Coding Works and took the course. Even if you go to an offline academy, it is hard to find a class density that boasts such a vast volume, and if you look at the entire lecture structure, the content is so detailed that the lecture time exceeds 40 hours. In addition, it is a class that focuses on practical training by integrating the latest intermediate and advanced technologies of Webpub, so you can obtain results that cover all of the actual advanced technologies. Above all, the instructor's response was very impressive. I had an inquiry on Sunday, so I left two questions about the course, and they were answered right away that day. There is no reason not to recommend this course with its vast volume, the latest technology-intensive practice, and the instructor's quick feedback. I honestly think that web publishing skills are basic for front-end developers before React and View. These days, boundaries between industries are collapsing and multi-tasking is required, so those who know how to do everything can get high salaries. Those who need to be able to create what's in their heads at least as much as screen implementation, I recommend that those studying React or View take this course on their own. It's not yet complete, but the explanations are so kind and good that studying is fun^^ The vast volume means that the instructor has deep teaching skills. Even if an instructor with shallow skills is asked to organize the lecture time extensively, that won't work. I'm studying back-end, but I chose this course with the intention of improving my skills to an expert level, such as screen implementation.

    • codingworks
      Instructor

      Thank you for your detailed course review~!!

  • davyjeong7658님의 프로필 이미지
    davyjeong7658

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

  • todamsseudam4203님의 프로필 이미지
    todamsseudam4203

    Reviews 2

    Average Rating 5.0

    5

    60% enrolled

    Among the classes I've taken while doing practical work, this is the most helpful. I realize how much I've been coding in circles until now.. ^^;; I'm reflecting a lot each moment. Taking the course with a truly grateful heart!!!

  • hamham00님의 프로필 이미지
    hamham00

    Reviews 6

    Average Rating 5.0

    5

    6% enrolled

    I landed a job after taking your class two years ago, but due to financial difficulties, I'm preparing for another job search 😭😭 I haven't used SCSS yet, so I'm taking this class to study it! It's so great~! Thank you!

    • codingworks
      Instructor

      Thank you for the course review!

Limited time deal

$69.30

25%

$92.40

codingworks's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!