-
HTML/CSS
- progate
- コーディング
- 課題
脱初心者！HTML/CSSのコーディング課題ができるサイト3選
HTML/CSSの学習をしていても中々自分でサイトが作れる気がしていない方もいると思います。Progateやドットインストールで基礎学習を繰り返して、いざ模写コーディングするとなってもできる気がしないと感じます。
昨今のWebサイトは複雑なレイアウトになっており、コーディングを途中で諦めてしまう人が多数います。しかし、Web上には基礎学習が終わった人向けのコーディングの課題を公開しているサイトがあります。
本記事では、ProgateやドットインストールでHTML/CSSの基礎学習を終えた人向けにHTML/CSSコーディングの課題を公開しているサイトを紹介します。
HTML/CSSのコーディングができるサイト3選
Progate
ProgateはWeb上でプログラミングが学習できるサービスです。HTML/CSSの基礎的な学習に用いられます。Progateには道場コースと呼ばれる1つのWebページを仕様書を元に作り上げる課題があります。
レベルは初級編、中級編、上級編とコース別です。それぞれ学習スライドと同じWebページを作り上げます。インプットしたことを1つのWebサイトに自分の力でまとめます。道場コースを達成したのとしていないのではHTML/CSSの理解度が全く違います。
Progateの道場コースはピクセルパーフェクトでないと次のステージには行けないので、難しさを感じるかもしれません。しかし、ヒントや解答もあり、いざとなれば解説されたスライドを確認できます。そのため、挫折する可能性は低いです。
学習教材にProgateを選んだ人は道場コースは必ずやるべきだと考えます。
Codestep
Codestepは模写コーディングとデザインカンプからのコーディング課題が無料で配布されているサイトです。目的や用途に合わせたさまざまなデザインがあります。課題の数は紹介するサイトで最も多いです。
Codestepも入門、初級、中級、上級とレベル別に分かれています。Progateを終えた人であれば入門は簡単に感じるかもしれません。しかし、デザインカンプからのコーディングになれるためにも最初からやることをおすすめします。
模写コーディングもできますが、Progateで道場コースを終えた人であればデザインカンプをダウンロードして、コーディングすることをおすすめします。なぜなら、HTML/CSSコーディングの案件はデザインカンプが配布されることが多いからです。
将来も見据えて、デザインカンプからのコーディングを実践していくことで、収入を得ることができます。
PENGIN BLOG
PENGIN BLOGはHTML/CSSのコーディングやWebデザインの学習ができるサイトです。記事の中にデザインカンプからのコーディング課題が掲載されています。初級編、中級編、上級に分かれています。初級編はProgateやドットインストールが一周終わった人におすすめです。
それぞれの課題に対して解説記事もついているので、分からないところがあっても該当する箇所を見ればすぐに解決します。そのため、挫折しにくいのも特徴です。動画で解説している部分もあり、コーディングの様子を見ながら練習もできます。
上級編までできればかなりレベルは上がていると思います。また、ランサーズやクラウドワークスといったクラウドソーシングでコーディング案件を受けても、調べながら完成させることができると思います。
おまけ：WP-LOAD
本サイトで公開しているコーディング教材です。Web制作について無料で学べる教材を探している方はもちろんのこと、HTML、CSS、JavaScript(jQuery)を一通り勉強し終わった方がデザインカンプからのコーディングを行いたいという場合にも使用できます。
前者の場合は頭から順を追って進めていただければサイトが完成するようになってます。
後者の場合はデザインカンプをダウンロードしてコーディングを行なってみて下さい。実装方法が分からない場合は記事を読んでもらえれば解決できるようになってます。
HTML/CSSのコーディング課題のやり方
全体像を考えてからやる
HTML/CSSの課題をやる上で大切なことは全体像を考えることです。勉強の際はパーツを作るためのコードを書くことが多かったと思います。コーディング課題はサイトを作るので全体設計が大切です。
全体設計のやり方は紙に四角でブロックを作ることです。例えば、ヘッダーとメイン、フッターの3分割にします。そして、セクションごとにブロック分けをします。そして、見出しや段落、画像、リストなどをどこに配置するかを書いていきます。
全体設計をやれば、classやidの分け方が分かりやすくなり、同じコードで済むところに気づけます。初めは面倒と思うかもしれません。しかし、コーディングの効率は設計図を書いた方が断然高いです。
最初はピクセルパーフェクトは目指さない
コーディング課題の最初はピクセルパーフェクトを目指さないことです。ピクセルパーフェクトとは要素や余白、配置をデザインカンプに書かれた1ピクセルもずれずに作ることです。最初の段階は似たレイアウトのサイトを作りきることに集中することをおすすめします。
実際にコーディングの案件をやる際はピクセルパーフェクトを求められます。しかし、課題を始めた段階でピクセルパーフェクトを目指すと細かなずれが生じるため、挫折しやすくなります。そのため、最初はあまり細かいことにこだわることは止めましょう。
しかし、ピクセルパーフェクトはいずれ出てくる問題です。2～3個課題を終わらせたら１つ目の課題に戻ってピクセルパーフェクトを目指す練習をすることをおすすめします。
解答を見ることを躊躇わない
コーディング課題をする際、解答を見ることを躊躇う人もいると思います。しかし、コーディング課題では10分考えてわからなければ解答を見ることをおすすめします。学校のテストではないのでカンニングは全然OKです。
解答をする際のおすすめは見たところは記録に残すことです。コーディングを終わった後にの復習に使います。解答を見たところは理解していない部分なので、学習したコンテンツで復習しましょう。
HTML/CSSのコーディング課題を行うメリット
HTML/CSSの知識が深まる
HTML/CSSのコーディング課題を行うことでHTML/CSSの知識が深まります。部分的に使うことは学習の段階でできるようになります。しかし、Webページ1枚分となると要素と要素やCSS同士が絡み合って、コーディングが思ったとおりに反映されないことがあります。
Webページを1つ作ることで見えてくることが多いため、コーディング課題をすることで知識が深まります。また部分的なところでは見えなかったHTMLの要素の特徴や有効範囲、CSSのプロパティの使い方がみえます。
コーディング課題はあなたのレベルを1つ2つ上げてくれるので、ぜひ挑戦してみてください。
エラーの対処に慣れる
コーディング課題をすることエラーの対処に慣れることができます。コーディングをしている必ずどこかがでエラーが出てきます。レイアウトが崩れたり、CSSが反映されていないことが頻繁です。
エラーを解決するためにはGoogleで検索したり、質問サイトへ投稿したり対処方法があります。解決方法の見つけ方は実践しなければやり方が難しいです。そのため、練習の段階で慣れておくことが大切です。
もし、案件を受けた中でエラーが出て、対処できなければ、お客様からの信頼を失う可能性もあります。ならば、練習の段階で失敗をして、解決方法も身に着けることがおすすめです。
まとめ
HTML/CSSのコーディング課題はあなたのレベルアップの為にとても効果があります。無料でデザインカンプを配ってあるサイトもあるため、練習がしやすい環境です。そのため、ProgateでHTML/CSSの基礎知識を身に着けたら必ずやることをおすすめします。
実践に勝る練習はありません。コーディングにおける実践とはWebサイトの1ページ分を作ることです。課題をどんどんやっていき、自分のサイトを作ったりやコーディングの案件を自信をもって獲得できるようになりましょう。
