강의

N
챌린지

멘토링

N
클립

커뮤니티

BEST
Programming

/

Front-end

Awesome Web UI Styling with Tailwind CSS

[Creating a great web UI style with Tailwind CSS] The lecture covers the most popular framework, Tailwind CSS v3.4.1, in detail for 19 hours, from theory to practical responsive websites. A long lecture does not mean it is a good lecture. However, I am confident that this lecture is a good lecture that is also long. In particular, since all the Tailwind CSS theory is covered in detail for 8 hours and 30 minutes, people who are lacking in CSS theory can learn CSS theory thoroughly. This lecture was created with a focus on Tailwind CSS styling created by developers and publishers.

(5.0) 29 reviews

306 learners

  • codingworks
css
웹퍼블리싱
강의교안
TailwindCSS
Responsive Web
HTML/CSS

Reviews from Early Learners

What you will gain after the course

  • Systematic learning and application of Tailwind CSS core theory

  • Using Flex and Grid Easily and Conveniently with Tailwind CSS

  • Tailwind Utility Classes and CSS All Properties

  • Creating practical examples using Tailwind CSS

  • A clear understanding of CSS theory with easy explanations

  • Web publishers who need Tailwind CSS skills and results

  • Introducing your resume & portfolio with Tailwind CSS Responsive Web Design

[Video Update News] Tailwind CSS v4.0 has been officially released.

On January 22, 2025, two videos related to Tailwind CSS v4.0 were updated, and the PDF textbook file was also updated. Please check the updated videos and PDF textbook file.

▼Video Update List

  • [Update] Tailwind CSS v4.0 CLI Installation and Configuration

  • [Update] Tailwind CSS v4.0 Custom Theme Preferences

▼List of textbook updates

  • [Download] Must-reads & Key Theories for Tailwind CSS

tailwindcss-content-00

Beautiful Web UI Styling with Tailwind CSS

'19 hours of rich class content and class time based on solid content and examples'

'8 hours and 30 minutes of Tailwind CSS theory lessons from experienced publishers'

'Creating practical examples to complete the theory and creating responsive web pages'

'A teaching method where you code everything yourself, rather than copying code from the official website.'

'Coding Works PDF textbook that covers everything from Tailwind CSS installation to environment settings and all theories'

CSS Frameworks Ranking in 2023

Tailwind CSS, which has been consistently popular and ranked first in satisfaction in CSS Frameworks Ranking, is the hottest CSS framework in the world these days. The most representative reason for its popularity is that it allows creative styling using utility classes, and it is also quite fast in terms of work time to create a high-quality design.

🎯 Tailwind CSS Official Website: https://tailwindcss.com/

Image Source: OSS Insight ( https://ossinsight.io/collections/css-framework/)

What is Tailwind CSS?

It is a CSS framework that aims for Utility-First, allowing you to use CSS properties quickly and efficiently by intuitively displaying them in classes.

Almost all CSS properties required for web UI styling are predefined in the form of built-in classes, so you can use them by combining the defined classes appropriately.

So, since you can style only the HTML file without looking at the CSS file separately, you can concentrate better and work faster.

  • Utility-First : Styling within your HTML code using pre-built utility classes.

  • For example, if you want to give a div a margin of 4 (1rem), padding of 2 (0.5rem), center-align the letters, and draw an underline, you can intuitively add a class name predefined by Tailwind, that is, a utility class, to the class.

    ...

  • In the existing CSS method, it was done as follows.

  • div { margin: 1rem; padding:0.5rem; text-align: center; text-decoration: underline; }

Tailwind CSS vs. Plain CSS Code Comparison

▲ Assuming that the UI above is created


▲ Code in the standard CSS style


▲ Tailwind CSS style code


Tailwind CSS style styling is...

The existing CSS method has the hassle of having to look at HTML files and CSS files interchangeably for styling, but with the Tailwind CSS method, you can style just by looking at the HTML code, as in the example code above.

Tailwind CSS has the great advantage of being faster and more focused than the traditional CSS method because it only looks at the HTML code while styling the same results.


What CodingWorks Considered as the Biggest Disadvantage of Tailwind CSS Before Preparing the Course

About a year before Coding Works prepared the Tailwind CSS course, I watched a few YouTube videos about Tailwind CSS and had two concerns as a publisher.

The first concern is good, but it's unproductive to repeatedly enter the same class names, and the HTML becomes messy. In addition, since the same class names are used repeatedly, when modifying, you can't modify them all at once, but have to modify them as many times as you used. I thought it might be a bit awkward to use in practice.

But as I began to prepare for the lecture in earnest, I thoroughly searched the official website and found that there were almost no Korean materials, so I studied more deeply by watching overseas materials and overseas YouTuber lectures. As I did, I came to think that the above worries were needless worries and that I had made hasty judgments without studying deeply. You can minimize the use of repetitive class names by using a child selector as shown below. If you modify it with the Tailwind CSS child selector method, you only need to modify the parent element of the buttons once.


The second concern was that while regular CSS can be easily reused by creating a style and simply inserting the class name where necessary, Tailwind CSS can't do that. I was worried that it would be really inconvenient when publishing in practice. In other words, I thought that I wouldn't be able to reuse styles. However , as in the example below, you can use Tailwind CSS components to reuse styles in the same way as regular CSS styles.

I was like that too, but if you only see the shortcomings of Tailwind CSS in blogs or short YouTube videos, don't ignore it like I did. If you study it a little more deeply, you will realize that it is a pretty good CSS Framework... that you can do detailed and creative CSS styling, and that the ability to use Tailwind CSS is a very good competitive edge when getting a job.

Differences from other CSS frameworks

In existing CSS frameworks such as Bootstrap or Semantic UI, it is difficult to make detailed changes and the efficiency is very low when trying to change the design. Even if you want to make simple design changes, you have to make difficult changes through developer tools. However , Tailwind CSS is designed from the beginning to allow for high-freedom web UI styling.

Soon, while traditional CSS frameworks would result in different websites looking similar, Tailwind CSS would allow for completely different website styling depending on the creator .


In short, Tailwind CSS...

'While creative styling

No.1 CSS Framework to Reduce Production Time'

Tailwind CSS has so many great advantages and charms despite some drawbacks.


😊 Advantages of Tailwind CSS

  • Rapid development can shorten development time.

  • No need to worry about class names.

  • You can work while focusing only on HTML.

  • It's good to apply a consistent design system.

  • Responsive layouts are a breeze to work with.

  • You can supplement messy HTML code by utilizing components.

  • Easy to maintain.

  • Framework independence (combined with other frameworks) ex) Bootstrap + Tailwind CSS

