プログラミング kino

【初心者】30DAYSトライアルをやってみた② Progate編　DAY1～DAY4

 

こんにちは、キノ(@zB75pWavnhDTIxr)です。

僕は25DAY、26DAYの課題を勉強中です！

今日はProgate編を書こうと思います。

下記の通りに進めてみてください！

 

 

↓詳細はこちらからどうぞ！↓

分からない時は？

 

前の記事でも書きましたが

初心者は難しいと思うので、Progateは理解度30~40%でいいですよ。

ただ、「何をやっているのか」分かってていればいいです。

 

僕が思う一番大事なことは、

プログラマーやエンジニアは「どうしてエラーになるのか」「何をやっているのか」

そして、それを上手く言語化して、ググる力（調べる力）だと思います。

 

なぜならプログラミングする時、ネット環境がないなんて有り得ないからです。

分からないときは調べればいい。

まずは、一周すること

それが分かっても分からなくても！

スポンサーリンク

Progate編

 

1DAYS~7DAYSはProgate編

Web制作を始めましょう！

ProgateでHTMLやCSSを勉強し、Web制作の基礎を学びます（一部有料含む）。

Progateはプログラミングしたものが、すぐに両画面で確認できることと、

スマートフォンで学習できることですね。

これで通勤時間のスキマ時間を使って勉強することができるんです。

 

 

スポンサーリンク

DAY1　HTML & CSS 初級編４章まで（初心者は１時間くらいかかるかも）

とっつきにくいのは、

HTMLでは、<a href=”リンクurl”>表示したい文字</a>

CSSでは、class=”sample”ですね。class名は何でもいいのですが、

class名は目印でもあるので分かりやすい名前の方がいいですね。

 

例えば、文字を赤くするときは、

HTMLでは、

 

CSSでは、

こう書けば、赤くなります。

もし、クラス名をblueとしたら、混乱しますよね！

だって、color:red;で赤くなるんだもの！

 

DAY2　HTML & CSS 初級編7章までで初級編クリア！

とっつきにくいのは、paddingとmargin、float、<input>ですね。

 

padding……内部の余白

margin……外部の余白

これだけです。僕は内部の余白を広げたいのに、marginをよく使ってしまいます。

でも、結果はすぐに分かるので、間違いを修正してpaddingを代わりに、

と繰り返しやっていくと身についちゃいます！慣れが必要です！

 

floatを理解するには２つ覚えることがあります。

 

１つ目はデフォルトで文字が左上側に置かれること

２つ目はfloatは文字通り「浮く」こと

画面上では2次元だから、見えないんですが浮いているんですよ。

つまり、三次元で考えるんです（横向きに見られたら…）。

 

hiro pon-programmingさんの動画が一番簡潔で分かりやすかったです↓

 

 

他にも１つ紹介しますね。

横並びにしたいなら別にfloatじゃなくていいんです。

floatが理解できる、できない関係なく、こちらをオススメします。

僕も使っています！

 

【CSS】まだfloat使ってる？CSSのFlexboxを徹底解説！

 

<input>、<textarea>はお問い合わせ、ログインなどで使っています。

ちょっと初心者にはとっつきにくいところですが、

中級編でも扱っているので「そんなもんだ」って感じで大丈夫です。

 

 

DAY3　Progate HTML & CSS header中級編3章まで

初級編より難しくなります。

<header>は、ナビゲーショングループ（リンクメニュー）やイントロダクション（前置き）とかに使われています。

 

必ず必要というわけではありませんが、基本的に１つしか使われることはないので、差別化しやすいんですよ。

<header>は<div>と同じようにひとかたまりの範囲として定義する際に使用します。基本的に<div>と同じように考えていれば大丈夫です。

 

 

DAY4　Progate HTML & CSS 中級編７章まででクリア！

opacity、letter-spacingや:hoverやらいろいろ出てきて大変だったと思いますが、

全部覚えようとして詰め込むのは、「挫折の原因」になります。

大事なのは、「どのコードを入力すれば、どんな『現象』が起きるのか」です。

『現象』を上手く言語化できれば、ググってコードを探す方が結構早いんですよ。

 

例）letter-spacingが分からなくとも、『現象』である『文字どうしの間隔』を言語化できればいい。

あとはググって目的にあった記事参照すればいいですね！

【CSS】letter-spacingで字間を調整する方法まとめ

終わりに

 

初心者もプログラマーもやっていることはそう変わりません。

 

プログラミング能力を上げる秘訣は？

と聞かれたら、

僕は「ただググる」と答えます。

その際、なるべく新しい情報がいいですね。(๑•̀⌄ｰ́๑)b
次はこちら↓
【初心者】30DAYSトライアルをやってみた③ Progate編　DAY5～DAY7
では、また

お疲れ様でした。

ここまで読んでくれてありがとうございました。

こちらもおすすめ↓

【体験談】エンジニア初心者がSkill Hacksをレビュー【自走可能】

ブログランキング・にほんブログ村へにほんブログ村へ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

RECOMMENDこちらの記事も人気です。