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

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

今回はカードタイプのコーディングを行いました。

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

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

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

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

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

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

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

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

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

👇参加者のツイート

ひろきさんのライブコーディング、今回もすごく勉強になりました！
カード部分のパーツ化、CSS設計、考え方など多く学ぶことができました！
一緒に参加しながらググることでスキルが身に付いていくことが実感できました😄
また参加したいと思いますので是非よろしくお願い致します！！！#codeUps https://t.co/3LFkC39K2Y

— がっちゃまん@ガチWeb制作 (@Gaaaachaman) October 15, 2021

#codeups HTMLライブ配信

使いまわしを想定してブロックをつくるの、今のカンプでは全然やってなかった…
から、一旦見直す。

あとカード並びでflexを使って、内側の余白をとるのはgapが便利だなと思ったので、それも使ってみよっと🎵

— emi＠Web制作学習中 (@emi090305) October 15, 2021

今日のLiveはカードのコーディング。CSS設計の考え方、表示崩れしないCSSの当て方。画像の実装はどんな大きさのimgでも表示崩れしないようにheightは指定せず％で実装。最初の設計からパーツの使いまわしを配慮すると修正スピードも⤴️　毎回なるほどの連続です✨今日もおつかれさまでした☺️#codeUps

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

【#たこやきロードマップ Day166】

作業時間：3h #今日の積み上げ
☑︎#codeups ライブコーディング参加
☑︎問い合わせ対応
☑︎打ち合わせ

一つのレイアウトでも、いろんなコーディングの仕方がある。誰かのコーディングを見る度に『こんな方法もあったのか！』と知れるので、とても楽しい😎

— たこやき🐙webコーダー (@takoyaki_dayo_) October 15, 2021

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

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

また、今回のライブコーディングでは実務で使うにはまだ早いと思われる書き方も紹介しています。

aspect-ratio
gap
など。​

実務では、実装可能かよく判断した上で使うようにしてください。

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

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