😞 Cons of Tailwind CSS

  • There is a learning curve that takes time and effort to reach a certain level (especially for developers).

  • There is a severe lack of learning courses produced in Korean, making it difficult to find information.


  • The same class names are used repeatedly in HTML code.
    - This part can be greatly improved by using Tailwind CSS style child & descendant selectors through lectures.

  • Until you get used to it, you'll likely be heavily reliant on the official documentation at first.

  • It is convenient and fast, but the readability of the code is greatly reduced due to the lengthy HTML code.

  • There is the hassle of having to create and compile the CLI installation environment.

Q) Is the Tailwind CSS course for developers or web publishers?

A) The course is open to both developers and web publishers. Also available are web designers and UI/UX designers with basic HTML+CSS knowledge.

  1. There is a bit of difficulty (Learning Curve) in studying Tailwind CSS theory, but the learning curve is not as high as you think. Once you get past studying Tailwind CSS theory, you will be able to create web UI practical publishing examples in no time.

  2. Tailwind CSS utilization ability and Tailwind CSS publishing results not only increase the competitiveness of developers, but also provide competitiveness to all job groups that have work that requires publishing. Tailwind CSS utilization ability makes developers more competitive because developers are not necessarily in the job group that has to publish. However, if developers are good at publishing... and can do it beautifully and quickly, they are more competitive than web publishers.

  3. I think Tailwind CSS's ability to utilize is superior to that of traditional CSS Frameworks like Bootstrap. Tailwind CSS allows for meticulous and detailed CSS design depending on the creator's ability.

After taking Tailwind CSS course, you can create results like this.


▲ Card UI Design (0) - Creating Dark Mode (ft. SVG)

▲ Card UI Design - Crew Contact List

▲ Card UI Design - Real State Price

▲ Section UI Design - Subscribe Form

tailwindcss-content-screenshot-04

▲ Section UI Design - Meet the team

tailwindcss-content-screenshot-05

▲ Section UI Design - Login Form

▲ Creating a pretty table using table and div tags (ft. Virtual class theory that checks the order)

tailwindcss-content-screenshot-06

▲ Tailwind CSS Developer and Publisher Career Resume & Portfolio Introduction Responsive Web Development

🚩 Coding Works Tailwind CSS Course Features

  • Tailwind CSS classes taught by experienced publishers

  • 19 hours of rich class content and class time based on faithful content and examples

  • In class, we will code everything from scratch without copying code from the Tailwind CSS official site.

  • Tailwind CSS covers all the theory and explains it in detail individually, then you learn while coding.

  • Tailwind CSS theory-based, diverse and beautiful web UI practical examples that will satisfy even experienced publishers

  • Tailwind CSS for Developer and Publisher Jobs and Competitiveness: Creating Responsive Web Resume (Real Learning Results)

  • CodingWorks PDF textbook that covers everything from Tailwind CSS CLI installation to environment setup and all theories

  • Creating HTML Wireframe Structure for Responsive Career Resume Publishing Lesson

  • Tailwind CSS Course designed for developers and publishers

👍 Why are class hours long?
Coding Works believes that, just like when we were teaching at a government-funded academy, there must be systematic steps to do publishing well. That is why we believe that the proportion of theory classes cannot be high. Everyone thinks theory classes are boring. However, if you create examples without understanding the theory, your skills will not improve.

👍 Direct coding method, not a code copying class
The thing you should not do when learning CSS frameworks is to copy HTML code from the official site and modify it part by part. If you do that, you will not understand the HTML structure of the CSS framework, so you will not be able to really study. Therefore, even when learning frameworks, you must type in all the codes one by one. That is how you will improve your skills.

👍 Creating HTML Wireframe Structure Lesson
Learn how to create an HTML wireframe structure for a responsive resume with real-world examples. Since Tailwind CSS rarely uses class names, you need to create a good HTML wireframe structure so you don’t make mistakes when inserting Tailwind CSS class names.

👍 Why create a responsive career resume as your final product?
At the end of every learning, there should be a final result. That way, you can feel a sense of accomplishment, and it is important to have the experience of applying the theory you have studied to real life situations. That is why we create a responsive career resume.

📖 Tailwind CSS textbook (PDF) produced by Coding Works

