見出し画像

【2020/01/14】 本日の課題は「画像付きリスト」です!

2020年、最初の256times LIVEのお題について説明していきますね。

■ 本日の流れ

前回と同じく以下のようなスケジュールです。

・21:00 課題発表
・21:30 課題提出締め切り、休憩
・21:35 コードレビュー開始、時間が余ったらプログラミング学習相談
・22:00 番組終了

■ 画像付きリストを作ってみよう!

今回はよくみる画像付きリストを作ってみましょう。メディアサイトでもウェブサービスでもこうしたリストはよく作りますよね。

スクリーンショット 2020-01-14 19.32.03

↑ こういったリストを作ってみてください。

今回の仕様は以下のとおりです。

・上図のような画像付きリストをHTML/CSSで作ってください。
サイズや色はご自身がもっとも美しいと思われるもので良いです。
・ブラウザ幅に対して可変幅にしてください。
・画像は https://dotinstall.com/img/256times/logo.png を使ってください(他の画像でもいいです)。

なお、すぐに終わってしまった人は「ボタン類」をつけてみるのもいいでしょう(もしくは自由に改造してもOK)。

スクリーンショット 2020-01-14 19.32.34

↑ 余裕がある人はアイコン付きのリストにもチャレンジしてみるといいでしょう。

■ コードレビューを受けるには?

なおコードレビューを受けるには「256timesプレイグラウンド」をご利用ください。

使い方の詳細は「256timesプレイグランドの使い方」からどうぞ。コードレビューを受ける方法についても以下で説明しています。

・256timesプレイグラウンドの使い方|256times|note
https://note.com/256times/n/n9e81f49c8f5a

■ プログラミング学習に関する質問も受け付け中!


コードレビューにどれだけ時間がかかるかわかりませんが、時間が余ったらプログラミング学習に関するご質問にも答えていきたいと思います。

もし質問があれば #256times のハッシュタグでつぶやいておいていただければ番組中でフォローしていきますね。

■ なにかあれば #256times まで!

その他、なにかあれば #256times でつぶやいてみてください。

・256times(@256times)さん / Twitter
https://twitter.com/256times

それではがんばってチャレンジしてみてくださいね!

この記事が気に入ったらサポートをしてみませんか?