【初学者向け】HTMLとCSSの考え方のライブコーディングのアーカイブ動画【参加者170名超】

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

スキルアップ支援サービス「CodeUps」の内部で予定していたHTML構築に特化したライブコーディングを外部からも参加者を募り、総勢170名(外部114名)を超える方に視聴していただいた動画になります。

CodeUpsの旧コーディング課題で受講生が苦労した部分を取り上げ、私が考える好ましい例を踏まえた上で、受講生が提出してくれた際の好ましく無い例も実際に紹介しています。

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

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

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

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

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

👇参加者のツイート

@HIROKICHI_315 さんの #codeups のライブ配信に参加させてもらいました。

初学者の私に理解できるのだろうか、と心配でしたが実際に構築されていく過程というものを見るだけでもとても勉強になりました！

質問がどんどん上がってくるところとかも、皆さんのモチベーションの高さを感じました😳

— みや | webデザイン独学 (@PCweb7) August 19, 2021

昨日はひろきさん(@HIROKICHI_315)の #codeups の講座に参加してました

人のライブコーディングを見るのってやっぱり勉強になります
どこに詰まってどう解決するのか、どう考えてコーディングするのかみたいな部分は学びの宝庫

最後は僕も登壇して雑談してましたｗ
コーディングの話は楽しいですね

— しめじ＠Web制作→SNSマーケター (@simeji_pro) August 20, 2021

昨日の #CodeUps ライブコーディング参加させていただきました。
有意義な時間をありがとうございました✨

その後、CodeUpsで紹介されていた手法に基づいてコーディングしておりますが、とにかく快適で、楽しくて仕方ないです☺️ （特にモバイルファースト＆rem）

今後も配信など楽しみにしています🌸

— らて@Web制作 (@m__01711181) August 20, 2021

昨日は #codeups ライブコーディングに参加しました。外部受講者含めて170人超えはすごかったです。
ひろきさん @HIROKICHI_315 の説明はわかりやすくて反響もすごい良かったと思います。
コーディングスキル向上なら #codeups 一択ですね。

— Sassy＠30代Webコーダー学習中×呉服屋店長 (@luxeadd) August 20, 2021

昨日の#codeups
の勉強会。@HIROKICHI_315 お疲れ様あああ！！！⭐️@simeji_pro @junpei_sugiyama さんとも勉強会のあとたっくさん雑談して。
楽しかったああああああ！☺️☺️

アプス受けてコーディングが更にだいすきなったし、とにかくひろっちの受講生への愛がいっぱいで
ほんまにみんなやるべし！

— ここあ😎ぱりぴコーダー← (@cocoadepon) August 20, 2021

昨日、CodeUps_HTMLコーディングライブ配信（@HIROKICHI_315）に参加させていただきました！コンポーネントや余白の付け方、幅や高さの取り方等、今日からのコーディングに活かせる情報をたくさん教わりました。ひろきさん、ありがとうございます^^。折を見て、入会をさせていただきます！

— HEY@WEB制作フリーランスを目指し継続学習中 (@ss5126) August 20, 2021

#codeUps
コーディングライブ配信拝聴しました。
BEM設計手法を勉強しながら、模写をしている段階でしたので、とても勉強になりました。これを週一で受けれて、コーディングのフィードバックももらえたら伸びるだろうなと感じました。また是非参加させて頂ければと思います。ありがとうございました☺️

— はくが@Web制作 (@hakuga464) August 20, 2021

昨夜は興味があった #codeUps のライブコーディングに外部参加✨
2時間あっという間でとても勉強になりました☺️

ひろきさん(@HIROKICHI_315)の
コーディングを楽しんでほしいという熱い気持ちも伝わってきてもっと頑張ろうと思った💪

— Yado@Web制作学習中 (@yado0503) August 19, 2021

昨晩の #CodeUps のライブコーディングに外部参加しました！

独学でやってきて知り得ない情報だらけで濃密な学びの時間でした。

あれほど考えてコーディングできると楽しいだろうなと思えて、できたときの自分を想像するとワクワクしました😊

— こーた@朝活1年継続で人生変化中のWeb制作者 (@kotaclprg) August 19, 2021

#codeUps
CodeUps_HTMLコーディングライブ配信の勉強会に参加しました。

・共通パーツからコーディング
・背景は後からでも大丈夫
・余白のとり方
・height指定はしない
以上、参考にさせていただきたいと思います！
とても丁寧な解説で大変勉強になりました。

— らき@脱・医療系Web制作クリエイター (@web_laki) August 19, 2021

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

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

※構築の考え方がメインになっているのでデザインを完全再現しているわけでえはないのでご了承下さい。

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

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