HTML/CSSコーディングの練習できる教材を公開

コーディングの無料練習

https://remublog.net/wp-content/uploads/2019/02/kurohamu04.jpg

HTML/CSSのコーディング教材作ってみました!

無料なので、ガンガン使ってください!

こんな方にオススメ

  • Progateから次のステップへ進みたい
  • ホームページを作れるようになりたい
  • Web制作で稼げるようになりたい

コーディング教材は、上記のような方にぴったりな内容です。

もしあなたが、Web制作したことがなくても大丈夫です。

環境準備からコードの内容まで、すべてを超分かりやすく解説しています!

さらに、教材をやり終えたら、手に入れられるものは次の通りです。

  • ポートフォリオサイト(貴方自身の自己紹介サイト)
  • コーディングの基本スキル

あなただけのオリジナルページとWeb制作スキルが身につく、一石二鳥な教材です。

では、どんなサイトをつくるのでしょうか?

制作するコーディングの完成版の確認

コーディングの完成版
今回制作するページ(一部)

まずは、今回制作するWebサイトをご確認ください。

イラストをふんだんに使った、ポートフォリオサイト(自己紹介サイト)です。

イラストを多用したWebサイトは2020年のトレンドです。

とっつきやすさを生み出せるため、幅広い層に良い印象を与えられます。

ポートフォリオサイトとは、自己紹介をWebページにおこしたものです。

過去実績やスキルを掲載し、お仕事をもらう時に使用します。

今回は、さんえんなりという架空の人物のポートフォリオサイトです。

さんえんなりという部分を変えて、自分自身のポートフォリオサイトに変えてみてください!

このコーディング教材で学べるスキル

このコーディング教材で身につくスキルは次の通りです。

  • コーディングスキル(HTML&CSS)
  • Webサイトに動きをつける(jQuery)
  • フレックスボックス(CSS)
  • 実際の案件に基づく実践的なコーディング法

Web制作に必要な基本を、すべて身につけることができます。

実際に手を動かしながら勉強できるため、記憶にも残りやすくなっています!

コーディング練習に必要な時間

コーディングをすべて終わらせるのに必要な時間はおよそ8時間です。

個人差はもちろんあります。

ですが、ProgateでHTML&CSSの初級・中級・上級を終わらせている方は、問題なく終わらせることができます。

以下内訳を掲載します。

コーディングの下準備編

所要時間;40分

内容はこちらからチェック(準備中)

ヘッダー部分のコーディング

所要時間:40分

内容はこちらからチェック(準備中)

ヒーローセクションのコーディング

所用時間:60分

内容はこちらからチェック(準備中)

アバウトセクションのコーディング

所要時間:60分

内容はこちらからチェック(準備中)

サービスセクション部分のコーディング

所要時間:60分

内容はこちらからチェック(準備中)

実績セクション部分のコーディング

所要時間:60分

内容はこちらからチェック(準備中)

お問い合わせセクション部分のコーディング

所要時間:60分

内容はこちらからチェック(準備中)

フッターとヘッダーを改変する

所要時間:60分

内容はこちらからチェック(準備中)

レスポンシブ対応のコーディング

所要時間:60分

内容はこちらからチェック(準備中)

合計8時間となっています。

具体的な作業内容については、『HTML/CSSのコーディング教材を公開【準備編】』にて詳しく解説しています。

HTML/CSSのコーディング教材を公開【準備編】へ進む

もし興味を持っていただけたら、実際にコーディングを始めていきましょう!

次回の『HTML/CSSのコーディング教材を公開【準備編】』の所用時間は40分です。

ぜひ、お時間をみつけて挑戦してみてください。

また、このWebサイトをブックマークしておくと、いつでもアクセスできて便利です。

ブックマークは2秒で完了します。

PCでChromeをお使いの場合、アドレスバーの☆をクリックしたらOKです。

ブックマークを活用して、いつでも確認できるようにしてみてください!

コーディング練習準備編 HTML/CSSのコーディング教材を公開【準備編】