MENU

3週間でここまで出来た!効率重視のHTMLコーディング学習ロードマップ

このような方への記事です
  • HTMLコーディング技術を効率的に身につけたい 「初学者」の方

知識0から3週間で以下のようなサイトを「デザインからコーディングまで」行いました。

この経験を通し、更に効率化したHTMLコーディング学習ロードマップを作成しました。

HTMLコーディング学習を行う方々の参考になれば幸いです。

楽しく作成できた
目次

学習ロードマップ

各Stepの簡易説明

詳細については順次記載していきます。

STEP
学習で使用する下記のソフトを用意する
  • Visual Studio Code
  • Adobe XD
  • Adobe Photoshop
STEP
Visual Studio Codeの拡張機能をインストールする

Visual Studio Codeを用いる最大の理由が拡張機能にあります。

インストールするだけで、作業効率が冗談抜きで「数十倍」になるため必ず導入します。

STEP
Progate HTML & CSS 初級編を「ながめる」

HTMLとCSSがどの様なものか何となく理解する。

Visual Studio Codeを用いたコーディングを行うほうが学習効率が良いです。

時間がもったいないので、Progateでの演習は「行いません」

STEP
コーディングを解説記事を見ながら行う

練習用のデザインを無料で提供して頂けるサイトがありますので、活用させていただきます。

解説記事がありますので、ここからで初めてHTML、CSSについて実戦形式で身につけていきます。

STEP
Google先生らと力を合わせ、Adobe XDからコーディングを行う

次は先程の解説記事は使わずに、Google先生らと相談しつつ自力でコーディングを行います。

この時点では「大体合ってる」ものが作れればいいので、細部の違いは許容し次に活かしましょう。

STEP
Adobe Photoshopからのコーディングを行う

練習用のデザインを無料で提供して頂けるサイトがありますので、活用させていただきます。

Adobe Photoshopの使い方を身につけるのが主目的です。

STEP
Adobe XDを用い、自分でデザインを行いポートフォリオサイトを作成する

お仕事の実績を持たない段階にて、自身を評価してもらうただくために用います。

デザインの基礎、及び新しい技術を試してみましょう。

学習上の注意点

作成物の完成ではなく、「目的達成」にすること注力して下さい。

作成物は完璧に仕上げたくなりますが、時間の無駄なのでやめましょう。

パレートの法則の如く完成に近づくにつれて必要な労力は指数的に増加します。

達成感は味わえますが、身につく知識は少なく効率が悪いです。

各Stepでの目的達成を第一に考え、次に進むことを優先して下さい。

Step1 ソフトウェアの準備

学習の際に必要なソフトウェアになります。

Visual Studio Code

あわせて読みたい
Visual Studio Code – コード エディター | Microsoft Azure
Visual Studio Code – コード エディター | Microsoft Azureほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

HTML、CSS等のコードを入力していくソフトウェア(エディタ)になります。

STEP3で後述しますが、拡張機能が非常に優れているので使用します。

Adobe XD、 Adobe Photoshop

Adobe: Creative, marketing and document management solutions
アドビ:クリエイティブ/マーケティング/文書管理ソリューション
アドビ:クリエイティブ/マーケティング/文書管理ソリューションアドビは、コンテンツおよびアプリの作成、配信、最適化を支援し、デジタルエクスペリエンスを通じて世界を変革します。

HTMLコーディング学習ですが、Adobe XD、Photoshopのデータをもとにコーディングを行うためです。

体験版または、1ヶ月の契約で試しに契約しておきましょう。

HTMLコーディング、自分に向いてないわ…となれば解約すればいいだけですので。

Step2 VS Code 拡張機能導入

目的

作業効率向上、ストレス低減

Visual Studio Codeは有志が作成したツールをボタン一つで導入することが出来ます。

多い印象を受けますが、効率、ストレス抑制を追求した結果、私には最低限これだけ必要でした。

アンイストールもボタン一つで行えますので、拡張機能は取りあえず試してみてください。

リアルタイムでコードを確認する

あわせて読みたい
Live Server - Visual Studio Marketplace
Live Server - Visual Studio MarketplaceExtension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

入力支援

あわせて読みたい
HTML CSS Support - Visual Studio Marketplace
HTML CSS Support - Visual Studio MarketplaceExtension for Visual Studio Code - CSS Intellisense for HTML
あわせて読みたい
IntelliSense for CSS class names in HTML - Visual Studio Marketplace
IntelliSense for CSS class names in HTML - Visual Studio MarketplaceExtension for Visual Studio Code - CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
あわせて読みたい
Auto Complete Tag - Visual Studio Marketplace
Auto Complete Tag - Visual Studio MarketplaceExtension for Visual Studio Code - Extension Packs to add close tag and rename paired tag automatically for HTML/XML
あわせて読みたい
Auto Close Tag - Visual Studio Marketplace
Auto Close Tag - Visual Studio MarketplaceExtension for Visual Studio Code - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
あわせて読みたい
Auto Rename Tag - Visual Studio Marketplace
Auto Rename Tag - Visual Studio MarketplaceExtension for Visual Studio Code - Auto rename paired HTML/XML tag
あわせて読みたい
JavaScript (ES6) code snippets - Visual Studio Marketplace
JavaScript (ES6) code snippets - Visual Studio MarketplaceExtension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax

コードの整形

タイプミス確認、インテンド、ネストの確認を容易にします。

あわせて読みたい
Prettier - Code formatter - Visual Studio Marketplace
Prettier - Code formatter - Visual Studio MarketplaceExtension for Visual Studio Code - Code formatter using prettier
あわせて読みたい
indent-rainbow - Visual Studio Marketplace
indent-rainbow - Visual Studio MarketplaceExtension for Visual Studio Code - Makes indentation easier to read
あわせて読みたい
Bracket Pair Colorizer - Visual Studio Marketplace
Bracket Pair Colorizer - Visual Studio MarketplaceExtension for Visual Studio Code - A customizable extension for colorizing matching brackets

