Front-end

ウェブフロントエンドポートフォリオのすべて - テーマ選定から実戦デプロイまで圧縮実習講義！

「経験者しか採用しない世の中、新人の武器はただ一つ - 差別化された『個人』ポートフォリオ！」現場のニーズを盛り込んだプロジェクトで実力を見せる新人開発者の必須ガイド。

9名が受講中です。

taehoon

개발자포트폴리오

HTML/CSS

React

Portfolio

Next.js

こんなことが学べます

採用担当者の視点から見たポートフォリオの構成方法
ポートフォリオのテーマ設定と企画の整理方法
ReactとNext.jsで実際のプロジェクトを設計し実装する全過程
モバイル対応とレスポンシブUI実装の核心原理
Git コミットログを実務スタイルで整理する方法

「React Todo App？すでに何百もの見ています。」

採用担当者のブラウザタブはいつもポートフォリオでいっぱいですが、
最後までクリックされるプロジェクトは手に挙げられます。

どんなスタックをダックジドック付けしたのかより
「この機能をなぜ、どのように実装したのか」が気になります。

CS専攻、何十ものサイドプロジェクト？
あればいいけど新入にとって現実的に不可能なオプションですよね。

結局「この人に仕事を任せてもいいかな？」を証明するだけです。

この講義はまさにその証明書を作成します。
テーマ選定→本番コーディング→配布→（選択）レビュー＆メンタリング50％割引特典まで、
就職前に必ず必要な核心だけを集めて
「合格テーブル」の上に掲載するポートフォリオを完成させます。

Webフロントエンドポートフォリオのすべて

このレッスンでは、Webフロントエンド開発者として就職するための独自のポートフォリオを持つことができます。テーマ選定ガイドから、実習授業、ポートフォリオレビューまで全コースを盛り込みました。単に概念を伝えたり、「これほどになるでしょう」のようなあいまいな話をしません。

私は15年以上のビジネスでソフトウェアエンジニアとして活動してきましたが、主にWebフロントエンドの開発者としてキャリアを築きました。実際に数百件の履歴書を検討して多数の採用インタビューを直接進めたため、求人する立場から新入開発者にどんな能力を期待するか知っています。
単に現職者としての経験に加えて、大学特講や多数のメンタリング、そしてブートキャンプ講義を通じて実際の採用市場に入ってくる新開発開発者の方の現状と、どんな悩みをお持ちの方も多く経験しました。
そのような私が感じた最大の問題は、まさに「方向性の欠如」でした。特に最近はChatGPTをはじめとするAIの発展のため、さらに求職準備をどのような方向にすべきかについて悩みが多いと思います。
この講義はあなたに明確な方向性を与え、その目標を達成するのを助ける講義です。

講義は3つの軸で構成されています。

方向をつかむ
- ポートフォリオがなぜ重要なのか？
- 現業観点から通じるテーマ・技術選択戦略
実戦制作
- プロジェクト設計→コーディング→展開まで全過程を一緒に実習
- Gitコミット・配布自動化など実務フローそのまま経験
最終チェック＆オプションレビュー
- 完成後自ら品質をチェックできるレビューガイド・チェックリスト提供
- （オプション）受講生専用ポートフォリオレビュー50％割引クーポンで知識共有者からのフィードバック＆メンター申請

プロジェクトのウェブサイト: https://apple-game-portfolio.vercel.app/

GitHubリポジトリ： https://github.com/panarch/apple-game-portfolio

適切な難易度で構成するために多くの悩みをしました。実習ポートフォリオプロジェクトが簡単すぎても問題ですが、ジュニアに期待するに過ぎないスペックを備えたプロジェクトも問題になります。そこで実習に不要な部分はできるだけ排除し、必ず必要な内容だけを込めました。

私の基準では、そして周辺の現職者の意見を総合しました。

実践プロジェクトは、新Webフロントエンド開発者に期待する「最小限から少し難しいレベル」の難易度で構成しました。つまり、この講義で取り上げる実践プロジェクトレベルのポートフォリオを直接開発できるようになれば、十分に求職準備ができたといえます。自分のポートフォリオプロジェクトを進める際に基準点として参考にできるように準備しました。

実習授業では単にコードだけを書くのではなく、どの程度分量でコードを分けるべきか、 Git commitも実習の過程で一つずつ直接積み重ねながら進めます。

現業で期待する「問題解決能力」を強調したポートフォリオを構成できるようになります。
Next.jsベースのプロジェクトを最初から展開まで経験し、プロジェクトの完成の経験を得ます。
実際の現職者が認めるほどの明確なレベルのポートフォリオを企画して開発できるようになります。
HTML/CSS、JavaScript 基本機を装備できるようになります。
（オプション）受講生のみ1：1ポートフォリオレビュー50％割引クーポンで知識共有者のフィードバック＆メンタリングを追加申請できます。