Tailwind CSS textbook (PDF) consists of a total of 45 pages. It is an easy-to-understand summary of the essential key points from the vast content on the Tailwind CSS official website. It contains detailed information on Tailwind CSS Styling, from initial setup to CLI installation and environment settings for real projects and HTML wireframe structures, as well as theoretical lecture content.

The official Tailwind CSS website is in English and contains a lot of content that is not absolutely necessary, so studying theories through the official Tailwind CSS website can easily lead to a loss of concentration and a loss of motivation to learn.


📖 Completed version and reference materials provided

In theory classes, we provide core topics, complete examples, and a complete responsive web version of a resume & portfolio introduction. In addition, websites that are helpful for publishing are organized and provided. Theory classes are based on the Tailwind CSS textbook (PDF) produced by Coding Works.

All materials can be downloaded from [Section 5. Download Student Reference Materials] .


Things to note before taking the class

  • We recommend using Visual Studio Code as your text editor, as Tailwind CSS IntelliSense is required.

  • If the class subject is an experienced publisher, it is okay to watch the theory class at a fast pace and then move on to creating a practical example. However, if the class subject is a developer or publisher who lacks the basics of publishing, we recommend that you study the theory class thoroughly.

  • Before the practical example class, unzip [Tailwind CSS (v3.4.1) Theory and Practical Example Complete Version] and delete all but the images folder in individual folders, then follow the class.

✅ Player Knowledge

  • You just need to know the basics of HTML+CSS.

✅ Note

  • This course does not cover installing and using Tailwind CSS in JavaScript frameworks like React or Vue.

  • Sorry, but if you ask a question related to using Tailwind CSS in a React or Vue environment, I don't know much about React or Vue environments, so I can't answer.

  • Please only ask questions related to Tailwind CSS covered in class and general CSS properties and usage.

How to use Visual Studio Code

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

Please learn the basic usage first through the Coding Works YouTube video below, and then study <Section 1. [Tailwind CSS Core Theory] Handling Basic Elements (ver 3.4.1)>.

Download Visual Studio Code from the official website (click)

  • ✅ There is no video on YouTube showing how to install the Live Sass Compilier Extension, but you must install it.

  • ✅ If you install the required extensions and practice briefly before learning the theory, you can take the class much more smoothly.

🖐 Frequently Asked Questions

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) How much HTML+CSS knowledge is required?
If you have experience using HTML+CSS, you can follow along and get the skills and results you expect.

Q. Are there any notes regarding taking the course (environment required, other things to keep in mind, etc.)?
The class has a lot of content and progresses quickly. However, it does not go without sufficient explanation, but explains in detail. I think you will follow along well. Before the theory class, be sure to learn the basics of using Visual Studio Code.

And if possible, it is recommended to have a dual monitor environment. It is okay for theory classes, but a single monitor can be a bit inconvenient when creating a responsive web resume in the last section.

Q) I have no experience using CSS Frameworks. Will that be okay?
It doesn't matter at all. Tailwind CSS is a completely different system from traditional frameworks, so you can think of it as learning general publishing.

Q) How can I study more CSS theory while taking the class?
In this case, since most of the CSS theories are covered on the Coding Works YouTube channel, you can search for the desired topic on the Coding Works YouTube channel and study it if necessary.

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

Created a course called [Amazing Web UI Styling with Tailwind CSS] Coding Works 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, the instructor has been evaluated as being very helpful to Inflearn students by conducting publishing-related lectures at Inflearn.

Recommended for
these people

Who is this course right for?

  • Those who need to learn and apply the systematic Tailwind CSS core theory

  • Developers who want to access and use CSS easily and conveniently

  • Publishers who need to improve their competitiveness in job hunting and career changes by adding Tailwind CSS skills

  • Anyone who wants to make their developer resume responsive

  • Anyone who wants to make their web publisher resume responsive

Need to know before starting?

  • HTML+CSS Basics

Hello
This is

12,757

Learners

761

Reviews

2,114

Answers

4.9

Rating

23

Courses

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

 

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

Curriculum

All

