【初学者向け】HTMLとCSSの考え方のライブコーディングのアーカイブ動画【第2回目】

9月16日21時から配信したHTML構築の考え方とCSSの当て方を意識したライブコーディングのアーカイブ動画です。

今回はヘッダー周りの実装をしました。

スキルアップ支援サービス「CodeUps」の内部で予定していたHTML構築に特化したライブコーディングを多くの方に視聴していただいた動画になります。

CodeUpsのコーディング課題で受講生に多く指摘している部分を取り上げ、私が考える好ましい例や、気をつけておくべき部分の例もに紹介しています。

もしかしたらあなたも好ましくない例を使ってコーディングしてしまっているかもしれません。是非、アーカイブ動画を見て確認してみて下さい。

第一回目のライブコーディング動画はこちら

こんな方におすすめです。

・HTML構築の考え方を知りたい
・CSSの良い例と悪い例を知りたい
・コーディング方法に自信が持てない
・人がコーディングしている様子を覗いてみたい
・コーディング勉強中の方

初学者向けの内容になっているので現在学習中の方に見てもらいたい内容です。

リアルタイムのライブコーディングで私も事前準備をほぼすることなくイチから構築していますので非常に参考になると思います。

👇参加者のツイート

今日のヘッダー部分のライブコーディング、わかりやす。難しいと思っていた課題ですが、なんとか取り組めそうな気がしてきました。今日の内容はアーカイブでもう一度視聴したいです👩‍💻今日もおつかれさまでした✨

✅#codeUps live配信　
　　HTML構造の考え方・CSSの当て方
✅#Coding 　#Web制作

— さわ@ハケン事務×Web制作×Webマーケ (@sawa_designers) September 16, 2021

おはようございます🌸
昨日は #codeups ライブコーディング参加させていただきました✨

今回はhamburger menuやheaderあたりのコーディングの考え方が学べて相変わらず有益でした！

ヒロキ（@HIROKICHI_315 ）さんありがとうございました🌸#駆け出しエンジニア と繋がりたい

— ちい🐼Web制作で－家計を+に🌸 (@tsurupiyoo) September 16, 2021

#CodeUps#web制作
✅CodeUpsライブ配信
ひろきさん（@HIROKICHI_315）が
HTMLが苦手な人へ考え方と構造解説してくれました！

苦手意識は無いけど考え方が統一されて凄く勉強になりました😌

普段は寝る時間🤤
でも配信後のアフタートークが気になりすぎて起きてました。
記憶があるのは11時半まで😴

— ぐっさん@公務員→コーダー (@Gussan_1056) September 16, 2021

昨夜@HIROKICHI_315 さんの #codeups ライブコーディング参加させていただきました！

クリック領域の拡張にpaddingとheight:inherit;を使うなど有益な情報ばかりでした

その後の質問会もしめじさん@simeji_pro などのお話も聞けてとても有意義でした！アーカイブでしっかり復習したいと思います🙏

— かわとも@WEB制作 (@kawatomo_01) September 16, 2021

昨夜は #codeups のライブコーディングに参加❗️
クリック領域を広げる為に
padding指定するなど、
今回も有益な情報ばかりでした✨
アーカイブでしっかり復習します😊#デイトラ　卒業制作
修正後、完成まであと少し！！

— yado@Web制作学習中 (@yado0503) September 16, 2021

このような声を沢山いただきました！感謝です！

動画の中では、一緒に手を動かしながら確認できるようになっていますので、一緒に構築してみてください！

※構築の考え方がメインになっています。デザインを完全再現しているわけではないのと他にも適切なコーディング方法もあると思います。

当日使用したコードやファイル一式

こちらのURLから必要な情報をダウンロードしてお使い下さい。