2010年、Internet Explorer 6とjQuery環境でWebを開発していた頃から、これまでゲーム、フィンテック、エンターテイメント、国内外のスタートアップを経て、15年以上にわたって様々な実務開発経験を積んできました。
Webフロントエンドを中心に、バックエンドとモバイル（React Native）の開発まで取り組んでおり、実際のサービスの企画から配布まですべてのコースを取り上げてきました。

SvelteとReactはもちろん、 GlueSQLというオープンソースデータベースプロジェクトのメインテナーとして活動し、2020年公開SW開発者大会大賞を受賞し、その後も着実にオープンソース活動も続けています。

YouTubeチャンネル運営（購読者2.7k） – Webフロントエンド開発、バニラJSゲームの作成などの知識を共有
ブートキャンプでの講義やメンタリング経験、大学特講（Git、オープンソース）多数進行
オープンソースコントリビューションアカデミーメンター（2021～2023）

YouTube: https://inf.run/FcBQs

GitHub: https://inf.run/Yxo7h

LinkedIn: https://inf.run/bA1C7

Q. 非専攻者や初心者も従うことができますか？

基本的なHTML、CSS、JavaScript、およびReactについて理解している場合は、十分に従うことができます。実習授業で理論一つ一つを詳細に説明する方式ではありませんが、受講しながら一つずつ学習しながら追って来られるように準備しました。

ポートフォリオでどの技術要素が重要であるかを判断するのは難しいと思います。いくつかのフラグメントの知識をたくさん学ぶのも良いですが、その学習の時間と機会のコストを考慮する必要はありません。そして今では、AIによる以前とは異なり、単純な複数のライブラリ使用経験など、断片的な知識に対する重要度も大幅に低くなりました。
本実習授業では不要な断片知識学習要素を最大限排除し、志願者の開発能力をアピールできるようにする本質に集中します。他の複合ライブラリに関する事前知識は必要ありません。

Q. 練習レッスンコードの変更履歴と使用される画像リソースを受け取ることができますか？

各実習授業ごとに、授業終了時点のコードスナップショットを確認できるように授業ノートに追加しておきます。

また、そのクラスで使用するリソースがある場合は、関連リンクも追加されています。

実習授業はGit commitを一つ一つ一緒に積み重ねながら進行します。

完全な履歴は下のリンクで確認できます。

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

レッスンノートの例。

こんな方に
おすすめです

学習対象は
誰でしょう？

実際の採用現場で通用するポートフォリオをご自身で作成してみたい方
ReactとNext.jsを活用した実践プロジェクトに挑戦したい方
単純なクローンコーディングを越え、真に自分だけのポートフォリオを作りたい方
コードで自分だけのプロジェクトを設計し、実装する表現力を養いたい方

前提知識、
必要でしょうか？

HTML、CSS、JavaScript、Reactの基本知識

こんにちは
です。

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

カリキュラム

全体

62件 ∙ (8時間 12分)

セクション 1．イントロ

6件 ∙ (23分)

セクション 2．ポートフォリオを前にして生じる全ての悩み

6件 ∙ (42分)

7. 非専攻の方もご安心ください
05:35
8. 個人プロジェクト対チームプロジェクト
06:31
9. 開発ブログ、重要でしょうか？
03:32
10. オープンソース貢献経験は役立ちますか？
08:20
11. 「ウェブフロントエンド？それ、もうAIがやってくれる」という言葉、本当なのだろうか？
11:46
12. AI および LLM 活用時注意事項
06:31

セクション 3．ポートフォリオテーマ選定と必須要素

7件 ∙ (33分)

13. 技術スタックの選択 – ReactとNext.jsを選ぶ理由
02:43
14. JavaScript vs TypeScript – どちらを選ぶべきか？
02:51
15. 採用担当者の立場で良いテーマの選び方
05:28
16. ポートフォリオに必須的に含まれるべき技術的要素
08:54
17. Tailwind CSS の現実的な使用状況
03:34
18. 企画段階で検討する事項
05:15
19. 最適なポートフォリオのテーマ選定 – なぜリンゴゲームなのか？
04:41

セクション 4．実践開発過程 - プロジェクト設定・基本UI構成

9件 ∙ (1時間 20分)

セクション 5．実践開発プロセス - りんごゲームメインロジック実装

10件 ∙ (1時間 49分)

セクション 6．実際の開発過程 - ランキングとリプレイ機能の実装

8件 ∙ (1時間 35分)

セクション 7．実際の開発プロセス - レスポンシブデザインの実装

7件 ∙ (1時間 5分)

セクション 8．実際の開発プロセス - プロジェクトのデプロイおよび仕上げ作業

