【独学】Webサイト制作の勉強方法まとめ(未経験者)

未経験からWebの世界に転職して、2年6ヶ月が過ぎました。
過去を振り返り、未経験者の方や1年未満の方のためにWebサイト制作に必要なスキルや勉強方法、注意点などをまとめました。

 

Webデザイナー(コーダー)に必要なスキル

Webデザイナーでも、コーディングに特化している方向けの内容です。

必要なスキル

HTML,HTML5

CSS,CSS3

jQuery

XAMPP

喜ばれるスキル

PHP

WordPress

ゼロからの勉強方法

毎日10分はタイピングをする

タイピング速度はコーディング速度に関係します。

手が勝手に動くようになれば、コーディングを組み立てることに頭を集中させることができます。

Code Drill

コーディング初心者はコードドリルの「文字列 > html」がオススメです。

htmlを打ち慣れていないなら絶対にやったほうがいいです。

成功タイピング

通常のタイピングが苦手な方にオススメです。

コーボードをみなくても、キーの場所がわかるように練習しましょう。

無料オンラインサイトで学ぶ

progate

最初に解説スライドで知識を学んだあとに実践の練習問題を解く方式。

実際に手を動かすため、プログラミング初心者にオススメです。

CODEPREP

「〜をつくる」応用編が充実しています。

「progate」で基礎を身につけ、「CODEPREP」で、部品の作り方を学美ましょう。

実際にサイトを作ってみる

サイトの模写をしてみる

簡単にWebサイトを模写する方法

【サイト模写】簡単にWebサイトを模写する方法

タイムアタックコーディングをする

【道WEB】目指せ10分!タイムアタックコーディング

実際のサイトを模写してみる

模写1-1

現地の人から借りる家、体験&スポット – Airbnb

https://www.airbnb.jp/gift

模写してみた(idとpassは「michiweb」です。)

https://copy.michiweb.net/airbnb/01-01/

 




模写1-2

Airbnbでお家、アパート、お部屋をシェアしよう

https://www.airbnb.jp/host/homes

模写してみた(idとpassは「michiweb」です。)

 

https://copy.michiweb.net/airbnb/02-01/

サイト制作時の注意点

タイトル、ディスクリプション、metaは決まっている?

正しいマークアップをする

h1は1ページにひとつだけ

▼HTMLの階層構造を意識する(アウトライナー)
HTMLのアウトラインを解析して表示するChrome拡張機能「HTML5 Outliner」

▼タグの入れ子のルール
【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

CSSの設計をどうするか

CSSと画像の命名規則を決める

プログラマーのためのネーミング生成ツール

画像よりテキストで表現する(画像は最低限)


imgにはaltを入れる

キービジュアル

機種依存文字は文字コードにする

検証

【Chrome拡張】HTMLエラーチェッカー(タグの閉じ忘れチェック)

【W3C】Markup Validation Service

Another HTML-lint gateway

リンクチェック

コンバージョンのリンクをチェックする

すべてのリンクをチェックする

リンク切れをチェックする必要性と、オススメのツール3選をまとめてみた

コーディング規約を確認する(作成する)