【インターン生の記録】コーダー養成コース2週目
HTML/CSSをタグの意味を考えながら書いていく
今週の講座に入る前に、まずは前回の課題について解説があります。
Slack（オンラインでチャットするツール。Web業界ではよく使われているらしいLINEのようなものです）上で、課題については私含めみなさん出されていました。
初回なので、それほど大変な課題では無かったですが、全員、同じ課題でも少しずつやり方や見え方が違いました。
受講生が提出したものを使って進めてくれるので、自分がどのようにコーディングしたのかを思い出すと同時に、他の受講生の課題を見て新しい知識を得ることもできます。
受講生それぞれ、できているところとできていないところがありますが、分かるまで聞くことができるのは少人数の講座ならでは。
コーディングの基本の「き」の一画目くらい見えてきた感じです。
自分が書いたソースで、ブラウザで表示されるのが初めてのことだったので、再現されるととても嬉しいです！
HTML/CSSの実践
最初にデザインデータからの画像の書き出しについて、二つの方法を学びました。
スライスツールを使って書き出す方法、そしてPhotoshopのアセット機能を使う方法です。
Photoshop未経験の受講生もいるため、この内容については解説のみしていただきました。
HTML、CSSの基礎知識を見直した後は．．．
実際にHTML/CSSで簡単なコーディングに挑戦です！
サンプルでもらったソースを動画で貼り付けます。
ソースを見ると、すぐに解答がわかってしまうので、まずは自分で考えてHTMLを書くところが進めます。
見出しやテキスト、同じデザインを繰り返すところなど、コーディングの決まった法則があるので、そこを押さえつつ進めます。
先週の課題ではヒントがたくさんありましたが、今回はスタートから自分で進めていきます。
それぞれ自分で課題に取り組みながら、分からないこと質問するという流れで講座は進みます。
正直ちょっとしたことでつまづきますが、少人数なので分からないことはどんどん質問できますし、だれかの疑問から新しい学びを得ることもできます。
スマホ対応で欠かせないレスポンシブデザイン
レスポンシブデザインとは、同じWebサイトでもiPhoneやパソコンなどデバイスに関係なく画面サイズに応じて表示を変えるデザインのことです。
どのデバイスでも綺麗に表示されるようにレイアウトやデザインを調整します。
今週の課題も、レスポンシブ対応させて完成です。
作るモチベーションが上がるデザイン
以下の写真は、実際の課題のデザインです。
私は宝塚歌劇が好きなのでテンションが上がります♪
シンプルなデザインですが、実際の仕事で必ず使う要素が詰め込まれています。
Google Chromeデベロッパーツールというのもはじめて知りました。こうやってソースを確認できるとは新鮮です。
おまけ：コーディングは楽しい
まだまだ知らないことばかりで、勉強することがたくさんあります。
普段見ている、ホームページがこんな細かい作業によって作られていることが新鮮です。
ですが自分が思い描いたように動かせた時はとても大きな喜びがあります！
来週に向けて、どんどん新しいことを学びたいと思います。
SNSで#BASEWebスクール のタグで授業の雰囲気を見ることができます
ツイッター、インスタグラム、facebookで授業の様子などを発信しています。 特にインスタの #BASEWebスクール のタグで授業の雰囲気を見ることができるので、ぜひチェックしてみてください。
【インターン生の記録】コーダー養成コース
- 1週目：Webの基本
- 2週目：HTML/CSSの実践
- 3週目：スマホ対応に欠かせないレスポンシブ対応
- 4週目：WordPressについて
- 5週目：WordPressのテーマ
- 6週目：卒業課題について
- 7週目：コーダー養成コースが修了しました
