【SkillHacks日記】HTMLとCSSを使って、自己紹介サイトを作ったよ | 大学生がプログラミングに挑戦していくブログ

SkillHacksで勉強中のフレッシュすばるくんです。

SkillHacksで勉強するカリキュラムは以下

1章 HTMLの基礎動画6本

2章 CSSの基礎動画6本

3章 HTML/CSS演習動画6本←イマココ

4章 Bootstrapの基礎動画7本

5章 Rubyの基礎講座動画12本

6章 Ruby演習メモアプリ開発動画7本

7章 Rails基礎講座コントローラ・ビュー編動画14本

8章 Rails基礎講座モデル・データベース編動画10本

9章 Rails実践講座アプリの公開・メモアプリ開発動画11本

10章 Rails基礎講座メモアプリの発展を作ろう動画13本

HTMLとCSSを学びおわると、次はHTML/CSSの演習としてサイト作成するわけなので、チャレンジ。

HTMLとCSSと聞くと、難しく感じる方もいますが、迫さんがわかりやすく説明してくれていたのでサクサク学習が進みました。

しかし、今度はサイト作成の演習というわけなので、一筋縄でいかない予感……

そんな思いもあり、挑戦してみました……！

簡単な自己紹介サイトを作ったよ！

じゃじゃーん！

様々な不安もあったのですが、あっさりとできた！！！すごい！！！！

例によって、迫さんが説明しながら説明している様子を見ながら、自分でも手を動かしながら動かしていきました。

このヘッダーを作るまでにかかった時間は、およそ4時間。

一日の勉強時間は、だいたい1時間程度ずつ、毎日勉強していました。

一日でガッツリ勉強できる方は良いですが、なかなか時間が取れない方は少しずつ勉強するのがおすすめですよ！

ちなみに、HTMLだけとCSSを入れた後ではかなり違うんですよ！

自分でやってみたとき、大きく違うのでビックリ。

最近あいまを縫って、skillhacksで勉強中(/・ω・)/

htmlを、cssをいじって「おおおおおお」となる感動はやっぱり良いですねぇ
＼(^o^)／

迫さん(@yuki_99_s )の説明もわかりやすいので、サクサク進める。#SkillHacks pic.twitter.com/g6Xd1eJK6Y

— フレッシュすばるくん＠プログラミング勉強中 (@furesuban) January 29, 2019

CSSがあるとないとでは、見栄えがまるで違いますね(/・ω・)/

自己紹介サイトを作るまでの大まかな手順

HTMLで自己紹介したい内容を書く
CSSを適用させる

これだけ。

書いてみると、意外とラクそうと思いますが、結構めんどくさいんですよね～

HTMLでコツコツ書いて…

そのあと、CSSを適用させました！

このあと、画像やサイズ、枠などを調整して、最終形へ！

個人的に悩んだところはなく、迫さんの講座もわかりやすかったのも相まって、サクサク進められました！

ただ、divタグというタグの閉じわすれで、迫さんを困らせてしまったのは申し訳なかったです；；

divタグを閉じ忘れをみつけるだけに、1時間以上もの時間をかけてしまった(´；ω；`)ｳｩｩ

そして、迫さんにもこれだけのミスを見つけるために、時間をかけさせてしまった……。

ちゃんとコード見ないと(;´･ω･)#SkillHacks pic.twitter.com/FKjrwVvm4t

— フレッシュすばるくん＠プログラミング勉強中 (@furesuban) February 1, 2019