인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
Programming

/

Web Publishing

Tailwind CSS Practical Portfolio Publishing

[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.

(5.0) 2 reviews

48 students

TailwindCSS
HTML/CSS
Thumbnail

This course is prepared for Basic Learners.

What you will learn!

  • Creating various practical examples using Tailwind CSS

  • Tailwind CSS's easy mobile-responsive workflow

  • Tailwind Utility Classes and CSS All Properties

  • Improve your understanding of Tailwind CSS with easy explanations

  • Web publishers who need Tailwind CSS skills and results

  • Create a responsive website easily and conveniently with Flex

  • Creating various forms with Tailwind CSS

[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

  • [Reference] Tailwind CSS Special Properties and HTML Wireframe Structure

Tailwind CSS Practical Portfolio Publishing Open

Improve your Tailwind CSS skills by creating only real-world examples!


This course is about creating over 26 different practical examples using Tailwind CSS . We quickly create a variety of practical examples and explain the essential theories within them. This course is centered around Tailwind CSS styling created by developers and publishers.

I think it will be a great help to web publishers and developers in finding jobs and changing careers.

Tailwind CSS Practical Portfolio Publishing

Tailwind CSS Practical Portfolio Publishing consists of only the process of creating practical examples . So you can feel the real fun of Tailwind CSS without getting bored. As you create practical examples one by one, your Tailwind CSS skills will improve, and you can leave the practical examples created with Tailwind CSS as work in your personal portfolio.

You will be able to learn the Tailwind CSS Portfolio practical production video, which was created with faithful content and systematic theoretical explanations that help with understanding, equivalent to more than 14 hours of lecture time .


Key features of the course

  • Build 26+ different Tailwind CSS practical examples (see the finished preview video)

  • This tutorial shows you in detail the process of creating an HTML wireframe structure .

  • Maximize your publishing prowess by improving your HTML wireframe structure creation skills.

  • Provides a variety of reference materials to help with web publishing

Main sections of the lecture

  1. Setting up Tailwind CSS CLI environment and notes

  2. Tailwind CSS Practical Examples - Navigation

  3. Tailwind CSS Practical Example - Card UI Design

  4. Tailwind CSS Practical Example - Section UI Design

  5. Tailwind CSS Practical Example - Tab Menu Content

  6. Tailwind CSS Practical Example - Login Form Design

CSS Frameworks Ranking in 2024

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.

In short, Tailwind CSS...

'While creative styling

No.1 CSS Framework to Reduce Production Time'


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

Tailwind CSS is what developers need these days.

Beyond preferential treatment, it is now an eligibility requirement .




🚩 Lecture-related expected questions & must-reads


Q. Can I take Tailwind CSS Practical Portfolio Publishing right away without attending the theory lecture?

  • If you are new to Tailwind CSS, I recommend that you take the theory lecture [Amazing Web UI Styling with Tailwind CSS] from Coding Works and then take that lecture.

  • If you are taking this course right away, please study on the official Tailwind CSS website first and study while also using the official website.

  • Tailwind CSS Tutorial: Creating Awesome Web UI Styling with Tailwind CSS: https://inf.run/pjqKk



Q. Do you provide the finished HTML produced for Tailwind CSS Practical Portfolio Publishing?

  • Yes. In the Student Resources Downloads section, you will receive a zipped file containing all the completed practical examples produced in the video (HTML, CSS, JS, images, reference sites, source text, wireframe PDF, etc.).

  • Before you start the lecture video, unzip the downloaded compressed file and delete the index.html and style.css files. You can start by creating the basic HTML structure, excluding the source and images folders. If you need to refer to the finished version, you can always unzip the compressed file again and look at it.


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

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

  • Prerequisite skills in jQuery or JavaScript are not required. However, understanding the essential core theories of jQuery is required. The entire lecture is based on jQuery to create interactions, such as class control and element navigation, and JavaScript is used to experience examples, so you do not have to worry about JavaScript skills.



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

  • There is no need to follow the exact order of the example studies. You can start from any section you want.


  • There is no set difficulty level for each section. You can select and study the examples you want to learn individually.


  • [TMI] There are a lot of theories that you need to know when studying publishing and creating practical examples. I would like to organize all the theoretical parts and make a video, but realistically, there are some parts that are difficult. Please fill in the missing parts through the Tailwind CSS official website.


Q. Where can I download the complete set of practical examples and theory examples?

  • All the finished files (html, css, js, image files, etc.) created from the class videos can be downloaded in the last section (Section 8) shown below.

    .


💻 Preview the Tailwind CSS Practical Example Production Results


▲ Tailwind CSS Gradient


😊 Tailwind CSS Practical Examples - Navigation


▲ Navigation - Standard top navigation (3 types)


▲ Navigation - Responsive top navigation


▲ Navigation - Social media icon hover navigation


▲ Navigation - Custom dropdown select


▲ Navigation - Sidebar Icon Navigation


😊 Tailwind CSS Practical Example - Card UI Design



▲ Card UI design - figure card hover effect (how to use group selector)


▲ Card UI Design - New Product Card UI Design


▲ Card UI Design - Profile Card Hover Flip (3D Card Flip)


▲ Card UI design - Apple TV subscription plan selection (:has virtual class)


😊 Tailwind CSS Practical Example - Section UI Design


▲ Section UI Design - Glassmorphism Login Form


▲ Section UI Design - Animated Modal


▲ Section UI Design - Ticket Card UI (Frontend Online Class)


▲ Section UI Design - Table Design (Premier League)


▲ Section UI Design - Accordion Content with Emoji

▲ Section UI Design - Mobile Rate Plan Screen (Hover Tooltip)


▲ Section UI Design - Creating Dark Mode (ft. How to Use SVG)


▲ Section UI Design - Responsive Skill Introduction Section


▲ Section UI design - News introduction card thumbnail section (Latest news)


▲ Section UI Design - Web Hosting Plan Price List (Price Plan)


▲ Section UI Design - Wedding Responsive Intro Section (Testimonial Intro)


😊 Tailwind CSS Practical Example - Tab Menu Content


▲ Tab menu content - Tab menu content (CSS method, JQUERY method)


▲ Tab menu content - Dating app tab menu for men and women


😊 Tailwind CSS Practical Example - Login Form Design


▲ Mobile app background animation login


▲ Responsive Contact Form - Contact Form


▲ Show/Hide Password Login Form


▲ CSS Validation Contact Form - Dark Mode

Section 1. Introduction to the Course

  • [Course Introduction] Tailwind CSS Practical Portfolio Publishing

  • [Preview of a practical example] Tailwind CSS Practical Portfolio Publishing

Section 2. Setting up Tailwind CSS CLI environment and notes

  • Using Tailwind CSS Utility Classes in a CDN Environment

  • Modifying Tailwind CSS Config in CDN and CLI Environments (ft. Web Fonts)

  • Setting up a CLI environment in Tailwind CSS (ft. Node.js)

  • Utilizing utility classes (Components) and web fonts in a CLI environment

  • Preparing to create a practical example and using gradients (background, text)

Section 3. Tailwind CSS Practical Examples - Navigation

  • Navigation - Standard top navigation (3 types)

  • Navigation - Responsive Top Navigation

  • Navigation - Social Media Icon Hover Navigation

  • Navigation - Custom Dropdown Select

  • Navigation - Sidebar Icon Navigation

Section 4. Tailwind CSS Practical Examples - Card UI Design

  • Card UI Design - Figure Card Hover Effect (How to Use Group Selector)

  • Card UI Design - New Product Card UI Design

  • Card UI Design - Profile Card Hover Flip (3D Card Flip)

  • Card UI Design - Apple TV Subscription Plan Selection (:has Virtual Class)

Section 5. Tailwind CSS Practical Examples - Section UI Design

  • Section UI Design - Glassmorphism Login Form

  • Section UI Design - Animated Modal

  • Section UI Design - Ticket Card UI (Frontend Online Class)

  • Section UI Design - Table Design (Premier League)

  • Section UI Design - Accordion Content with Emoji

  • Section UI Design - Mobile Rate Plan Screen (Hover Tooltip)

  • Section UI Design - Creating Dark Mode (ft. How to Use SVG)

  • Section UI Design - Introducing Responsive Skills Section

  • Section UI Design - News Introduction Card Thumbnail Section (Latest News)

  • Section UI Design - Web Hosting Plan Price List (Price Plan)

  • Section UI Design - Wedding Responsive Intro Section (Testimonial Intro)

Section 6. Tailwind CSS Practical Examples - Tab Menu Content

  • Tab Menu Content - Tab Menu Content (CSS, JQUERY)

  • Tab Menu Content - Male and Female Dating App Tab Menu

Section 7. Tailwind CSS Practical Example - Login Form Design

  • Mobile App Background Animation Login

  • Responsive Contact Form - Contact Form

  • Show Password Hide Login Form

  • CSS Validation Contact Form (1) - Light Mode

  • CSS Validation Contact Form (2) - Dark Mode

Section 8. [Download] Download the complete version and reference materials

  • [Download] Tailwind CSS Practical Examples Complete Collection

  • [Reference] Tailwind CSS Special Properties and HTML Wireframe Structure

  • [Reference] Visual Studio Code Essential Settings

Introducing the knowledge sharer

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.

Watch the InFocus Interview: https://www.inflearn.com/pages/infocus-8-20230704

Recommended for
these people!

Who is this course right for?

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

  • Web publishers who want to access and use Tailwind CSS easily and conveniently

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

Need to know before starting?

  • HTML+CSS Basics

Hello
This is

11,953

Students

691

Reviews

2,062

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

42 lectures ∙ (14hr 35min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Become the author of a review that helps everyone!