강의

멘토링

로드맵

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

  • My Dream님의 프로필 이미지
    My Dream

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    Front Web 개발은 처음이라서 걱정을 많이 했습니다. 강의료가 다른 강좌에 비해서 다소 큰 차이가 있어 걱정을 조금 했지만(ㅎㅎㅎ) 저의 선택이 신의 한수가 되었군요. (강의를 정말 잘~ 하십니다.!! ) 웹 개발 경험이 1도 없습니다. 개발된 메인 프로그램을 웹/모바일로 서비스 해야겠다는 생각에 사전 준비 및 공부 좀 해야겠다 싶어, 강의 신청하고 휴가를 1주일 정도 내어 정~ 주행 했답니다. 4일째 되던 날~ 토 나오려고 하더군요. 암튼 5일째, 모든 강의를 끝내고 ASP.Net Core 7 Razor page 로 몇 가지 테스트 해 봤습니다. (Udemy 사이트에서 ASP.NET Core Web Application Using Razor Pages 15,000원 강의 듣고 나서~ㅎㅎ) 테스트한 결과물이 DB와 잘 연동되어 표현이 잘 되는 것에 너무 기뻐하고 신세계를 경험 했습니다. 과거 코볼, 포트란으로 시작해서 현재는 C#, VB.NET 그 외 몇 개의 개발툴로 데스크탑 실무를 개발한 구식(?) 기술로 과연 내가 현재 트렌트에 맞는 개발 환경에 적응할 수 있을까? 싶었는데.. 자세한 설명에 쉽게 이해할 수 있었습니다. 덕분에 큰 힘이 되어 용기가 생겼습니다. SCSS / 피그마(유료결재함) / J쿼리 / HTML 위 4개의 항목과 샘플 예제 강좌만으로도 레벨업!! 그동안 포토샵을 20년 가까이 사용했는데, 덕분에 포토샵 사용할 일이 거의 없을 듯싶네요. ㅎㅎ 사족이 길었네요. 긴 강의를 100% 끝낸 건 처음이라서..ㅎㅎ 훌륭한 선생님의 강의에 감사를 드립니다. 항상 건강하시길~ 기도하겠습니다.

    • 코딩웍스(Coding Works)
      Instructor

      실무자로서 구체적인 내용이라 예비 수강생한테 도움이 많이 될 것 같습니다. 수강평 감사드립니다~!!

  • pcdoomco4님의 프로필 이미지
    pcdoomco4

    Reviews 3

    Average Rating 5.0

    5

    83% enrolled

    인프런에서 가장 가성비있다 여겨지는 강사중한분이 바로 코딩웍스입니다. 최근에 개강되는건 최신기술이라 가격대가 좀있지만 기존 컨텐츠들을보면 굉장히 저렴한 수강료에 방대한 볼륨이 인상적으로 코딩웍스를 알게되었고 강의를 수강하게되었습니다. 오프라인학원을 다닌다 해도 이렇게 방대한 볼륨을 자랑하는 수업밀도는 찾아보기힘들정도로 전체강의구성을 보면 강의시간이 40시간이 넘어갈정도로 디테일이 살이있는 컨텐츠입니다. 게다가 웹퍼블의 중고급단계 최신기술을 집약해서 실제로 실습위주의 수업으로 실제 고급기술을 총망라한 결과물까지 얻어가실수있습니다. 무엇보다 강사님의 답변이 굉장히 빠른다는게 인상적이였습니다 일요일에 문의사항이있어서 강좌수강관련 질문을 2건남겼었는데 그날 바로바로 답변이 달리더군요 방대한 볼륨 최신기술집약 실습위주 강사님의 빠른 피드백등 이강좌를 추천안할이유가없네요 프론트 앤드 개발자도 리액트 뷰이전에 웹퍼블능력은 솔직히 기본이라 생각하거든요 요새 업종별로 경계선이 무너지며 멀티를 요구하는 시대인지라 이거저거 다할줄아는사람이 고액연봉의 자리에 오를수있다고 최소한 화면구현만큼 내머릿속에있는걸 스스로 만들수있어야하시는분들은 리액트나 뷰 공부하시는분들도 이강좌는 개인적으로 학습해보시길 추천드립니다. 아직 완강한건아니지만 설명을 워낙 친절하게 잘해주셔서 공부하는재미가나네요^^ 방대한 볼륨이 의미하는건 강사가 가르치는 내공이 깊다는걸 의미하거든요 내공이 얕은강사는 강의시간을 방대하게 구성하라해도 그게안되거든요 전 백앤드 공부를하고있지만 화면구현만큼 전문가수준까지 스스로 실력을 키우자란 취지로 이강의를 선택했습니다.

  • davyjeong님의 프로필 이미지
    davyjeong

    Reviews 5

    Average Rating 5.0

    5

    100% enrolled

  • todam_sseudam님의 프로필 이미지
    todam_sseudam

    Reviews 2

    Average Rating 5.0

    5

    60% enrolled

    실무 하면서 들은 수업 중에 가장 도움이 많이 되고 있습니다. 지금껏 얼마나 돌아 돌아 코딩을 한 건지.. ^^;; 순간 순간 반성도 많이 하고 있습니다. 완전 감사한 마음으로 수강중입니다!!!

  • 빼미님의 프로필 이미지
    빼미

    Reviews 6

    Average Rating 5.0

    5

    6% enrolled

    2년전 선생님 강의 듣고 취뽀했었는데 경영난으로 다시 재취업준비를 하게 되었습니다 ㅠㅠ SCSS를 아직 사용안해봤던지라 공부해보려고 듣고 있어요! 넘넘 좋아요~! 감사합니다!

Limited time deal

$89,920.00

25%

$92.40

codingworks's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!