52 lectures ∙ (19hr 29min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

29 reviews

5.0

29 reviews

  • pcdoomco44801님의 프로필 이미지
    pcdoomco44801

    Reviews 3

    ∙

    Average Rating 5.0

    5

    8% enrolled

    This time, a new lecture came out, so I bought it. As always, the details of the lecture prove that it is not superficial but very detailed, so I felt that Coding Works is the answer at least for web publication-related lectures. There is really no need to look for other instructors' lectures, and if you properly digest this one lecture, you will definitely feel your skills improving, so you cannot help but become a Coding Works fan. I will listen to this lecture well.

    • codingworks
      Instructor

      Thank you for your first review!!

  • twozeronine님의 프로필 이미지
    twozeronine

    Reviews 6

    ∙

    Average Rating 4.8

    4

    100% enrolled

    Even if you follow the practical lecture and follow it exactly, there are some parts that are wrong. Also, when there is a change in the middle of the practical lecture, you have to revise it again. It is very tiring to keep looking at 4 screens at once - the code I am working on, the web window, the lecture video, and the source code of the lecture video. I think it would have been better if the lecture content was organized sequentially. However, despite that, it is a really good lecture for learning tailwind css.

    • codingworks
      Instructor

      Thank you for your course review~

  • orangewebcenter2238님의 프로필 이미지
    orangewebcenter2238

    Reviews 46

    ∙

    Average Rating 4.7

    5

    100% enrolled

    It helped me a lot.

    • codingworks
      Instructor

      Thank you for your course review~

  • ds4odk님의 프로필 이미지
    ds4odk

    Reviews 3

    ∙

    Average Rating 5.0

    5

    100% enrolled

    This lecture was a great help to me. I recommend it to those who are interested in Tailwind CSS. Personally, I would like to request a lecture on TailwindCSS practical application. Please give me a practical lecture like the "SCSS(SASS)+FLEX Practical Responsive Web Project" that I took before. (I think Tailwind CSS is the perfect CSS for me.^^)

    • codingworks
      Instructor

      Thank you for your course review!!

  • jungsik님의 프로필 이미지
    jungsik

    Reviews 43

    ∙

    Average Rating 5.0

    5

    100% enrolled

    Thank you for your hard work.

    • codingworks
      Instructor

      Thank you for your review. You achieved 100% in less than a week since the course opened. That's amazing!!

$59.40

codingworks's other courses

Check out other courses by the instructor!

HTML+CSS+JS Portfolio Practical Publishing (Season 1)강의 썸네일

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

codingworks

Through various practical examples of HTML+CSS+JQUERY publishing for beginners and intermediate levels, you will learn the basics of publishing for intermediate publishing skills. In particular, through various practical examples, you will gain confidence in publishing by experiencing sufficient explanations and practical work. This is a publishing class that provides a sufficient amount of study time of over 41 hours. (It is more effective if you study CSS intermediate theory on the Coding Works YouTube publishing channel.)

초급

초급

HTML/CSS, jQuery

HTML+CSS+JS Portfolio Practical Publishing (Season 1)강의 썸네일

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

codingworks

HTML+CSS+JS Portfolio Practical Publishing (Season 3)강의 썸네일

HTML+CSS+JS Portfolio Practical Publishing (Season 3)

codingworks

HTML+CSS+JS Practical Portfolio (Season 3) is a process of creating practical publishing examples. Through the creation of various practical examples, you can grow your publishing skills to an intermediate-to-advanced level. With over 34 hours of ample lecture time and various types of practical creation processes, you can fully master production know-how and application methods.

초급

초급

HTML/CSS, JavaScript, jQuery

HTML+CSS+JS Portfolio Practical Publishing (Season 3)강의 썸네일

HTML+CSS+JS Portfolio Practical Publishing (Season 3)

codingworks

SCSS(SASS)+FLEX Practical Responsive Web Project with Figma강의 썸네일

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

codingworks

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.

초급

초급

HTML/CSS, Sass, scss

SCSS(SASS)+FLEX Practical Responsive Web Project with Figma강의 썸네일

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

codingworks

Tailwind CSS Practical Portfolio Publishing강의 썸네일

Tailwind CSS Practical Portfolio Publishing

codingworks

[Tailwind CSS Practical Portfolio Publishing] is a process of creating more than 26 different practical examples using Tailwind CSS. As you quickly create a variety of practical examples, we will explain the essential theories. This lecture was created with a focus on Tailwind CSS styling created by developers and publishers.

초급

초급

TailwindCSS, HTML/CSS

Tailwind CSS Practical Portfolio Publishing강의 썸네일

Tailwind CSS Practical Portfolio Publishing

codingworks

HTML+CSS+JS Portfolio Practical Publishing (Season 2)강의 썸네일

HTML+CSS+JS Portfolio Practical Publishing (Season 2)

codingworks

HTML+CSS+JS Practical Portfolio (Season 2) is an intermediate publishing course that teaches the basics of publishing through various practical examples to help you acquire intermediate publishing skills. In particular, through various practical examples and the creation of a full responsive website, you will gain confidence in intermediate publishing and the work you do in class will become valuable material for your personal portfolio for employment. This is a publishing course that provides sufficient learning time of nearly 38 hours and teaches intermediate publishing know-how through practical examples.

초급

초급

HTML/CSS, jQuery, JavaScript

HTML+CSS+JS Portfolio Practical Publishing (Season 2)강의 썸네일

HTML+CSS+JS Portfolio Practical Publishing (Season 2)

codingworks

A Real-World Guide to Getting a Job as a Publisher (PDF)강의 썸네일

A Real-World Guide to Getting a Job as a Publisher (PDF)

codingworks

A real guide to becoming a publisher (PDF) This e-book provides detailed information on how to learn publishing efficiently, how to choose a good publishing course and a good publishing instructor, how to publish like a veteran even if you are a beginner, desirable coding habits and principles, how to create a personal portfolio website, how to collaborate with designers and developers, essential sites that publishers should know, and how to improve Photoshop UI design skills. It also provides detailed information on the government-funded publisher course.

입문

입문

HTML/CSS

A Real-World Guide to Getting a Job as a Publisher (PDF)강의 썸네일

A Real-World Guide to Getting a Job as a Publisher (PDF)

codingworks

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide강의 썸네일

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide

codingworks

This is a practical exam specialist lecture that is optimized for the practical exam content that exactly matches the exam criteria implemented until the Web Designer Qualification Exam Criteria (2025.1.1~2025.12.31), and the HTML+CSS+JQUERY Publishing, Coding Works Web Designer Qualification Exam Practical Exam Lecture is different. It includes both the perfectly produced D-type and E-type classes added in 2023 and the perfectly produced F-type classes added in 2024.

입문

입문

HTML/CSS, jQuery, Web Design

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide강의 썸네일

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide

codingworks

Mobile Web Publishing Portfolio with CSS Nesting강의 썸네일

Mobile Web Publishing Portfolio with CSS Nesting

codingworks

Page 19, Total 22 different mobile layouts While creating various mobile layouts, you can improve your mobile web creation skills, which are the most competitive in the publisher industry and publisher practice. You can learn almost all the production methods and know-how for creating mobile web as a publisher. In the mobile web publishing class, we will explain in detail the detailed writing method of HTML wireframes, which is the strongest part of the class. Through the lecture, your HTML wireframe creation skills will greatly improve. In particular, you can learn enough about the CSS nesting method. You will acquire sufficient intermediate to advanced CSS practical skills centered on Flex layout.

초급

초급

Mobile App Design, HTML/CSS, wireframe

Mobile Web Publishing Portfolio with CSS Nesting강의 썸네일

Mobile Web Publishing Portfolio with CSS Nesting

codingworks

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)강의 썸네일

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

