30Daysトライアルの要点のまとめ Day1からDay2まで

30daysトライアル day1-da2

解決します

・30daysトライアルってなに?

・Web制作に必要なポイントを簡潔に知りたい

・30daysトライアルの課題内容が知りたい

 

こんにちは、ワタリビト(wataribito)です。

プログラミングで収入を得るために勉強に励んでいるのですが、その勉強というのが「30Daysトライアル」と企画。

この企画に参加しながら勉強をしています。

 

30Daysトライアルを知らない人もいると思うので、最初に簡単に説明しますね。

 

30Daysトライアルとは

・Progateを使いながらプログラミングを勉強する

・全くの初心者でも30日でWeb制作で稼げるようになる

・1日ごとにこなすべき課題が決まっている

・時間があるときは先まで進めてOK

 

端的にまとめると、1日1つ決められた量の課題をこなして、30日間でWeb制作が受注できるだけのスキルを身につけようという趣旨です。

 

主にツイッターやSlackで、課題の完了や課題の発表、エンジニアとしての採用報告などが行われているのでツイッターで #30Daysトライアル のタグ検索をするとたくさんのツイートが見つかりますよ。

 

参加は自由・参加料金は無料・会員登録などはナシ・ツイッターでつぶやかなくてもOKなので、参加のハードルはだいぶ低いですね。

 

*ただし、課題が進むにつれてProgate(課題で使用するプログラミング学習サイト)の有料登録(月980円)が必要になります。

 

30Daysトライアルについての詳しい内容については、本家のこのサイト(東京フリーランス)を参照してください。

 

Q:本当に30日で仕事が取れるレベルになるのか?
A:努力次第で十分可能です

 

こちらも30daysトライアルの振り返りです?

30daysトライアル3日目

30daysトライアルの要点まとめ Day3

09/11/2019
30daysトライアル Day4

30daysトライアル要点まとめ Day4

09/12/2019

 

Day1の課題内容

 

1日目の課題内容は「ProgateのHTML&CSS初級編の1章から4章までこなすこと」です。

具体的な内容は以下の通り。

 

Day1の学習内容

・具体的には、hタグやaタグの意味や使い方の理解

・見出しと段落のつけ方

・リンク、画像、コメントのつけ方

 

少しWeb制作の知識がある人なら楽勝なレベルですね(Progateはこちらから)

全くの初心者でも、課題の量は多くないし、基礎中の基礎なので理解しやすいハズです。

 



 

Day1の要点まとめ

 

Day1で習う学習ポイントをまとめました。

 

1章 タグについて

 

・タグは段落や文章などの区別をつける役割を持っている。

・段落や画像、テキストなどの表示はそれぞれに応じたタグを使う。

・h1やa、divなどのタグは、開始タグと終了タグがセットで必要(一部を除いて)

・タグは<>の中に入れ、終了タグには<の次に/(スラッシュ)も入れる。

例)<h1>(?開始タグ)(終了タグ?)</h1>

 

タグについて

タグについて

 

2章 見出しと段落について

 

・見出しはh1からh6タグを使う

・テキストはaタグを使う

例えばこの文章はaタグ、見出しと段落についての部分はh4タグをそれぞれ使っている。

段落について

段落とテキストタグについて

 

3章 リンクタグについて

 

・別のURLリンクを記事に貼るには、<a href=””></a>タグを使う。

・””の中にURLを入れる。

・開始タグをテキストタグの<a>と間違えないこと(終了タグはおなじく</a>)

・<!–ここにテキスト–>?はコメント用タグ(コメントはページに表示されない)

・コメントは自分用のメモ代わりにつかう。

テキストタグとリンクタグの違い

テキストタグとリンクタグの違い

 

4章 imgタグについて

 

・imgタグは「img」単体ではなく、「img src=””」のセットで使うとおぼえる。

・画像を表示するimgタグはテキストを囲むことがないため、終了タグが要らない。

imgは閉じタグ不要

imgは閉じタグ不要

 

 

Day2の内容と要点のまとめ

 

2日目の課題内容は『Progate HTML & CSS 初級編(5章から7章まで)』です。

具体的な内容は以下のとおり。

 

Day2の学習内容

・リスト表示の仕方

・文字の色の変え方

・文字の大きさと種類の変え方

 

この日からCSSが学習内容に加わります。

CSSはWeb制作に絶対に必要なモノであり、様々な使い方をします。

ちょっと複雑になってきますが、まだ基礎中の基礎しか学ばないので、難しくありません。

(CSSとは、色やカタチ、場所などを自由に指定・変更できる機能です)

 

*文字の種類は一般的にはフォントと呼ばれており、以降はフォント呼称も使用します。

 




 

Day2の要点まとめ

 

Day2で習う学習ポイントをまとめました。

 

5章 リストについて

 

・<ul>タグ(親)の中に<li>タグ(子)をいれてつかう。

・このブログのヘッダーもリストを使った入れ子構造。

・ほぼすべてのサイトやブログのヘッダーなどにリストがつかわれている。

・下の画像を打ち込んでも、CSSを設定していないのでこのままでは意味がない。

リストについて

リストについて

 

6章 CSSについて

 

・CSSとは、モノのカタチや大きさ、位置、色など見た目をつくるもの

・HTMLで記述したコードの「どこの」「なにを」「どうするか」を決める

・HTMLとは記述の仕方が違うので注意(<>は使わず、{}をつかうなど)

・セレクタ、プロパティ、:;の使い方をおぼえる

・CSSのコメントは/**/を使う(HTMLとは違う)

h1の文字色を赤に設定

h1の文字であるHellow Worldの色を赤に指定すると…?

 

h1の色が変化した

h1の色が赤に変化した

 

7章 文字の大きさと種類の変え方について

 

・文字の大きさを指定するプロパティは「font-size」

・大きさの単位は「px」をつかう(40px、20pxなど)

・文字の種類を変えるプロパティは「font-family」

文字の種類=フォント名にスペースが入る場合は「””で囲む」

h1タグとpタグに違う設定をすると...

h1タグとpタグに文字色と大きさをバラバラになるよう設定すると…

 

それぞれの文字色と大きさがバラバラになる

それぞれの文字色と大きさがバラバラになる

 

30daysトライアル day1-da2

少しでもおもしろいと思ったらシェアお願いします?