강의

멘토링

로드맵

Programming

/

Web Development

Vanilla JavaScript & Tailwind CSS

Practical web UI development using AI and component-centric UI creation, An essential course for Designers + Developers!

(5.0) 1 reviews

10 learners

  • Michael Kwon
바닐라JS
tailwindcss
JavaScript
vanilla-javascript
frontend
TailwindCSS
Web Design

What you will learn!

  • You can build a fast and efficient development environment using Vite.

  • Learn how to manipulate the DOM, handle events, and implement dynamic UI using Vanilla JavaScript.

  • Quickly implement UI designs using Tailwind CSS without writing long CSS.

  • AI Code Assistant can shorten code writing and improve quality.

  • We will directly implement UI elements commonly used in practice, such as modals, dropdowns, accordions, and toggle menus.

Want to quickly build your foundation and learn modern web development? 🚀

This course is a practical web development course for designers and developers. Without frameworks like React or Vue, you will learn how to efficiently style and implement essential UI components frequently used in practice using only vanilla JavaScript and TailwindCSS.

Learn about these things

1⃣ Vanilla JavaScript Basics

Through vanilla-javascript, the foundation of web development, you will learn everything from basic grammar to DOM manipulation and event handling. You will be able to write code that works without a framework and understand the core concepts of JavaScript.

2⃣ Styling Quickly with TailwindCSS

Learn Tailwind CSS, which allows you to create sophisticated web designs using only classes, without writing complex CSS. Quickly apply styles such as background color, margin, and font size, and easily create responsive web.

tailwindcss

3⃣ Real-world project (UI component development)

Focusing on UI component development , you will create modal windows , drop-down menus , and accordion menus that are frequently used on actual websites. You will connect design and behavior and build skills that can be applied directly to frontend work.

4⃣ Use of AI

You'll also learn how to use AI tools (Google Gemini) to make your development and design work faster and smarter.

🎯 Target audience of the course (Who will take this course?)

  1. Web Designer → Anyone who wants to learn Tailwind CSS and collaborate with developers

  2. Beginner Front-end Developer → Anyone who wants to learn UI development using Vanilla JS and Tailwind

  3. Designers considering transitioning to developers → People who want to use their design sense to do web development

  4. Startup Developer → People who want to create prototypes quickly

  5. Developers who find CSS difficult → People who want to easily handle CSS through Tailwind

Things to note before taking the class

Practice environment

  • Operating System and Version (OS): All OS are supported, including Windows, macOS, and Linux.

  • Tools used: Visual Studio Code, Node.js & npm

  • PC specifications: PC with basic specifications that can access the Internet

Learning Materials

  • Format of learning materials provided: GitHub source code, text lecture materials

  • Volume and Capacity: Learning materials provided for each section

Player Knowledge

This course is designed for beginners who are not familiar with programming or web development . However, if you know the basic knowledge below, you will be able to follow along more easily.

  • HTML, CSS Basics

  • Photoshop or Figma Basics


Recommended for
these people

Who is this course right for?

  • Developer who wants to implement UI using pure JavaScript without a framework

  • Designers & Publishers Who Want to Style Quickly Without CSS

  • For those who want to build UI components commonly used in practice.

  • Those wishing to learn the designer-developer collaboration process

  • Anyone who wants to learn the latest web development environment and efficient development methods

Need to know before starting?

  • HTML, CSS basics

Hello
This is

225

Learners

24

Reviews

17

Answers

5.0

Rating

5

Courses

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

Curriculum

All

35 lectures ∙ (4hr 44min)

Course Materials:

Published: 
Last updated: 

Reviews

All

1 reviews

5.0

1 reviews

  • 이현준님의 프로필 이미지
    이현준

    Reviews 4

    Average Rating 5.0

    5

    30% enrolled

    $26.40

    Michael Kwon's other courses

    Check out other courses by the instructor!

    Similar courses

    Explore other courses in the same field!