前回からのProgate初級HTML&CSS復習
前回はProgate初級HTML&CSSを一度終わり、道場をやっても全くわかりませんでしたので
もう一度Progate初級HTML&CSSをやりました。
今後noteには、なるべく1週間分のProgateの積み上げなど、出来たこと、出来なかったことのまとめを書こうと思うのですが、Twitterにも書いている事をまた書くのもしんどいのでコピペさせて頂きます……
基本的にHTML&CSSの初級の1章〜7章を順に終わらせていきました。
1日目
▷やったこと
HTML&CSS学習コース初級編
▷できたこと
初級編の復習<h1>〜<h6>見出し、<p>段落作成
▷つまづいたこと
初級編の道場をやったが全く分からず。初級編をもう一度復習
2日目
▷やったこと
Progate初級編復習
▷できたこと
<a href=″(リンクURL)″>テキスト</a>リンク作成。
<img src=″(画像URL)″>画像表示
<ul>で<li>を囲む、リスト作成。
▷つまづいたこと
リスト作成でインデント(文字下げ)が理解出来てない。<li>を<ul>より少し(2)下げる。関係を分かりやすく。
3日目
▷やったこと
初級復習。2章CSS
▷できたこと
color :(色指定); 文字の色を変更
font-size :(数字)px; 文字の大きさ変更
font-family :(フォント名);文字種類変更
▷つまづいたこと
フォント名にスペースがある時ダブルクォーテーションで囲むのを忘れた。
4日目
▷やったこと
初級編復習。2章CSS
▷できたこと
background-color:(色指定);背景色変更
横幅width:(数字)px; 高さheight:(数字)px;要素の幅と高さ変更
html
<要素 class=″class名″>
css
.class名 タグに名前をつける。
▷つまづいたこと
cssのclass名の前に.(ドット)入れ忘れた
5日目
▷やったこと
初級編3章レイアウト
▷できたこと
htmlの型､バージョン指定<!DOCTYPE html>→<html>の間に<head>､<body>
<head>の間に<meta chrset=″文字ｺｰﾄﾞ”>､<tatle>ﾀｲﾄﾙ</tatle>､<link rel=”stylesheet“ href=″stylesheet.css“ >
<div>にheader､main､footerのclass
▷つまづいたこと
cssでheader､main､footer背景変更の際、background-colorを使うがcolorと打ってしまった。classの前にドットを忘れた(2度目)
6日目
▷やったこと
初級編復習4章
▷できたこと
headerの構造､headerレイアウト､header余白
▷つまづいたこと
特になし
7日目
▷やったこと
初級編復習5章
▷できたこと
float、paddingをheaderのliのみに適用
.header-list li｛｝←classの次にスペースとliを入れるとli要素のみに適用。
▷つまづいたこと
何度かclassの横にliを入れ忘れた。
8日目
▷やったこと
初級編復習6章ﾒｲﾝﾚｲｱｳﾄ､ｺﾝﾃﾝﾂ構造
▷できたこと
spanを使いテキストの1部分のｶﾗｰ変更
divにcontents-itemとclassを付けdivの中にimg srs=″url″とpのﾃｷｽﾄを入れて枠を付け
▷つまづいたこと
divの外にimgやpを入力してしまって混乱
9日目
▷やったこと
初級復習6章､7章
▷できたこと
枠線border､paddingとmargin､お問い合わせﾌｫｰﾑﾚｲｱｳﾄinput､textarea､type､value
▷つまづいたこと
input, textarea ｛｝と出来る事を知らず別々で入力した。
枠の横幅の指定がwidthと分からず答えをみる。
2週間かかりましたが、勉強した日だけで言うと9日です。前回よりかなり早く終わりました!
復習が終わりましたので初級道場を
もう一度、やってみようと思います！
次回からはなるべく、まとめの文章を書ける様にしたいですね…T^T