inflearn logo

Core Frontend UI - Part 2

Experience various perspectives and methods using Web APIs by creating representative UI elements in both React and pure JavaScript versions, and take your front-end development skills to the next level.

(5.0) 8 reviews

316 learners

Level Basic

Course period Unlimited

React
React
TypeScript
TypeScript
DOM
DOM
ui
ui
vanilla-js
vanilla-js
React
React
TypeScript
TypeScript
DOM
DOM
ui
ui
vanilla-js
vanilla-js

Reviews from Early Learners

5.0

5.0

신원세

7% enrolled

It was a lecture that I could concentrate better because it felt like I was communicating with the students rather than just conveying information!! I also like that there is a part that implements it in a vanilla JavaScript version 👍

5.0

withkey

32% enrolled

Problems that I had been struggling with for months while building the design system, especially problems with headless and compound, were all solved in Section 7. Especially in the part where generics are used in createContext... I felt a thrill. 🫨 Starting from Core JavaScript, various Effective TypeScripts, React official documentation study, and even component lectures... Thank you so much for the great lectures and materials. 😭👍

5.0

eddie

100% enrolled

This lecture helped me understand how and based on what criteria to utilize browsers, HTML, React, and Vanilla when developing UI. Additionally, it was very helpful to see the overall flow when developing UI while watching the lecture.

What you will gain after the course

  • Practical React Knowledge

  • DOM API

  • Ability to utilize various other Web APIs

🎉Get 25% off when you enroll via the roadmap🎉

Roadmap Link: https://inf.run/cNuxY

(Even if you are already enrolled in only one of the two courses, a 25% discount will be applied to the remaining course.)

Let's build various UI elements ourselves!

Create both pure JavaScript (vanilla-js) and React versions, and introduce as many different methods as possible.

  • Experience and compare the characteristics of various versions of components as you write them.


  • Develop your practical skills by applying APIs that are widely used in the industry.

We recommend this to the following people

Frontend developers who lack confidence in development because they rely solely on libraries for UI components

Those who are not familiar with the latest HTML5 APIs and DOM APIs

Those who feel a thirst for improving their UI component development skills

After taking this course,

  • With this single course, UI elements are covered! You can build development knowledge of UI elements on par with a senior front-end developer.

  • By combining and evolving the elements covered in this course, you will gain the confidence to create any number of new UI elements on your own.

Here is what you will learn.

Part 2 is a lecture focused on exploring ways to reuse existing components.

Part 1

  1. Accordion

  2. Tab Menu

  3. Tooltip

  4. Responsive Textbox

  5. Multi-line ellipsis

  6. Lazy Loading

  7. Infinite Scroll

  8. Horizontal Scroll Box

  9. Scrollspy

Part 2 (This Course)

  1. Snackbar

  2. Modal

  3. Popover

  4. Image Slide

  5. Carousel

  6. Gallery

  7. Select Box

  8. Autocomplete

  9. Drag-and-drop list

Features of this course

Vivid Live Coding

This course consists of unedited recordings and edits of live coding sessions conducted in an online study group, offering the advantages of a vivid sense of presence and rapid feedback. It presents diverse perspectives that break free from fixed frameworks, and you will also be able to experience solutions to unexpected problems.

Step-by-step difficulty adjustment, introduction and application of the latest APIs

The course is structured by grouping elements with similar skill requirements and gradually increasing the difficulty level step-by-step. Furthermore, the focus is on becoming familiar with various modern HTML5 and DOM APIs by introducing and applying them throughout the lessons.

Notes before taking the course

Practice Environment

It is sufficient to have the following versions or higher installed.

  • Node.js 16

  • React 18

  • Next.js 13

  • TypeScript 4

Learning Materials

  • Example code is provided in a compressed file format.

Prerequisite Knowledge and Precautions

  • The course proceeds on the assumption that you are familiar with basic HTML/CSS, JavaScript syntax, and React syntax.

  • Next.js and TypeScript were used merely as tools for convenience and will not be covered in detail.

  • This course is a recorded and edited version of a study session conducted by the instructor.


Related Lectures 📺

Recommended for
these people

Who is this course right for?

  • Aspiring Front-end Developer

  • Junior Frontend Developer

Need to know before starting?

  • HTML

  • CSS

  • JavaScript (ES6+)

  • React

  • TypeScript

Hello
This is jaenam

33,461

Learners

703

Reviews

395

Answers

4.8

Rating

11

Courses

Hello, I am Jaenam Jung, a senior front-end developer.
I engage in various activities aiming for a healthy sharing culture where we help each other and grow together.

Author of: Core JavaScript

YouTube Channel: FE Jaenam

Articles and Interview Videos:

More

Curriculum

All

42 lectures ∙ (10hr 35min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

8 reviews

5.0

8 reviews

  • eddie85님의 프로필 이미지
    eddie85

    Reviews 8

    Average Rating 5.0

    5

    100% enrolled

    This lecture helped me understand how and based on what criteria to utilize browsers, HTML, React, and Vanilla when developing UI. Additionally, it was very helpful to see the overall flow when developing UI while watching the lecture.

    • wonse님의 프로필 이미지
      wonse

      Reviews 6

      Average Rating 5.0

      5

      7% enrolled

      It was a lecture that I could concentrate better because it felt like I was communicating with the students rather than just conveying information!! I also like that there is a part that implements it in a vanilla JavaScript version 👍

      • jaenam
        Instructor

        Thank you, Wonse! Aren't the studies and videos a little different? Haha

    • tladud1125661님의 프로필 이미지
      tladud1125661

      Reviews 2

      Average Rating 5.0

      5

      31% enrolled

      It helps a lot in UI design.

      • zimablue14님의 프로필 이미지
        zimablue14

        Reviews 14

        Average Rating 4.4

        5

        100% enrolled

        I wish the course duration was a little longer, but the content is 100%.

        • withkey님의 프로필 이미지
          withkey

          Reviews 3

          Average Rating 5.0

          5

          32% enrolled

          Problems that I had been struggling with for months while building the design system, especially problems with headless and compound, were all solved in Section 7. Especially in the part where generics are used in createContext... I felt a thrill. 🫨 Starting from Core JavaScript, various Effective TypeScripts, React official documentation study, and even component lectures... Thank you so much for the great lectures and materials. 😭👍

          • jaenam
            Instructor

            I don't know what to do with all the praise 😅 I'm glad it was helpful, and I'll continue to work hard to provide more fun and useful content in the future!

        jaenam's other courses

        Check out other courses by the instructor!

        Similar courses

        Explore other courses in the same field!

        25% off for new members

        $43.90

        25%

        $53.90