codingworks

The JS Core Theory and Practical Example Textbook and Completed Version for Web Publishers is a lecture textbook produced in PDF format. This textbook helps web publishers to fully acquire the basics of JavaScript and jQuery that they must know. A feature of this textbook is that it allows you to strengthen your theory through small missions connected to the theory. In particular, this textbook is also fully prepared with practical examples that utilize all the theories learned. The entire PDF page contains more than 320 pages of pure JavaScript (Vanilla JavaScript) and jQuery, with sufficient explanations added so that Coding Works can be easily understood. In particular, publishers can learn practical examples of jQuery interactions that are essential for creating websites.

초급

초급

JavaScript, jQuery, HTML/CSS

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)강의 썸네일

JavaScript & jQuery Core Theory Practical Examples for Web Publishers (Textbook, Completed Version)

codingworks

Mobile Web Publishing Portfolio with Figma강의 썸네일

Mobile Web Publishing Portfolio with Figma

codingworks

You can improve your mobile web production skills, which are the most competitive in publisher employment and publisher practice. As a publisher, you can hone almost all production methods and know-how for producing mobile web. In particular, we have explained in detail the process of working on mobile web UI design with Figma, so that you can cover a large part of the design skills required of publishers and developers these days by learning Figma. In the mobile web publishing class, we explain in detail the detailed method of writing HTML wireframes, which is the strongest part of the class. Through the lecture, your HTML wireframe production skills will be greatly improved. Mobile web publishing is a learning process that perfectly matches the layout for mobile and tablet using CSS variables (Var), so that you will have the ability to work on practical tasks that are similar to real work. You will gain sufficient intermediate to advanced CSS practical skills, focusing on Flex layout.

초급

초급

HTML/CSS, Portfolio, Mobile App Design

Mobile Web Publishing Portfolio with Figma강의 썸네일

Mobile Web Publishing Portfolio with Figma

codingworks

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)강의 썸네일

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)

codingworks

You need to take interviews frequently to get a job. To take interviews frequently, you must have a good personal portfolio website. This is a good personal portfolio website creation guide textbook (PDF) that Coding Works has made with great care. This textbook is not something you can find by Googling on the Internet. This is a one-of-a-kind publisher employment personal portfolio website creation guide (PDF) that Coding Works has created after teaching publishing theory, practice, and personal portfolio website creation to over 300 students in the field for several years and including detailed methods for creating personal portfolio websites so that students can get jobs at their desired companies quickly.

초급

초급

Portfolio, Web Design, HTML/CSS

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)강의 썸네일

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)

codingworks

A great resume writing guide to get a job as a publisher강의 썸네일

A great resume writing guide to get a job as a publisher

codingworks

We will explain in detail how to write a resume that will appeal to recruiters for a publisher job. We recommend this for those who are having trouble knowing where to start writing a resume. We will explain how to write a publisher resume for new hires or transfers, with examples based on real cases. In addition, this is a resume writing guide that takes a cold-eyed view from the perspective of a recruiter, rather than from the perspective of an applicant. Along with how to write an appealing resume, we will provide points to emphasize, points to watch out for, and specific tips and resume templates created by Coding Works.

입문

입문

Resume

A great resume writing guide to get a job as a publisher강의 썸네일

A great resume writing guide to get a job as a publisher

codingworks

The Best Frontend CSS Frameworks, UIkit강의 썸네일

The Best Frontend CSS Frameworks, UIkit

codingworks

You can learn UIkit, a representative CSS Framework along with Bootstrap, from the basics to advanced usage. A well-made personal portfolio website is essential for getting a job as a publisher. In order to show your portfolio results in a sophisticated way on your personal portfolio website, you can learn the detailed usage of UIkit components such as Slideshow, Slider, Lightbox, Full Screen Modal, Filter, and publishing skills and know-how to use them in actual production.

초급

초급

HTML/CSS, Portfolio

The Best Frontend CSS Frameworks, UIkit강의 썸네일

The Best Frontend CSS Frameworks, UIkit

codingworks

Everything You Need to Know About CSS3 for Intermediate to Advanced Publishing강의 썸네일

Everything You Need to Know About CSS3 for Intermediate to Advanced Publishing

codingworks

[Everything about CSS3 for Intermediate and Advanced Publishing] You can definitely acquire the publishing theory that is lacking in the lecture. You may know the theory to some extent, but there are often times when you cannot confidently publish something you want to create. This is an essential course for learning the theory in depth and acquiring solid publishing skills for intermediate and advanced publishing levels. [Everything about CSS3 for Intermediate and Advanced Publishing] The lecture is designed for those who aim for intermediate and advanced skills from beginners, and you can learn all the CSS3 theory and skills and know-how to apply the theory.

