강의

멘토링

로드맵

Inflearn brand logo image
NEW
Programming

/

Web Development

Success-Driven Web Frontend Portfolio 2025 (Basics)

This course is a hands-on program focused on learning the core syntax and application methods of frontend web programming and applying them to actual portfolio creation. Learners will progressively master everything from basic syntax including HTML, CSS, and JavaScript to the latest frontend technologies, directly experiencing the process of web interface implementation and dynamic functionality handling. Additionally, through various examples frequently used in practice, learners can naturally acquire efficient coding techniques and real development workflows. Through this course, learners will move beyond simple syntax memorization to understand the connected workflow from web page planning–design–implementation, and based on this understanding, they can complete their own portfolio. Furthermore, this course will serve as a solid stepping stone for growing into a frontend developer, providing great help as an introductory course for learners new to web development and as a practical supplementary course for those looking to build hands-on experience.

2 learners are taking this course

  • usefulit
frontend

What you will learn!

  • This is the process of implementing UI by utilizing various frontend web programming syntax.

  • Complete your portfolio step by step through the given examples via online classes.

눈길을 끄는 간결한 제목을 작성해보세요

본 과정은 프론트엔드 웹 프로그래밍의 핵심 문법과 활용법을 학습하고, 이를 실제 포트폴리오 제작에 적용해 보는 실습 중심 강좌입니다.

학습자는 HTML, CSS, JavaScript 등 기초 문법부터 최신 프론트엔드 기술까지 단계적으로 익히며, 웹 화면 구현과 동적 기능 처리 과정을 직접 경험하게 됩니다. 또한 실무에서 자주 활용되는 다양한 예제를 통해 효율적인 코드 작성법실제 개발 흐름을 자연스럽게 습득할 수 있습니다.

이 과정을 통해 학습자는 단순한 문법 암기를 넘어, 웹 페이지 기획–디자인–구현까지 연결된 작업 흐름을 이해할 수 있으며, 이를 기반으로 자신만의 포트폴리오를 완성할 수 있습니다.

나아가 본 과정은 프론트엔드 개발자로 성장하기 위한 확실한 디딤돌이 될 것이며, 웹 개발을 처음 접하는 학습자에게는 입문 과정으로, 실무 경험을 쌓고 싶은 학습자에게는 실전 보완 과정으로 큰 도움이 될 것입니다.

이런 내용을 배워요

🔹 섹션 1 : Part.1 JavaScript

첫 번째 섹션은 웹 프론트엔드의 기본이 되는 JavaScript 기초를 다룹니다.

  • 변수와 연산, 기본 문법을 이해하며 프로그래밍의 토대를 쌓고,

  • 이벤트 처리를 통해 사용자와 상호작용하는 웹 기능을 직접 구현해 봅니다.

  • DOM 명령어 학습을 통해 HTML 요소를 동적으로 제어하고, 실제 웹 페이지 구조를 다루는 법을 배웁니다.

  • 이어서 SwiperJS 라이브러리 활용법을 배우며 메인 슬라이더와 멀티 슬라이더를 구현, 실무에서 자주 쓰이는 인터랙션을 손쉽게 만들 수 있게 됩니다.

👉 이 과정은 “웹을 움직이게 하는” 핵심 기술을 배우는 단계로, 포트폴리오 제작의 기초를 다질 수 있습니다.

🔹 섹션 2 : Part.2 GSAP Library

두 번째 섹션은 최신 프론트엔드 애니메이션 라이브러리인 GSAP을 집중적으로 학습합니다.

  • GSAP의 기본 사용법과 타임라인 개념을 익혀 복잡한 애니메이션을 손쉽게 구현할 수 있습니다.

  • 이어서 패럴렉스(Parallax) 페이지 제작을 단계별로 실습하며, 스크롤 기반 인터랙션과 다층적 시각 효과를 포트폴리오에 적용하는 방법을 배웁니다.

  • GSAP을 활용하면 단순히 정적인 웹 페이지가 아닌, 시각적 완성도와 사용자 경험(UX)을 높인 인터랙티브 웹사이트 제작이 가능해집니다.

👉 이 섹션은 포트폴리오에서 눈에 띄는 애니메이션 효과를 구현하고 싶은 학습자에게 큰 강점이 됩니다.

🔹 섹션 3 : Part.3 React

마지막 섹션은 현재 가장 많이 활용되는 프론트엔드 프레임워크 React를 학습합니다.

  • React 설치와 기본 문법, 생명주기 함수 등 핵심 개념을 익히며 컴포넌트 기반 개발 방식에 적응합니다.

  • State 전역변수와 map 함수를 통해 데이터 처리 및 반복 렌더링을 실습하고,

  • 함수형 컴포넌트, 데이터 바인딩, 라우팅 구현 등 실제 프로젝트에서 사용하는 기법을 단계별로 배우게 됩니다.

  • 또한 React 환경에서 SwiperJS를 적용하여 동적인 슬라이더까지 구현하면서, 단순 기능 학습을 넘어 포트폴리오에 바로 적용 가능한 실전 예제를 경험합니다.

👉 이 섹션은 학습자가 단순히 HTML/CSS/JS를 넘어서 최신 프론트엔드 프레임워크 기반의 프로젝트 구현 능력을 갖추도록 이끌어 줍니다.

수강 전 참고 사항

이 강의는 지식공유자의 질문/답변을 제공하지 않습니다

학습 자료

주차별 교안이 pdf파일로 제공됩니다

Recommended for
these people

Who is this course right for?

  • Students who are learning the basics of JavaScript

  • Web publishers or web developers who want to improve their coding skills in practical work

  • A web developer who wants to learn JavaScript libraries

Hello
This is

8,256,106

Learners

6,094

Reviews

4.6

Rating

278

Courses

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

Curriculum

All

28 lectures ∙ (11hr 58min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

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

Limited time deal ends in 2 days

$77,000.00

30%

$84.70

usefulit's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!