HTML&CSS 初級編 終了
無料なんで安心！
初級編は無料で出来ますので安心して取り組めます。
まず中級編に行くまでにしっかり回数をこなして
体得するよう取り組む。
初級は、HTMLとは？CSSとは？タグ？
ヘッダー？フッター？から始まり、
文字の大きさや色などの設定、コンテンツ作り
そしてお問い合わせフォームの作り方などを学習しました。
エディターは、『Visual Studio Code』で決まり！
まずはエディター選びから！
ということで、いろんな方が
お勧めしているエディターの
中でも一際人気があって評価の高い
『Visual Studio Code』という
エディターに決めました。
- 無料！
- 動作が軽い！
- プラグインが豊富！
- WindowsでもMacでも使える！
- 多数の言語に対応している！
- Emmetが標準搭載されている！
- マルチカーソル対応！
などなどありましたので、これはお勧めです！
YouTubeにもいっぱい上がっているので
わからないことがあっても調べが
つくので良いですよ！
ちなみに作っているのは、あのマイクロソフト社です。
初・模写コーディング！
私は初級編を４回ぐらい繰り返したところで、
模写コーディングがどんなもんかと
試しに！！ やってみました！
ふるさんという方がお勧めしている東急リバブルの
ランディングページの模写をやってみました。
『Image Downloader』は必須！
とは言ったものの……
いったい何から始めたら良いものか？
と考えて、イロイロ調べますと、
画像として使っているものは
グーグルの拡張機能の『Image Downloader』と
いうものを入れてダウンロードが出来ると！
いうことなので、早速イメージダウンローダーを
入れて画像のダウンロードをしました。
それからHTMLを書き込んでいき、
更にCSSで装飾を施していく訳ですが、
全然思うようにいかなくて苦労しっぱなしで、
とにかくわからないことはググってみて
何とか何とかでスゴイ時間がかかりましたが、
パッと見の出来は良いのではないかと思いました。
しかしこの先が思いやられるな……。
実際のコードも多分むちゃくちゃで
かなりの力技で強引に仕上げたな！
って感じの仕上がりです！
パッと見は良い感じではないでしょうか？
でも相当力技で合わせにいっているので
コードはグチャグチャだと思います。
初級だけしかやってないことを思うと
出来栄えは良いのではないでしょうか？
ただこれだけ模写するのに１週間ぐらいはかかりました。
次に中級編へ突入！！
HTML&CSS 中級編 終了
ここからは有料になるので、出来るだけ効率よく
短時間で取り組まないといけないのですが、
中々思うように進みませんでした。
中級編は、ランディングページと呼ばれる
webページの制作を学習しました。
レイアウト作りやボタン、ログインリンク作り、
レイアウトの整え方、立体的なボタン作り、
更にボタンクリックした際にボタンが引っ込むような
アクションなどを学び、出来ると面白いもんですね！
HTML&CSS 上級編 終了
上級編は、レスポンシブデザインの学習でした。
レスポンシブデザインは、今の時代必須となりますね。
ほとんどスマホから見られるので、スマホサイズで見て
型が崩れてしまってはダメですもんね！
レスポンシブデザインとは、閲覧者の画面サイズ、ウェブブラウザに応じてウェブページを閲覧出来ることを目指したデザインのこと。要するに、パソコンの画面でもスマホの画面でも型を崩さずにサイトを見ることができるデザイン。ただ、画面の大きさがそもそも違うので配列、配置は変えることになりますが。例えば、パソコンの画面だと横に4つの箱が並んでいたとして、タブレットだと横に2つ、縦に2つにしたり、スマホだと横１つ、縦に４つみたいに画面の大きさに合わせて変化させてあるデザインをいいます。
一通り終了しましたが、まだまだなので…
とりあえず初級編から上級編まで一通り
終えましたが、やってるうちに前の部分を
忘れていってるのでもう少し復習をしてから
模写コーディングに入りたいと思います。
今現状はこんな感じの進捗でした。
ではまた✋
コメント