초급

초급

HTML/CSS

Everything You Need to Know About CSS3 for Intermediate to Advanced Publishing강의 썸네일

Everything You Need to Know About CSS3 for Intermediate to Advanced Publishing

codingworks

SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing강의 썸네일

SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing

codingworks

You can learn SCSS systematically from the basics to its application. Since SCSS (SASS) application skills are essential for getting a job as a publisher, you can also get practical portfolio publishing results using SCSS (SASS) + GRID + FLEX to prove your skills. The class is composed of SCSS (SASS) core theory & practical examples, and you can learn SCSS (SASS) + GRID + FLEX publishing skills and know-how for employment and practical work.

초급

초급

Sass, Flex, HTML/CSS

SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing강의 썸네일

SCSS(SASS)+GRID+FLEX Practical Portfolio Publishing

codingworks

SCSS(SASS) FLEX GRID Core Theory (PDF) Textbook and Usage Examples강의 썸네일

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

codingworks

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

초급

초급

HTML/CSS, Sass, Flex

SCSS(SASS) FLEX GRID Core Theory (PDF) Textbook and Usage Examples강의 썸네일

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

codingworks

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment강의 썸네일

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment

codingworks

Coding Works has put its heart and soul into creating this course based on its experience of mentoring over 200 offline academy students on their new publisher job portfolios. The course on creating a publisher ‘personal portfolio website’ that will get you interviews and jobs is a thorough guide that tells you how and where to start preparing your personal portfolio website, which is essential for getting a job as a publisher. The course contains over 19 hours of content. It covers all the essential publishing requirements before creating a personal portfolio website, the publishing basics that are most important for getting a job and working in the field, jQuery and JavaScript & coding missions for getting a job, how to create portfolio results to put on your personal portfolio website, content layouts and details for each section of your personal portfolio website, how to distinguish companies to apply to, and tips for real publisher interviews.

초급

초급

Portfolio, HTML/CSS, jQuery

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment강의 썸네일

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment

codingworks

Responsive Website Portfolio (App Official Landing Website)강의 썸네일

Responsive Website Portfolio (App Official Landing Website)

codingworks

The process of creating a responsive website portfolio (App Official Landing) is through HTML+CSS+JQUERY publishing, and through the entire process of creating a responsive website, you will gain the basics of intermediate publishing skills and practical publishing know-how. In particular, you will gain confidence in creating your own portfolio website by experiencing the entire process of creating a website through sufficient explanations and practical work. You will learn how to use jQuery plugins that must be used, such as Scroll Reveal Animation and Slick Slider. The responsive production method is produced using the existing method of responsive layout production using float and position. However, there are also parts where Flex is used for certain elements.

초급

초급

HTML/CSS, jQuery, Responsive Web

Responsive Website Portfolio (App Official Landing Website)강의 썸네일

Responsive Website Portfolio (App Official Landing Website)

codingworks

Grid Core Theory and Practical Application강의 썸네일

Grid Core Theory and Practical Application

codingworks

The best way to create a responsive layout, CSS Grid~!! You can fully understand CSS Grid through the core theory of Grid and practical application examples. In addition, there are various practical examples using the core theory, so you can practice enough for practical use. The core theory of Grid can be downloaded as a PDF textbook as well as a video. By learning the core theory and practical application of CSS Grid, which is an essential course for becoming an intermediate publisher, you can have enough competitiveness in the field as a publisher as well as in employment.

초급

초급

Responsive Web, HTML/CSS

Grid Core Theory and Practical Application강의 썸네일

Grid Core Theory and Practical Application

codingworks

