【DAY2】30DAYSトライアルに再挑戦中〜簡単なサイトが完成【東京フリーランス】

【DAY2】30DAYSトライアルに再挑戦中〜簡単なサイトが完成【東京フリーランス】

z東京フリーランスの30DAYSトライアル(通称デイトラ)に挑戦しはじめました。とりあえず30日やりきりたい。まずはそこから。前回はヘッダーを作るところまで学びました。前回の続きでサイトの最低構成要素を学んでシンプルなWEBサイトを完成させます。

【DAY2】今日のお題『Progate HTML&CSS 初級編(7章まで)』

前回の学び【DAY1】のログはこちら

Progate初級編はこちらから

5 章:フッターを作ろう!

  • フッターの部分を作っていきましょう。
  • フッターの構造
  • フッターのレイアウト

さて、昨日作ったヘッダーの続きで今日はフッターを作ります。

このまま作るとヘッダーのレイアウト指定がフッターにも反映されてしまいます。どうしたら、ヘッダーとフッターのレイアウトを分けることが出来るのか学びます。

ヘッダーは横並び、フッターは縦並びにレイアウトすることができました。

 

相変わらずのスペルミス。ミスの傾向を自分で知ること大事。

間違えて覚えないためにもコードを書くときにじっくりチェックするようにしたいです。最初が肝心かも。

フォントの色の指定は、font-colorじゃなくcolor

6 章:コンテンツを作ろう!

  • メイン部分のレイアウトの仕方
  • コンテンツの構造
  • ボーダー(枠線の指定方法)
  • paddingとmargin

一部分にだけCSSを適応させる方法を学びました。<span>で囲んだ部分だけにCSSが適応されるようにすると文字列の一部分だけ色を変えたりすることが可能です。

HELLO WORLD.のピリオドだけ赤くすることが出来ました。

プロゲイトの学習画面では、コードを書くと同時にプレビュー画面が右側に表示されます。右下には見本も表示されているので、間違えているところがあると見た目でもわかる仕組みです。

これは、地味にうれしい機能です。コードを見ただけてビジュアルが頭に浮かぶという方もいると思うんですが、私はまだブラウザでファイルを見ないと仕上がった感じがわかりません。

だから、書いたコードの結果が同時に見られるのが、初心者にはとてもいい点だと思いました。

一部分にだけCSSを適応するためには<span>で囲むこと

内側に余白を作りたい場合はpadding

外側に余白を作りたい場合はmargin

7 章:お問い合わせフォームを作ろう!

  • お問い合わせフォームのレイアウト
  • お問い合わせフォームのレイアウト(2)

 

フォームのinput要素は終了タグが不要

【まとめ】『Progate HTML&CSS 初級編』終了

コースが終了すると可愛いキャラクターが出てきてお祝いしてくれます。地味にうれしい機能です。

やったー。初級編2週目終了です。1回目に課題をやった時よりはスムーズに課題が出来ました。

 

所要時間:3時間程度

簡単なWEBサイトは2日間のカリキュラムで学んだ要素だけでも、ここまで作ることが出来ます。

お問い合わせフォームまで作れました。でも、ちょっと想定の時間よりも作業時間がかかりました。

初級編の完成状態

二日目の課題です

 

これで全ての基礎の基礎となるサイトのベースが出来ました。

CSSで文字の位置を指定したり、色を指定することが出来ました。文字のサイズも指定しました。

また、簡単なお問い合わせフォームを作りました。

なんとか課題をこなしましたが、真っ白いところからお手本や指示なしで、全てのコードを再現出来るかと言うとまだまだ無理だろうなと思います。

HTMLやCSSの概念を大きく掴みつつ、繰り返し色々な課題に触れながら、少しづつ身につけていく学びのイメージです。よく丸暗記は必要ないというアドバイスをSNSなどで読みますので、応用のきく技術を身につけられるようになりたいなと思います。

【DAY2】初級編で学んだこと

CSSを使って文字の位置、色、大きさを整えること

レイアウトの指定の仕方

数値指定して余白を作ること

ボックスモデルの概念を知る

フォームの作り方

