초보자를 위한 HTML 기초
조은
HTML은 많이 쉽다고 이해하고 있지만 알고 보면 어려운 내용이 많습니다. 이 강의에서는 HTML의 '어려운 부분'을 쉽게 풀어 이야기하는 데에 노력하고 있습니다. HTML을 제대로 알아봅시다.
초급
HTML/CSS
"経験者しか採用しない世の中、新人の武器はただ一つ - 差別化された「個人」ポートフォリオ!" 現場のニーズを取り入れたプロジェクトで実力を見せる新人開発者の必須ガイド。
採用担当者の視点から見たポートフォリオ構成方法
ポートフォリオ向けのテーマ・企画整理方法
ReactとNext.jsによる実際のプロジェクト設計・実装の全過程
モバイル対応とレスポンシブUIのコア原則
Gitコミットログを実務スタイルで整理する方法
採用担当者のブラウザタブはいつもポートフォリオでいっぱいですが、
最後までクリックされるプロジェクトは手に挙げられます。
どんなスタックをダックジドック付けしたのかより
「この機能をなぜ、どのように実装したのか」が気になります。
CS専攻、何十ものサイドプロジェクト?
あればいいけど新入にとって現実的に不可能なオプションですよね。
結局「この人に仕事を任せてもいいかな?」を証明するだけです。
この講義はまさにその証明書を作成します。
テーマ選定→本番コーディング→配布→(選択)レビュー&メンタリング50%割引特典まで、
就職前に必ず必要な核心だけを集めて
「合格テーブル」の上に掲載するポートフォリオを完成させます。
このレッスンでは、Webフロントエンド開発者として就職するための独自のポートフォリオを持つことができます。テーマ選定ガイドから、実習授業、ポートフォリオレビューまで全コースを盛り込みました。単に概念を伝えたり、「これほどになるでしょう」のようなあいまいな話をしません。
私は15年以上のビジネスでソフトウェアエンジニアとして活動してきましたが、主にWebフロントエンドの開発者としてキャリアを築きました。実際に数百件の履歴書を検討して多数の採用インタビューを直接進めたため、求人する立場から新入開発者にどんな能力を期待するか知っています。
単に現職者としての経験に加えて、大学特講や多数のメンタリング、そしてブートキャンプ講義を通じて実際の採用市場に入ってくる新開発開発者の方の現状と、どんな悩みをお持ちの方も多く経験しました。
そのような私が感じた最大の問題は、まさに「方向性の欠如」でした。特に最近はChatGPTをはじめとするAIの発展のため、さらに求職準備をどのような方向にすべきかについて悩みが多いと思います。
この講義はあなたに明確な方向性を与え、その目標を達成するのを助ける講義です。
方向をつかむ
ポートフォリオがなぜ重要なのか?
現業観点から通じるテーマ・技術選択戦略
実戦制作
プロジェクト設計→コーディング→展開まで全過程を一緒に実習
Gitコミット・配布自動化など実務フローそのまま経験
最終チェック&オプションレビュー
完成後自ら品質をチェックできるレビューガイド・チェックリスト提供
(オプション)受講生専用ポートフォリオレビュー50%割引クーポンで知識共有者からのフィードバック&メンター申請
授業だけを聞いて終わる講義ではありません。
実習で動作するポートフォリオを作成し、チェックリストで自己チェックした後、必要に応じて割引された知識共有者のレビューまでつなげます。あなたのポートフォリオが合格表に上がるまで、一歩ずつまとめてください。
プロジェクトのウェブサイト: https://apple-game-portfolio.vercel.app/
GitHubリポジトリ: https://github.com/panarch/apple-game-portfolio
適切な難易度で構成するために多くの悩みをしました。実習ポートフォリオプロジェクトが簡単すぎても問題ですが、ジュニアに期待するに過ぎないスペックを備えたプロジェクトも問題になります。そこで実習に不要な部分はできるだけ排除し、必ず必要な内容だけを込めました。
私の基準では、そして周辺の現職者の意見を総合しました。
実践プロジェクトは、新Webフロントエンド開発者に期待する「最小限から少し難しいレベル」の難易度で構成しました。つまり、この講義で取り上げる実践プロジェクトレベルのポートフォリオを直接開発できるようになれば、十分に求職準備ができたといえます。自分のポートフォリオプロジェクトを進める際に基準点として参考にできるように準備しました。
実習授業では単にコードだけを書くのではなく、どの程度分量でコードを分けるべきか、 Git commitも実習の過程で一つずつ直接積み重ねながら進めます。
Webフロントエンド開発者として確かにキャリアを始めたい方
理論ではなく、実際の現職者基準で合格可能なレベルのポートフォリオを作りたい方
さまざまなツールやライブラリを書くのではなく、コアを明確に示すポートフォリオが必要な方
開発者採用市場で競争力を整えたい方
現業で期待する「問題解決能力」を強調したポートフォリオを構成できるようになります。
Next.jsベースのプロジェクトを最初から展開まで経験し、プロジェクトの完成の経験を得ます。
実際の現職者が認めるほどの明確なレベルのポートフォリオを企画して開発できるようになります。
HTML/CSS、JavaScript 基本機を装備できるようになります。
(オプション)受講生のみ1:1ポートフォリオレビュー50%割引クーポンで知識共有者のフィードバック&メンタリングを追加申請できます。
。
受講後受講評を残した先着順20分に
無料キャリアメンタリングを1回ご利用いただけます。
現職者の明確な基準と実践を通じて具体的なポートフォリオの例を提供
理論で終わらず、実際のプロジェクト完成まで導く段階別実習
採用市場の現実と現業で求める能力を反映した実習構成
AIで簡単に置き換え可能な断片的な知識ではなく、「問題解決能力」を中心に設計されたプロジェクト
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. ポートフォリオを完成すれば別にサポートはありますか?
はい。講義の中に含まれているチェックリストとガイドを通して自分でチェックすることができます。追加のフィードバックが必要な場合は、受講生専用の1:1ポートフォリオレビューを50%割引で別途申請できます。 (メンタリング割引クーポン提供)
Q. 練習レッスンコードの変更履歴と使用される画像リソースを受け取ることができますか?
各実習授業ごとに、授業終了時点のコードスナップショットを確認できるように授業ノートに追加しておきます。
また、そのクラスで使用するリソースがある場合は、関連リンクも追加されています。
実習授業はGit commitを一つ一つ一緒に積み重ねながら進行します。
完全な履歴は下のリンクで確認できます。
https://github.com/panarch/apple-game-portfolio/commits/main/
クラスノートの例。
オペレーティングシステム:Windows、macOS、Linuxなど、すべての主要なOSをサポート
練習ツール:Git、Next.js、Reactなどの基本的な開発環境が必要です。
実習講義ではhttps://zed.dev/というエディタを使用しますが、VSCodeなど自由に使用しても構いません。
練習ポートフォリオのウェブサイト: https://apple-game-portfolio.vercel.app/
ソースコードなどすべての実習資料を公開提供します。
HTML、CSS、JavaScript、Reactの基本知識が必要です。
学習対象は
誰でしょう?
実際の採用現場で通じるポートフォリオを自分で作ってみたい方
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. 講座紹介
06:52
2. なぜポートフォリオが重要なのか
02:16
3. 採用担当者の視点から見る履歴書
03:30
4. 実際の履歴書レビュー実演 (デモ)
04:41
20. 実習講義を見る方法
04:27
22. 基本ページ構成要素を追加する
08:17
24. 色変数を設定する
03:19
25. フォントの適用
04:47
26. ランディングページUI作成
18:18
28. ランキングページUI作成
17:55
34. りんご収集時のスコア反映
03:00
同じ分野の他の講座を見てみましょう!