Flex Responsive Website Portfolio (The World's Best Cities)강의 썸네일

Flex Responsive Website Portfolio (The World's Best Cities)

codingworks

Through the process of creating a Flex responsive website, you can build a solid foundation for intermediate publishing skills. In addition, there are thorough lectures on Flex from the basics to applications and even practical UI creation. With more than 20 hours of Flex theory, practical examples, and responsive website creation, you will gain skills and confidence that are comparable to practical experience.

초급

초급

Flex, Responsive Web

Flex Responsive Website Portfolio (The World's Best Cities)강의 썸네일

Flex Responsive Website Portfolio (The World's Best Cities)

codingworks

Similar courses

Explore other courses in the same field!

Responsive Website Portfolio (App Official Landing Website)강의 썸네일

Responsive Website Portfolio (App Official Landing Website)

codingworks

The process of creating a responsive website portfolio (App Official Landing) is through HTML+CSS+JQUERY publishing, and through the entire process of creating a responsive website, you will gain the basics of intermediate publishing skills and practical publishing know-how. In particular, you will gain confidence in creating your own portfolio website by experiencing the entire process of creating a website through sufficient explanations and practical work. You will learn how to use jQuery plugins that must be used, such as Scroll Reveal Animation and Slick Slider. The responsive production method is produced using the existing method of responsive layout production using float and position. However, there are also parts where Flex is used for certain elements.

초급

초급

HTML/CSS, jQuery, Responsive Web

Responsive Website Portfolio (App Official Landing Website)강의 썸네일

Responsive Website Portfolio (App Official Landing Website)

codingworks

Tailwind CSS Basics Guide: Easy and Fast Styling강의 썸네일

Tailwind CSS Basics Guide: Easy and Fast Styling

The Oreum

Introducing Tailwind, the solution that lets you build modern websites quickly without leaving HTML!

초급

초급

HTML/CSS

Tailwind CSS Basics Guide: Easy and Fast Styling강의 썸네일

Tailwind CSS Basics Guide: Easy and Fast Styling

The Oreum

Creating 3D Leaflets - Interactive Web Project강의 썸네일

Creating 3D Leaflets - Interactive Web Project

studiomeal

Interactive Web Projects is a series of creative interactive examples created using CSS and JavaScript.

중급이상

중급이상

HTML/CSS, JavaScript, Interactive Web

Creating 3D Leaflets - Interactive Web Project강의 썸네일

Creating 3D Leaflets - Interactive Web Project

studiomeal

Modern Web Interactive CSS3 Bootcamp [Full vers.]강의 썸네일

Modern Web Interactive CSS3 Bootcamp [Full vers.]

youngcodikimssam

For over 15 years, Young Codi Kim, a star coding instructor, has been dedicated to coding education for elementary school students, high school students in IT software departments, university students in computer science, and job seekers without a major in the field. Now, you can experience Kim's easy and fun coding lectures not only offline but also online. With Young Codi Kim, who has trained over 500 front-end, back-end, full-stack, and web developers, your dream of becoming a developer will soon become a reality!

입문

입문

HTML/CSS, Web Design, Clone Coding

Modern Web Interactive CSS3 Bootcamp [Full vers.]강의 썸네일

Modern Web Interactive CSS3 Bootcamp [Full vers.]

youngcodikimssam

Flex Responsive Website Portfolio (The World's Best Cities)강의 썸네일

Flex Responsive Website Portfolio (The World's Best Cities)

codingworks

Through the process of creating a Flex responsive website, you can build a solid foundation for intermediate publishing skills. In addition, there are thorough lectures on Flex from the basics to applications and even practical UI creation. With more than 20 hours of Flex theory, practical examples, and responsive website creation, you will gain skills and confidence that are comparable to practical experience.

초급

초급

Flex, Responsive Web

Flex Responsive Website Portfolio (The World's Best Cities)강의 썸네일

Flex Responsive Website Portfolio (The World's Best Cities)

codingworks

Modern Web Interactive CSS3 [PART2/3]강의 썸네일

Modern Web Interactive CSS3 [PART2/3]

youngcodikimssam

Now you can enjoy the easy and fun coding lectures of Young Cody Kim, a current star lecturer who has devoted himself to coding education for over 15 years, targeting elementary school students, high school students in IT software departments, college students in computer science departments, and job seekers who are not majoring in the field, not only offline but also online. With Young Cody Kim, who has produced over 500 front-end, back-end, full-stack, and web developers, your dream of becoming a developer will soon come true!

입문

입문

HTML/CSS, Web Design, css3

Modern Web Interactive CSS3 [PART2/3]강의 썸네일

Modern Web Interactive CSS3 [PART2/3]

youngcodikimssam

Mobile Web Publishing Portfolio with CSS Nesting강의 썸네일

Mobile Web Publishing Portfolio with CSS Nesting

codingworks

Page 19, Total 22 different mobile layouts While creating various mobile layouts, you can improve your mobile web creation skills, which are the most competitive in the publisher industry and publisher practice. You can learn almost all the production methods and know-how for creating mobile web as a publisher. In the mobile web publishing class, we will explain in detail the detailed writing method of HTML wireframes, which is the strongest part of the class. Through the lecture, your HTML wireframe creation skills will greatly improve. In particular, you can learn enough about the CSS nesting method. You will acquire sufficient intermediate to advanced CSS practical skills centered on Flex layout.

초급

초급

Mobile App Design, HTML/CSS, wireframe

Mobile Web Publishing Portfolio with CSS Nesting강의 썸네일

Mobile Web Publishing Portfolio with CSS Nesting

codingworks

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!

초급

초급

Interactive Web, JavaScript, HTML/CSS

Learning interactive web while making web games! JAVASCRIPT

ggangcoding162118

Hands-on Responsive Web Development with Pure HTML/CSS/JS Bootcamp강의 썸네일

Hands-on Responsive Web Development with Pure HTML/CSS/JS Bootcamp

youngcodikimssam

A practical production class on creating responsive web pages that can implement various layouts for each device using only pure HTML/CSS/JS without using Bootstrap [2024 Latest Edition].

초급

초급

HTML/CSS, Responsive Web, Interactive Web

Hands-on Responsive Web Development with Pure HTML/CSS/JS Bootcamp강의 썸네일

Hands-on Responsive Web Development with Pure HTML/CSS/JS Bootcamp

youngcodikimssam

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide강의 썸네일

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide

codingworks

This is a practical exam specialist lecture that is optimized for the practical exam content that exactly matches the exam criteria implemented until the Web Designer Qualification Exam Criteria (2025.1.1~2025.12.31), and the HTML+CSS+JQUERY Publishing, Coding Works Web Designer Qualification Exam Practical Exam Lecture is different. It includes both the perfectly produced D-type and E-type classes added in 2023 and the perfectly produced F-type classes added in 2024.

입문

입문

HTML/CSS, jQuery, Web Design

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide강의 썸네일

[2025 Exam Criteria] Web Design Technician Practical Exam Complete Guide

codingworks

Creating Effective Mobile UX (Design + Coding)강의 썸네일

Creating Effective Mobile UX (Design + Coding)

usefulit

You will design web and app layouts for various devices using Photoshop and Adobe XD programs, and then learn simple coding techniques to implement them yourself.

초급

초급

HTML/CSS, jQuery, XD

Creating Effective Mobile UX (Design + Coding)강의 썸네일

Creating Effective Mobile UX (Design + Coding)

usefulit

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)강의 썸네일

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

We have created this so that anyone can pass the 2023 version of the Web Design Function Exam Criteria. Let's learn the 5 types and pass quickly!

초급

초급

HTML/CSS, jQuery, JavaScript

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)강의 썸네일

Web Design Technician Certification Preparation (2023 Examination Standard Reflected Version)

webstoryboy

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)강의 썸네일

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)

codingworks

You need to take interviews frequently to get a job. To take interviews frequently, you must have a good personal portfolio website. This is a good personal portfolio website creation guide textbook (PDF) that Coding Works has made with great care. This textbook is not something you can find by Googling on the Internet. This is a one-of-a-kind publisher employment personal portfolio website creation guide (PDF) that Coding Works has created after teaching publishing theory, practice, and personal portfolio website creation to over 300 students in the field for several years and including detailed methods for creating personal portfolio websites so that students can get jobs at their desired companies quickly.

초급

초급

Portfolio, Web Design, HTML/CSS

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)강의 썸네일

A Complete Guide to Creating a Publisher Personal Portfolio Website (PDF)

codingworks

Creating Web Services with Vibe Coding With Claude Code강의 썸네일

Creating Web Services with Vibe Coding With Claude Code

ref63184917

A current startup CTO will share vibe coding knowledge gained through actual services and various outsourcing projects.

입문

입문

HTML/CSS, JavaScript, Next.js

Creating Web Services with Vibe Coding With Claude Code강의 썸네일

Creating Web Services with Vibe Coding With Claude Code

ref63184917

Firebase Series #2: AI Chinese Character Recommendation & Handwriting Learning Platform강의 썸네일

Firebase Series #2: AI Chinese Character Recommendation & Handwriting Learning Platform

dakgangjung123

🔥 Build a customized platform for Hanja learning! Leverage Google Gemini AI and Firestore to directly implement your own Hanja vocabulary book, stroke order animation, and even handwriting recognition!

초급

초급

gemini, HTML/CSS, TailwindCSS

Firebase Series #2: AI Chinese Character Recommendation & Handwriting Learning Platform강의 썸네일

Firebase Series #2: AI Chinese Character Recommendation & Handwriting Learning Platform

dakgangjung123

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)강의 썸네일

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

lopun

Supabase: Giving Wings to Full-stack Development! Through 3 clone projects, you will quickly learn how to build practical-level full-stack applications using Next.js 14 and Supabase.

초급

초급

Next.js, supabase, TailwindCSS

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)강의 썸네일

[Fullstack Complete] Clone 3 websites with Supabase (Next.js 14)

lopun

Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)강의 썸네일

Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)

