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

/

Front-end

Everything About Web Frontend Portfolio - Intensive Workshop from Topic Selection to Real Deployment!

A world that only hires experienced, a rookie's sole weapon - a distinct 'personal' portfolio! Essential guide for new developers, showcasing skills with projects reflecting industry needs.

9 learners are taking this course

  • taehoon
개발자포트폴리오
HTML/CSS
React
Git
Portfolio
Next.js

What you will learn!

  • Recruiter's View on Portfolio Structuring

  • Portfolio Topic and Planning Methods

  • The full process of designing and implementing a real project using React and Next.js

  • Core Principles of Mobile Responsiveness and Responsive UI Implementation

  • How to organize Git commit logs professionally


"React Todo App? I've seen hundreds of them already."

A recruiter's browser tab is always full of portfolios,
There are only a handful of projects that click through to the end.


It's more like a stack of sticky notes
I'm curious about 'why and how this feature was implemented'.


CS major, dozens of side projects?
It's a nice option to have, but not realistically feasible for newbies .


Ultimately, you just have to prove, "Can I trust this person with the job?"


This course will create just that certificate .
Topic selection → Practical coding → Distribution → (Optional) Review & Mentoring Up to 50% discount,
Gather only the essentials you need before getting a job
Complete your portfolio to be placed on the 'Pass Table'.


All About Web Front-End Portfolio

This course will help you build your own portfolio to secure a job as a web front-end developer. It covers the entire process , from topic selection guidance to practical training and portfolio reviews . It doesn't simply convey concepts or offer vague suggestions like, "This should be enough."

I've been a software engineer in the industry for over 15 years, primarily working as a web front-end developer. Having reviewed hundreds of resumes and conducted numerous job interviews myself , I know what hiring managers look for in new developers.
Beyond my experience as a current employee, I have also gained a lot of experience with the current state of new developers entering the actual job market and their concerns through university lectures, numerous mentoring sessions, and boot camp classes .
The biggest problem I felt was a lack of direction . Especially with recent advancements in AI, including ChatGPT, I believe many people are increasingly concerned about how to approach their job search.
This course is designed to give you clear direction and help you achieve your goals.


The lecture is structured around three axes.

  1. Finding direction

    • Why is a portfolio important?

    • Topic and technology selection strategies that work from a business perspective

  2. Real production

    • We will practice the entire process from project design → coding → deployment.

    • Experience the practical workflow, including Git commit and deployment automation.

  3. Final Inspection & Optional Review

    • Provides a review guide and checklist to help you check the quality yourself after completion.

    • (Optional) Apply for knowledge sharing feedback & mentoring with a 50% discount coupon for student-only portfolio reviews

This is not a lecture that ends with just attending the class.
We'll help you create a portfolio that works through practice, self-check it with a checklist, and even connect you with reviews from discounted knowledge sharers, if needed. We'll be with you every step of the way until your portfolio reaches the acceptance table .


Portfolio Practice Project Preview

Screenshot of the Practice Portfolio Landing Page

Project website: https://apple-game-portfolio.vercel.app/

GitHub repository: https://github.com/panarch/apple-game-portfolio

We put a lot of thought into structuring the course to the appropriate level of difficulty. While it's problematic if the practical portfolio project is too simple, it's also problematic if it's too demanding for a junior. Therefore, we eliminated unnecessary elements and included only the essential content.

Based on my own standards and the opinions of those around me who are currently working, I have compiled the following.

The practical projects are designed to be " at least a little more challenging " than what's expected of a new web front-end developer. In other words, if you can develop a portfolio at the level of the practical projects covered in this course, you'll be fully prepared for the job market. We've prepared these as a reference point for you to use as a starting point when developing your own portfolio projects.

In the practical class, you don't just write code; you learn how to divide the code into certain parts and even do Git commits as part of the practice, building them up one by one .

I recommend this to these people

  • Anyone who wants to start a career as a web front-end developer

  • Those who want to create a portfolio that can pass the exam based on actual working standards, not theory.

  • Those who need a portfolio that clearly shows the core, rather than using various tools and libraries

  • Anyone who wants to be competitive in the developer recruitment market


After class

  • You will be able to build a portfolio that highlights the "problem-solving skills" expected in the field.

  • Gain experience in completing a Next.js-based project from start to deployment.

  • You will be able to plan and develop a portfolio of a clear level that will be recognized by actual professionals.


  • You will be able to acquire the basics of HTML/CSS and JavaScript.


  • (Optional) You can apply for additional knowledge sharer feedback & mentoring with a 50% discount coupon for a 1:1 portfolio review exclusively for students.

.


Early Bird Course Review Event (First 20 people)

The first 20 people to leave a review after taking the class

