inflearn logo
inflearn logo

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.

10 learners are taking this course

Level Basic

Course period Unlimited

HTML/CSS
HTML/CSS
React
React
Git
Git
Portfolio
Portfolio
Next.js
Next.js
HTML/CSS
HTML/CSS
React
React
Git
Git
Portfolio
Portfolio
Next.js
Next.js
날개 달린 동전

Recommend Course to grow and earn commission!

날개 달린 동전

Marketing Partners

Recommend Course to grow and earn commission!

What you will gain after the course

  • 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 taehoon

Since 2010, starting from the era of developing for Internet Explorer 6 and jQuery, I have built over 15 years of diverse hands-on development experience across gaming, fintech, entertainment, and both domestic and international startups.
With a focus on web frontend, I have experience across backend and mobile (React Native) development, handling the entire process from service planning to deployment.

I have experience with Svelte and React, and as a maintainer of the open-source database project GlueSQL,
I won the Grand Prize at the 2020 OSS (Open Source Software) Developer Challenge and have continued my active involvement in open source ever since.

  • Operating a YouTube channel (2.7k subscribers) – Sharing knowledge on web frontend development, building Vanilla JS games, etc.

  • Experience in lecturing and mentoring at bootcamps, and conducted numerous special 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

More

Curriculum

All

62 lectures ∙ (8hr 12min)

Published: 
Last updated: 

Reviews

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

Similar courses

Explore other courses in the same field!

$93.50