新しいスキルを初めて学ぶときは、いつもわくわくしますよね。 特にコーディングは。
しかしながら、練習しないと、学んだことのほとんどを忘れてしまうのです。 したがって、ある時点で、学んだことを実践する必要があることに気づくのです。
そこで登場するのがプロジェクトです。 プロジェクトは、学習したことを実践するための良い方法です。 そして、あなたはいくつかのプロジェクトに取り組みたいと思っているはずです。 プロジェクトを使って、自分が取り組んだことを発表することができます。
新人として、現在の自分の知識レベルに合ったプロジェクトを選ぶのは大変なことでしょう。 プロジェクトを選ぶかもしれません。 そうすると、そのプロジェクトは現在のノウハウでは達成できないほど大きなものになってしまう。
HTML と CSS のみに限定された知識であっても、適切なプロジェクトをいくつか見つけましたので、ご紹介します。 これらのプロジェクトは、人気のある学習用 Web サイトで利用でき、あなたが取り組む内容に関する追加情報を見つけることができます。
1. トリビュートページ
あなたが尊敬する人の賛辞を書いてWebページとして公開します。 このプロジェクトでは、画像、リンク、リスト、段落を追加する作業を行います。 このプロジェクトは、作成するためにHTMLの知識が必要です。
2 アンケートフォーム
フォームはオンラインでデータを収集する際に便利なものです。 このプロジェクトは主に、あらゆる種類の入力に関するスキルをテストします。 これは、フォームとWebページの構造化に関するあなたの知識をテストします。 フォームがデータを送信する必要はありません。
これは、トリビュートページから構築されます。 このプロジェクトは、作成するためにhtml/html5の知識を必要とします。
3. プロダクトランディングページの作成
This will test your knowledge of both HTML and CSS. 列を作成し、列内のアイテムを揃える練習をする必要があります。 また、画像の基本的な編集（トリミングやサイズ変更など）を行い、Webページ用の完璧な画像を作成する必要があります。 技術文書ページを構築する
これにはHTML CSSとbootstrapまたはJavaScriptのいくつかの知識が必要でしょう。 基本的な考え方は、左側のトピックをクリックすると、右側にそのコンテンツがロードされます。
私は現在このプロジェクトを試みており、完了したら最終プロジェクトを投稿する予定です。 このプロジェクトは、HTMLとCSSで学んだすべてのスキルを実践することになります。 また、画像のトリミングやリサイズを行う方法も知っておく必要があります。 もし、オプションがなければ、Gimpを使用してください。 無料のオープンソースで、WindowsとLinuxで利用できます。
ポートフォリオを急いで作りたい場合は、既製のテーマ/テンプレートを使ってオンラインポートフォリオを作るというBrianの記事を読むとよいでしょう。
6. Google.com ページ
はい、あなたは何度も見たことがありますね。 しかし、あなたはそれを再現することができますか。 アイコン、google のロゴ、テキスト ボックス、および 2 つのボタンがあるシンプルな google.com のページです。 google.comのページとそっくりなものを作ることができます。 このプロジェクトでは、google.com のように機能するのではなく、google.com のように見えるようにします。
HTML と CSS の両方を知っている必要があります。com Search result page
あなたは、Google検索結果のフォーマットでページを作成することになります。 ページには、通常の 10 件の検索結果と、下部にある次のページへのナビゲーションが必要です。
これは、上記の基本的な google.com ページからのアップグレードです。
また、ページを多少見栄え良くする必要がありますが、機能性は今すぐ気にする必要はありません。
結論
HTML の基本を学びたい場合は、私の HTML の短い入門レッスンをご覧ください。 もし作ったのなら、それを以下で共有し、他の学習者が「シンプル」だけど「挑戦的」なアイデアを見つける手助けをしてください。