【まとめ】初心者にオススメなHTML、CSSの勉強方法

Webサイト制作に興味あるけど、何したらいい?と思っている人向けの内容です。

HTML、CSSの勉強方法

1.index.htmlを作って、ブラウザで表示させてみよう

2.どうして、ググると世界中のWebサイトが見られるの?

3.無料オンラインサイトで学ぶ(初級のみ)

4.簡単なサイトを模写してみる

5.無料オンラインサイトで学ぶ(初級以外すべて)

6.まとめ

1.index.htmlを作って、ブラウザで表示させてみよう

デスクトップに「index.html」を作成して、ブラウザで表示させてみましょう。

(1時間でHTMLを使ってホームページを作ろう!)

http://www.shoshinsha.com/hp/1hour/1hour01.html

<実践して学ぶ>

・フォルダ作成

・ファイル作成

HTML入力

・背景画像を挿入

・背景画像を挿入

2.どうして、ググると世界中のWebサイトが見られるの?

どうしてブラウザから世界中のWebページ(htmlファイル)を見られるの?【番外編】

https://liginc.co.jp/250910

<知識を学ぶ>

URLってなに?

1.で作って表示させたブラウザのURLfile:///C:/Users/・・」を理解する

・隣や世界中の人のファイルを見るにために何が必要か

・サーバーで公開する必要性

3.無料オンラインサイトで学ぶHTML・CSS(初級のみ)

progate(HTML・CSS:初級のみ)

https://prog-8.com/languages/html

<知識・実践で学ぶ>

HTML

・よく使うタグを知って使ってみる

・タグの階層構造を知って使ってみる

CSS

HTMLを装飾してみる

・装飾できない時の原因を調べる

4.簡単なサイトを模写してみる

模写をして、実際のサイト風なHTMLやCSSを書いてみよう

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

https://michiweb.net/cre-simple-cording/

5.無料オンラインサイトで学ぶHTML・CSS(初級以外すべて)

progate(HTML・CSS:初級編以外全て

https://prog-8.com/languages/html

まとめ

HTMLCSSをブラウザで表示させてみよう

作ったHTMLが、ブラウザで表示される仕組みを知ろう

基礎の勉強をする

簡単なサイトを模写してみる

Progateを勉強しつくす

上記ができれば、自分のポートフォリオやアフィリエイトサイトが作成できます!

 

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