dunopi

Our class's pass rate: 90%! (National: 60%) Possible by grasping exam requirements. Don't buy practical books. Too hard.

초급

초급

HTML/CSS, jQuery

Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)강의 썸네일

Web Design Development Technician [2025] Complete Practical Course (KakaoTalk Q&A Available)

dunopi

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment강의 썸네일

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment

codingworks

Coding Works has put its heart and soul into creating this course based on its experience of mentoring over 200 offline academy students on their new publisher job portfolios. The course on creating a publisher ‘personal portfolio website’ that will get you interviews and jobs is a thorough guide that tells you how and where to start preparing your personal portfolio website, which is essential for getting a job as a publisher. The course contains over 19 hours of content. It covers all the essential publishing requirements before creating a personal portfolio website, the publishing basics that are most important for getting a job and working in the field, jQuery and JavaScript & coding missions for getting a job, how to create portfolio results to put on your personal portfolio website, content layouts and details for each section of your personal portfolio website, how to distinguish companies to apply to, and tips for real publisher interviews.

초급

초급

Portfolio, HTML/CSS, jQuery

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment강의 썸네일

Creating a 'Publisher Personal Portfolio Website' that leads to interviews and employment

codingworks

A Full-Stack Restaurant Guide Project for Non-Majors!: Front, Back-end, and Deployment강의 썸네일

A Full-Stack Restaurant Guide Project for Non-Majors!: Front, Back-end, and Deployment

Jiwoon Jeong

This is a full-stack restaurant map tutorial that allows you to learn everything from front-end, back-end, Kakao Map API usage, and deployment all at once while creating a restaurant map of your favorite YouTuber.

초급

초급

HTML/CSS, JavaScript, REST API

A Full-Stack Restaurant Guide Project for Non-Majors!: Front, Back-end, and Deployment강의 썸네일

A Full-Stack Restaurant Guide Project for Non-Majors!: Front, Back-end, and Deployment

Jiwoon Jeong

A Real-World Guide to Getting a Job as a Publisher (PDF)강의 썸네일

A Real-World Guide to Getting a Job as a Publisher (PDF)

codingworks

A real guide to becoming a publisher (PDF) This e-book provides detailed information on how to learn publishing efficiently, how to choose a good publishing course and a good publishing instructor, how to publish like a veteran even if you are a beginner, desirable coding habits and principles, how to create a personal portfolio website, how to collaborate with designers and developers, essential sites that publishers should know, and how to improve Photoshop UI design skills. It also provides detailed information on the government-funded publisher course.

입문

입문

HTML/CSS

A Real-World Guide to Getting a Job as a Publisher (PDF)강의 썸네일

A Real-World Guide to Getting a Job as a Publisher (PDF)

codingworks