7件 ∙ (29分)

セクション 9．마무리

2件 ∙ (12分)

講座掲載日:

最終更新日:

受講レビュー

まだ十分な評価を受けていない講座です。

みんなの役に立つ受講レビューを書いてください！

￥14,224

似ている講座

同じ分野の他の講座を見てみましょう！

React 완전 끝내기: useHoooooook

김영보

넓고 깊으면서 자세하게 React의 state와 hook을 배울 수 있습니다. React 공식 문서의 95% 이상을 다룹니다. 본 강좌로 React를 끝낼 수 있습니다.

초급

React, JavaScript, DOM

React 완전 끝내기: useHoooooook

김영보

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

웹게임도 만들고, 프론트엔드 웹 개발 스킬도 배우는 1석 3조 수업! 독자적인 아이디어로 JavaScript, CSS, HTML을 활용해 게임을 만들 수 있는 방법을 수업으로 만들었습니다!

초급

인터랙티브 웹, JavaScript, HTML/CSS

웹게임을 만들며 배우는 인터렉티브웹! JAVASCRIPT

깡코딩

따라하며 배우는 웹 게임

John Ahn

이 강의를 통해서 웹 게임을 어떻게 개발해야 하는지 알 수 있습니다.

중급이상

React

따라하며 배우는 웹 게임

John Ahn

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

입문

JavaScript, React, Node.js

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

그랩

네카라쿠배 면접관의 경력기술서 (/feat. 서류합격률 100%)

taesun1114

24년도 서류합격률 100% (/feat. 네카라쿠배삼현슼엘) 본인을 PR 하기 위한 경력기술서 작성법

초급

포트폴리오, 면접

네카라쿠배 면접관의 경력기술서 (/feat. 서류합격률 100%)

taesun1114

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

중급이상

React, react-usememo, 기술면접

부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

애프터캠프

빠른 취업을 위한 프론트엔드 로드맵

양동준

프론트엔드 준비하는데 구체적인 방법과 커리큘럼을 제공합니다. 지속적으로 업데이트 되는 프론트엔드 로드맵 강의 입니다.

입문

면접, 포트폴리오, 온라인 교육

빠른 취업을 위한 프론트엔드 로드맵

양동준

Next.js와 yolov11로 화재감지 시스템 구축하기

ludgi

Next.js, YOLOv11, FastAPI를 활용하여 실시간 화재 감지 시스템을 구축하는 방법을 배웁니다.

초급

Next.js, yolo, Python

Next.js와 yolov11로 화재감지 시스템 구축하기

ludgi

8명의 비전공자는 어떻게 개발자로 취업했을까

앨런(Allen)

8명의 비전공자와 3명의 전공자는 어떻게 개발자로 취업을 했을까요? 그 과정을 아주 상세하고 구체적으로 다룹니다.

입문

면접, 포트폴리오

8명의 비전공자는 어떻게 개발자로 취업했을까

앨런(Allen)

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

Firebase의 SQL버전! Supabase를 통해 Next.js 풀 스택 기초를 마스터 할 수 있어요.!

초급

Next.js, supabase, React

Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)

도도(코딩루팡)

네카라쿠배당토 면접관이 알려주는 디자이너 서류・면접 합격 전략

돌멩이

서류부터 면접까지, 디자이너 취업의 A-Z가 모두 담겨있어요. 어디서도 볼 수 없는 실제 지원자의 면접 과정을 함께 보며 합격률을 높이는 방법을 자세하게 알려드려요.

초급

프로덕트디자인, 면접, 포트폴리오

네카라쿠배당토 면접관이 알려주는 디자이너 서류・면접 합격 전략

돌멩이

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

닭강정

이 강의에서는 React와 FastAPI를 활용해 실시간 투표, 댓글, 좋아요 등의 소셜 기능은 물론, 결제 시스템(카카오페이, 토스페이 등)을 연동해 수익화하는 방법까지 단계별로 실습합니다.

중급이상

React, MySQL, Docker

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

닭강정

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

초급

React, Next.js, expo

웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

코드캠프

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤

초등학생 코딩교육부터 시작하여 IT소프트웨어학과의 고등학생, 컴공과 대학생, 비전공자인 취준생을 대상으로 15년 넘게 코딩교육에 전념해온 현직 스타강사 영코디 킴쌤의 쉽고 재미있는 코딩강의를 이제 오프라인 뿐만 아니라 온라인에서도 만나실 수 있습니다. 500여명이 넘는 프론트엔드, 백엔드, 풀스택, 웹 개발자를 배출해온 영코디 킴쌤과 함께라면 당신의 개발자 꿈도 곧 현실이 됩니다!

입문

HTML/CSS, 웹 디자인, 클론코딩

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

영코디 킴쌤