Step3 Progate HTML & CSS 初級編スライドを「ながめる」

学習準備は以上で終了です。

初めにHTMLとは何かをざっくり理解していきましょう。

目的

HTML、CSSがどんなものか「なんとなく」理解すること

Progateはエディタが「あれ」なので演習は行わず、「無料で見れるスライドを読むだけ」で十分です。

VS Codeの優位点を確認するために演習を行ってもいいですが、時間の無駄なのでおすすめしません

手を動かし、悩みながら実際にものを作ったほうが圧倒的に学習効率がいいためです。

Progate

Progate
Progate(プロゲート) | Learn to code, learn to be creative.
Progate(プロゲート) | Learn to code, learn to be creative.Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。

Step4 解説記事を見ながらコーディング

目的

HTML、CSS、jQueryの理解度を高める

どのようなコードを書くと、どう表示されるのかを理解していきましょう。

「完成したものがなんか違うわ…」となっても、気にせず次のStep5に進んで下さい。

Step3でProgateのスライドを見たときより知識が増えていれば目的は達成となります。

コーディング対象

クリ★スタ
クリ★スタサイトリニューアルのお知らせ
クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました!

クリ★スタ様の上記記事よりAdobe XD、画像ファイルを入手して下さい。

クリ★スタ
クリ★スタサイトリニューアルのお知らせ
クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました!

上記の記事を参考に、「だいたいあってる」サイトを作成して下さい。

クリ★スタ
クリ★スタサイトリニューアルのお知らせ
クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました!

この時期ではリンク先移動後、ハンバーガーメニューが閉じられません。
jQueryの勉強がてら修正してもいいですが、目的からそれるので無視してもいいです

Step5 Google先生と協力してコーディング(XD編)

目的

Googleを使い、自己解決能力を鍛える

Adobe XDの雰囲気を掴む

デザインデータからコーディングを行う際に、わからないことがいくつも出てきます。

そのときはGoogle先生と協力し答えを導き出す力が必要となります。

このStepではその練習として、Google先生と協力してAdobe XDデータからのコーディングを実施することが主目的です。

従って、今回も作成物は「だいたい」あっていれば良いです。

Google先生のこき使い方が上手くなったわと自覚できれば目的達成です。

また、この段階でHTMLコーディングの感覚が何となくつかめ、成長を実感してきます。

データサイエンスナビ
【エンジニアの必須スキル】ググり方のコツ!ちょっとした工夫を紹介します!|データサイエンスナビ
【エンジニアの必須スキル】ググり方のコツ!ちょっとした工夫を紹介します!|データサイエンスナビググり方を知ってますか? スマートフォンが発達し今や「googleで検索を行う」ということをやったことがない人はいないの

コーディング対象

10分間Google先生と相談しても、にっちもさっちもいかない場合は大人しく解説記事を参照しましょう。

悩み、自己解決できたことは記憶に残りますが、長時間悩むくらいなら手を動かしたほうが効率的です。

クリ★スタ
クリ★スタサイトリニューアルのお知らせ
クリ★スタサイトリニューアルのお知らせサイトのリニューアルを行いました!

補足

このあたりから、CSSコーディングの煩雑さにストレスを感じてくると思います。

対処法は先人の知恵を拝借しましょう。

私は下記記事にお世話になりました。

Zenn
【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法
【暫定】コーダー歴3年で辿り着いた保守しやすいコーディング手法

他にもGoogle先生は多様な回答を提案してくれます。自分に馴染む手法を試し、最適解を作り上げましょう。

迅速な改善は、先の効率を大きく向上させます。

Step6 Google先生と協力してコーディング(PSD編)

目的

コーディングで使うAdobe Photoshop機能を身につける

PSDデータからコーディングを進めていきます。

データの扱い方等は、Google先生を使い自分に適した方法を見つけましょう。

このあたりから、デザインデータと比較して「かなり近い」ものが作れてくる様になってきます。

コーディング対象

気に入ったものを1つ選んでコーディングを行って下さい。

UD e. -USAGI DESIGN emi.
DOWNLOAD usagi design emi.
DOWNLOAD usagi design emi.usagi design e.はWebデザインとコーディングをしているemiのWebサイトです。コーディング練習用のpsdの配布をしています。SUZURI等でウサギグッズの販売もしています。

フリー素材の画像データを使用すると見栄えが良くなるので、以下のサイトからいい感じのやつを拝借しましょう。

あわせて読みたい
Beautiful Free Images & Pictures | Unsplash
Beautiful Free Images & Pictures | UnsplashBeautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.
あわせて読みたい
Attention Required! | Cloudflare

Step7 XDを用いたポートフォリオ作成

目的

デザインの基礎を身につける

Adobe XDの使い方を身につける

この時点でコーディング能力、問題解決能力は十分身に付いています。

依頼を受ける際には、「自身の紹介かつ、能力を評価してもらうため」のポートフォリオが必要となるので作成します。

ポートフォリオサイト作成により、デザインの基礎、及びAdobe XDの使い方がおまけで身につけられます。

また、デザインの基礎は発表用スライド作成、及び書類作成にも応用が効く、優秀なスキルです。

学習方法

冒頭のポートフォリオサイトデザインは、この本の規則に従って作成したものです。

デザイン知識0であった私でもこの本を参考にするだけで、これだけのものが作成できました。

終わりに

以上が自分の軌跡に改善点を加え、効率化したものになります。

WEBエンジニアを目指し、学習を初めたばかりの方の助けとなれば幸いです。

Let's share this post!

コメントする

To comment

目次
閉じる