Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
Programming

/

Front-end

Creating a Tab Menu with Vanilla JS-based UI Components

To create a webpage, you need to be able to build individual components piece by piece. Let's create UI components using pure coding. Recommended for those who know how to use HTML, CSS, and JavaScript.

8 learners are taking this course

  • codingghost2025
실습 중심
vanillaJS
HTML/CSS
vanilla-javascript

What you will learn!

  • HTML

  • CSS

  • JavaScript

Vanila JS based UI Component series

Code the components needed for your webpage using HTML, CSS, and Vanilla Javascript.

  • You can only improve your skills if you stick to the basics.

  • Even if you receive a Figma design file, you should be able to code the layout and interactions in the same way.

Learn about these things

Create a tab menu

From HTML markup to CSS styling, you will learn step by step, slowly. At this time, a practitioner will guide you on the parts that you need to pay attention to and the parts that take accessibility into consideration.
Learn about aria-controls and aria-selected.

Vanila JS

Write code to control and manipulate DOM elements in pure JavaScript, without using jQuery or other JavaScript libraries.

Learn how to control CSS variables with JS.

Things to note before taking the class

Practice environment

  • Operating System and Version (OS): macOS

  • Tools used: VS code, Chrome browser

  • PC Specs: Not relevant

Learning Materials

  • You can download the source code file.

  • You can download a PDF file containing the source code.

Player Knowledge and Notes

  • This is a good course for those who can use HTML, CSS, and Javascript.

  • Please leave a question and we will answer it.

  • Commercial distribution and use of images and PDFs in lecture materials are prohibited.

Recommended for
these people

Who is this course right for?

  • Anyone interested in implementing a tab menu with vanilla JavaScript?

  • For those who want to code along and follow tutorials

  • For those who want to create examples using HTML, CSS, and JS

Need to know before starting?

  • HTML

  • CSS

  • JavaScript

Hello
This is

안녕하세요. 저는 프로덕트 디자인과 코딩을 같이 하고 있는 1인 기업 프리랜서 입니다.
수많은 웹서비스와 하이브리드 앱, 네이티브 앱을 기획부터 런칭까지 하였습니다.
몇년전 제주에 와서 터를 잡으며, 그동안 쉼없이 달려온 저에게 잠시 쉼을 주고, 그동안 온/오프라인으로 강의했던 것들과 쌓아온 지식들을 하나하나 발자취를 남기고 있습니다.

강의를 만들면서, 천천히.. 쉬웠으면 좋겠다. '아, 이거 할만하네?'라는 생각이 들게 하는 것을 항상 잊지않으려고 합니다. 또한, 예제를 만들어보면서 성취감을 느껴보게 하는 것 또한 저의 계획의 일부입니다 ^^:: 우리 오늘도 한줄 더 코딩하고 잠자리에 듭시다. 여러분, 응원합니다~!

2025 나혼자 하는 코딩독학서, '코딩-레벨-업' 저자
유튜브 '코딩고스트'를 운영하고 있습니다.
유튜브 채널 : https://www.youtube.com/@codingghost941
인스타그램 : @blackcrown.design.studio
프리랜서 인스타툰 '이랑이' : @ejey.irangi

Curriculum

All

10 lectures ∙ (1hr 15min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

$11.00

Similar courses

Explore other courses in the same field!