강의

멘토링

로드맵

Inflearn brand logo image
NEW
Programming

/

Web Development

Success-Driven Web Frontend Portfolio 2025 (Practical Application)

This course is a hands-on program where you learn the core syntax and applications of frontend web programming and apply them to actual portfolio creation. Learners will progressively master everything from basic syntax of HTML, CSS, and JavaScript to the latest frontend technologies, directly experiencing the process of implementing web interfaces and handling dynamic functionality. Additionally, through various examples frequently used in practice, you can naturally acquire efficient coding techniques and real development workflows. Through this course, learners can go beyond simple syntax memorization to understand the connected workflow from web page planning–design–implementation, and based on this, 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 wanting 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.

합격을 부르는 웹 프론트엔드 포트폴리오 2025 (활용)

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

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

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

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

이런 내용을 배워요

🔹 섹션 1 : Part.1 템플릿 1

이 섹션은 하나의 템플릿 프로젝트를 완성하면서 프론트엔드 핵심 기술을 응용하는 과정을 다룹니다.

  • 헤더 인터랙션 구현을 통해 반응형 네비게이션과 다양한 UI 애니메이션을 학습합니다.

  • 슬라이더 기능을 SwiperJS 라이브러리를 활용해 직접 구현하며, 사용자 경험을 높이는 다이나믹한 페이지 전환 효과를 익힙니다.

  • 패럴렉스 구현을 통해 스크롤 기반의 입체적 효과를 실습, 실제 포트폴리오에 활용 가능한 수준의 인터랙션을 제작합니다.

  • React 환경에서 프로젝트를 구성하고, GSAP·SwiperJS 스크립트 작성을 연계하여 최신 프론트엔드 애니메이션과 UI 효과를 반영합니다.

  • 마지막으로 컴포넌트 구조 설계, 데이터 바인딩, Redux 상태관리를 적용해 실무와 동일한 방식으로 데이터를 다루는 방법을 익힙니다.

👉 이 과정을 통해 학습자는 단순히 기능 구현을 넘어서 현업 수준의 코드 구조와 상태관리 패턴까지 경험할 수 있습니다.

🔹 섹션 2 : Part.2 템플릿 2 (完)

두 번째 섹션은 보다 확장된 템플릿 프로젝트 2를 완성하며, 실무형 포트폴리오를 완결하는 단계입니다.

  • 헤더 인터랙션 구현(1~3)으로 다양한 UI 패턴을 경험하며, 스크롤·클릭·마우스오버 등 다양한 이벤트 처리 방식을 다룹니다.

  • 슬라이더와 패럴렉스 효과를 단계별로 구현해, 풍부한 사용자 경험(UX)을 제공하는 페이지를 설계합니다.

  • 컴포넌트 구조 작성(1~2)을 통해 복잡한 페이지도 모듈 단위로 나누어 효율적으로 관리할 수 있는 방법을 익히고,

  • UI 및 SwiperJS 스크립트 작성으로 라이브러리를 프로젝트에 최적화하는 방법을 실습합니다.

  • 이어서 데이터 바인딩과 Redux 상태관리를 학습해 규모 있는 프로젝트에서도 안정적으로 데이터 흐름을 제어할 수 있습니다.

  • 마지막으로 프로젝트 빌드 및 업로드 과정을 다루며, 실제 포트폴리오 사이트를 배포하는 전 과정을 경험합니다.

👉 이 섹션은 학습자가 단순한 실습을 넘어서, 완성도 높은 포트폴리오 프로젝트를 직접 배포 가능한 형태로 완성할 수 있도록 이끌어 줍니다.

수강 전 참고 사항

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

학습 자료

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

Recommended for
these people

Who is this course right for?

  • Students who are learning the basics of JavaScript

  • A web developer who wants to learn JavaScript libraries

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

Hello
This is

8,256,107

Learners

6,094

Reviews

4.6

Rating

278

Courses

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

Curriculum

All

28 lectures ∙ (12hr 59min)

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

$80,080.00

30%

$88.00

usefulit's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!