We offer one-time free career mentoring .



Features of this course

  • Provides concrete portfolio examples based on clear standards and practical experience from current professionals.

  • Step-by-step practical training that doesn't end with theory, but leads to the completion of an actual project.

  • Practical training structure reflecting the realities of the job market and the skills required in the field

  • A project designed around " problem-solving skills " rather than fragmented knowledge that can be easily replaced by AI.


Introducing the Knowledge Sharer - Taehoon Moon


Since 2010, when I was developing web applications using Internet Explorer 6 and jQuery, I have accumulated over 15 years of diverse practical development experience in games, fintech, entertainment, and domestic and international startups .
I have experience in web front-end, back-end, and mobile (React Native) development, and have handled all processes from planning to deployment of actual services.

As the maintainer of Svelte and React, as well as an open source database project called GlueSQL , he won the grand prize at the 2020 Open Source Developer Competition and has continued his open source activities since then.

  • He runs a YouTube channel (2.7k subscribers) where he shares knowledge about web front-end development, vanilla JS game development, and more.

  • Experience in teaching and mentoring at boot camps , and numerous university lectures (Git, open source)

  • Open Source Contribution Academy Mentor (2021-2023)

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

Do you have any questions?

Q. Can non-majors and beginners follow along?

If you have a basic understanding of HTML, CSS, JavaScript, and React, you'll be able to follow along. While we won't be explaining each theory in detail in the practical classes, we've prepared a structured approach that will allow you to learn and follow along step by step.

I imagine it can be difficult to determine which technical elements are important for your portfolio. While it's beneficial to learn a lot of fragmented knowledge, the time and opportunity costs associated with such learning must be considered. Furthermore , AI has significantly reduced the importance of fragmented knowledge, such as simple experience using various libraries .
This practical course focuses on demonstrating the applicant's development skills, eliminating unnecessary fragmented knowledge elements as much as possible. No prior knowledge of other complex libraries is required.

Q. Is there any separate support if I complete my portfolio?

Yes. You can self-assess using the checklist and guide included in the course. If you'd like additional feedback, you can request a 1:1 portfolio review exclusively for students at a 50% discount (including a mentoring discount coupon).

Q. Can I get the practice class code change history and image resources used?

For each practical lesson, we've added a code snapshot to your class notes at the end of the lesson so you can check it out.

Additionally, if there are any resources used in the class, I have added links to them as well.

The practical class proceeds by building up Git commits one by one.

You can check the full history at the link below.

https://github.com/panarch/apple-game-portfolio/commits/main/


Example of class notes.

Things to note before taking the course

Practice environment

  • Operating System: Supports all major OS including Windows, macOS, and Linux

  • Tools: Basic development environment required, including Git, Next.js, and React.

  • In the practical lecture, we will use an editor called https://zed.dev/ , but you can also use VSCode or another editor of your choice.

Learning Materials

Player Knowledge and Precautions

  • Basic knowledge of HTML, CSS, JavaScript, and React is required.


Recommended for
these people

Who is this course right for?

  • People who want to make their own portfolio that works in real job interviews.

  • Those looking to take on a real-world project using React and Next.js.

  • For those who want to create their own truly unique portfolio, beyond simple clone coding.

  • Those who want to enhance their coding expression to design and implement personal projects.

Need to know before starting?

  • HTML, CSS, JavaScript and React basic knowledge

Hello
This is

2010년, Internet Explorer 6와 jQuery 환경에서 웹을 개발하던 시절부터 지금까지 게임, 핀테크, 엔터테인먼트, 국내외 스타트업을 거치며 15년 이상 다양한 실무 개발 경험을 쌓아왔습니다.
웹 프론트엔드를 중심으로, 백엔드와 모바일(React Native) 개발까지 두루 경험하며 실제 서비스의 기획부터 배포까지 모든 과정을 다뤄왔습니다.

Svelte와 React는 물론, GlueSQL이라는 오픈소스 데이터베이스 프로젝트의 메인테이너로 활동하며
2020년 공개SW 개발자대회 대상을 수상했고, 이후에도 꾸준히 오픈소스 활동을 이어오고 있습니다.

  • 유튜브 채널 운영 (구독자 2.7k) – 웹 프론트엔드 개발, 바닐라 JS 게임 만들기 등 지식 공유

  • 부트캠프에서의 강의 및 멘토링 경험, 대학 특강(Git, 오픈소스) 다수 진행

  • 오픈소스 컨트리뷰션 아카데미 멘토 (2021~2023)

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

Curriculum

All

62 lectures ∙ (8hr 12min)

Published: 
Last updated: 

Reviews

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

$93.50

Similar courses

Explore other courses in the same field!