スキルハックス

【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を入れた後ではかなり違うんですよ!

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

 

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

 

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

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

これだけ。

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

 

HTMLでコツコツ書いて…

 

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

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

 

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

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

 

迫さんの返信も、15分以内に返信もらえたし、本当に早かった!

 

次の講座では、bootstrapというCSSの使い方を簡単にする方法を学ぶので、個人的に楽しみです(*´ω`*)

Skill Hacksの公式サイトはこちら
SkillHacksのほかの記事はこちらから↓

スキルハックス