送信ボタンの作り方

30DAYSトライア挑戦してみる?

ブログに感想や学んだことをまとめてみた

紙のノートにまとめてもいいのかもしれませんが、私、多分一生懸命にノートまとめても後から見返さないタイプです。しかも、肝心のノートを無くしたりするパターン多し。

ブログにまとめておけば、ネット環境があればいつでも見返すことが出来るし、40代になってから重い腰をあげてプログラミングと格闘している同志が見つかるかもしれません。今はほとんど誰も読んでいないブログですが、大学ノートよりは幾分マシなはず。そんな気持ちでまとめています。

課題をやるのに時間がかかった

ちなみにこのチャレンジは、厳密に言うと1日目は普通にProgateでカリキュラムを受講して、2日目は前日を思い出しながら同じ課題を復習しつつブログ記事をまとめているので、2倍の時間をかけたノロノロ運転です。

さらにいうと、30DAYSトライアルの2期目がはじまって、みなさんと足並みを揃えて脱落しないようにともう一回最初からやり直して1から勉強しているという、多分見る人が見たら、驚くようなノロさで勉強しているわけなんですが。

普段、私は絵ばかり描いているので、使わない脳の部分があるような気がするのですけれども、プログラミングはチャレンジングすぎる。脳みそも汗をかくなら多分ダラダラの大汗です。でもね、納期もないし、誰とも競争していない好奇心だけの勉強って楽しいんですよ。

うまく表示されるとうれしい

単純にコードが正しく書けて、画面にちゃんと表示されたときの嬉しさ。このくらいで喜んでいたらバカにされるかもしれないですけれども、課題をやっていて喜びがあります。

プログラミングって面白いですね。

表示される面白さを味わうために勉強しているようなものです。

あとは、少しわかるようになってきたら、WordPressのカスタマイズをしてみたいし、何かトラブった時にすぐ匙を投げなくても済むようになるんじゃないかと自分に期待しています。

限りなく低い目標ですが頑張るよー。

想定より課題に時間がかかった原因

課題だけやるときの想定時間は2時間です。でも、私は2時間では終わりませんでした。なぜか考えてみたら、一番多いミスはスペルミスです。本来入れ込む要素はコピペで出来る課題なのですが、あえて手打ちしているのでタイプミス続出です。しかも、ミスした箇所を探すのに時間がかかりました。

また、手打ちするにしてもTabを使うとスペルの補完機能が働くのでちょっと慣れて来たら使うのはズルじゃないですよね。実務なら使わないと仕事終わらない。

生真面目に勉強と実務の効率の良さをバランスよく考えた方がいいと思いますが、今は効率のよさにまで気が回っていない状態です。

効率を考えたらコピペでどんどん課題を進めた方がいいのかもしれませんが、自分のミスを探す中で独特の間違えパターンに気がついたりしたので、一応成果はあったようにも思います。

一晩経つとかなり忘れているので繰り返しやる

昨日わかったつもりのところが、一晩たつと見事に忘れていたり、昨日引っかかって時間をかけて解決したことを翌日も同じことでミスしたり。早くもボロボロですが、自分の間違いの傾向が少しわかって来ました。

飲み込みも早くて体力のある10代20代の方と同じ学び方は出来ませんが、アラフィフ なりにがんばっています。

プログラミング学習は誰がやってもいいと思う

あなたもチャレンジしてみませんか。スキルゼロスタートのアラフィフ姉やんでもがんばってます。

打ち込めることがあるって素晴らしい。そう思います。

年齢を理由にやってみたいことを諦めちゃうのは、もうやめませんか?いくつになっても挑戦してみましょう。

私は、まだまだがんばるよ。』

若くて今よりはチャンスも体力もあったのに自信がなくて勇気もなかった、そんなかつての自分に言いたいです。

もったいないよ。がんばろうよ。まだできることたくさんあるはずだよ!君なら出来る!』

明日の課題はこちら

中級編に突入です。モダンなWEBページが作れるようになるんですか?

わー!やってみたい。また、明日もがんばりましょう。

 

東京フリーランスのサイトはこちらです

デイトラカテゴリの最新記事