#1 progateでHTMLを学んでwebエンジニアを目指す! ~HTML&CSSの基礎編~

HTML&CSS
この記事は約3分で読めます。
スポンサーリンク

webエンジニアとして仕事をもらう】という目標のもと、HTMLとCSSの勉強を開始した当ブログ管理人。

まずはプログラミングのオンライン学習サービスであるprogateのコースをひととおりやることにしました。

そこで、勉強過程を記録していきたいと思い記事にしていくことに決めました。

いずれこの記録が私と同じように独学でwebエンジニアを目指す人たちにとっての道しるべとなれば幸いです

今回学んだコース

私が今回学んだのはprogateの【HTML&CSS 初級編】。

終了時間の目安は3h50mとなっており、2日ほどの積み立てで完了することができました。

集中すれば1日での達成も可能でしょう。

内容は

  • htmlの基本構造
  • タグの使い方
  • ヘッダー、コンテンツ、お問い合わせ、フッターという単純なwebページの作成

となります。

学んだ内容をアウトプット!

progateをやった感触としてわかりやすい説明・ガイドでさくさくすすむのですが、その分記憶の定着ができていないと感じました

したがって、これからはコースの完了や一区切りついたタイミングで自分でwebサイトを作って学んだ知識をアウトプットすることに。

学んでいくうちにだんだんと質の良いwebサイトができていくはずなのでモチベーション維持にもつながるのではないかと考えました。(学習中の皆さんはまねしていいですよ笑)

ということで学んだスキルをもとに【自分のポートフォリオサイト】を作っていくことにしました。

今回のコース【HTML&CSS 初級編】で作ったサイトはこちら 

(レスポンシブ対応していないのでスマホだと表示が崩れます。これも学んで改善していきます!)

 https://nosuke0421.github.io/pgate1/

学習した内容に基づいて

  • ヘッダー
  • コンテンツ
  • お問い合わせ
  • フッター

を作成してみました。

HTML未経験でも上のようなサイトを作ることができるという証明になったかと思います。

学んだ内容

せっかくなのでprogateのHTML&CSS 初級編で学んだ内容をサラッとあげてみることにします。

これから受ける人は目安としてお考え下さい。

  • 基本のhtml
    • ひな型
    • CSSの読み込み
    • 基本的なタグ(h1/h2/div/p/img/input/textareaなど)
    • classの設定
  • 基本のCSS
    • CSSの書き方
    • タグの中のクラスなど階層構造を指定
    • 一度に複数のセレクタを指定
    • font関連
    • width,height
    • margin,padding
    • float
    • background関連
  • 具体的なパーツとレイアウト
    • in-line要素とブロック要素
    • ブロック要素を横に並べる
    • ヘッダーの作り方
    • コンテンツを並べて表示
    • フッターの作り方
    • お問い合わせフォームの作り方

まとめ

今回はprogateを利用してHTML&CSSの基本的な書き方を学ぶことができました。

その過程で簡単なwebサイトの作り方、コラムとして載っていた「自分で作ったサイトを公開する手順」も学ぶことができました。

これからどのようなことが学べ、どのようにサイトが成長していくのか楽しみです。

プログラミングを勉強中の皆さん、一緒に頑張っていきましょう!

くま
くま

Twitterもやってるからよければチェックしてくれな!

コメント

タイトルとURLをコピーしました