Webアプリ開発コース初級編
WEBサイトとミニアプリを作れるようになろう
- DAY 1【旧課題】ゼロからサイトを作ってみよう②
引き続きHTML/CSSを書いて、デイトラアプリの簡易版サイトを作るライブコーディング授業を行っていきます。
今日はメインコンテンツ〜フッターまでを作っていきましょう！
01.メインコンテンツを作ろう
ABOUTとコース一覧までをコーディングしていきます。
- デイトラとは、無料で・迷わず・楽しく学べるプログラミング学習アプリです。 毎日設定された課題をこなしていくだけで、未経験から30日でプログラミングスキルが身につきます。
1日1題30日でプロのWebエンジニアを目指しましょう! - HTML / CSS / Bootstrap
- HTML / CSS / JavaScript / jQuery
- PHP / WordPress
ここでの１番のポイントは「flex」です！
flexboxを使うと、
- 要素の横並び「diplay:inline-block;」
- 高さの中央揃え「vertical-align:middle;」
- 右揃え・左揃え「float」
これら全てを簡単に代替できます。
オススメ記事も紹介しておきます↓
日本語対応！CSS Flexboxのチートシートを作ったので配布します
【コーディング初心者のためのTips】
✅要素の横並び「diplay:inline-block」
✅高さの中央揃え「vertical-align:middle」
✅右揃え・左揃え「float」
『flexbox』でこれら全てを簡単に代替できます。オススメ記事👇https://t.co/fxggMsq6oo
無料のチートシートも配布されてるのでチェックすべし👍 pic.twitter.com/NWJv5G2PKm
— ショーヘー@バンコク🇹🇭 (@showheyohtaki) 2019年1月22日
02.お問い合わせ・フッターを作ろう
続いてお問い合わせ〜フッターまでをコーディングしていきます。
- さあ今日から30日間を始めよう!
- 無料ではじめる
- Copyright(C) 2020 東京フリーランス ALL Rights Reserved.
ここでのポイントは「inputタグへのスタイルの当て方」ですね！
また今回は送信まではしませんでしたが、「form」タグも今後使っていくのでぜひ調べておきましょう！
それではお疲れさまでした。ここまでくると大分サイトっぽくなってきましたね！
いよいよ明日には完成です！DAY7も頑張っていきましょう！
03.スペルミスの予防法は「気をつける」ではない！
初心者のエラー原因No.1は、「単純なスペルミス」です。
そんな時、多くの人は「こんな単純なことで引っかかるなんて...次から気をつけよう」と思って終わります。
「気をつける」は、何の予防にもならないのでアウト！そもそも今だってわざとスペルミスをしたわけじゃありませんよね。気をつけてたのにミスしたはずです。
「気をつける」では問題の解決にならないんですよ。
ここで考えるべきは、論理的な再発防止策です。問題の根本を探り、それを解決するために具体的な対策を講じてこそ、プログラマー思考というもの。
スペルミスの予防法としては、コードを手打ちするのをやめましょう。手書きで書くからミスが起きるんです。どんどんエディタの予測変換に頼ってください。
HTML/CSSの場合はEmmetのショートカット記法で書くのも有効ですね。頭の２文字程を打ってタブを押せば確実にスペルが正しいタグが出力されますからね。
楽していいんですよ！タグのスペルなんてちゃんと覚えなくていいし、早く正確なタイピングスキルもいりません。コードを手打ちしなければ、そもそもタイプミスはおきませんから。
改めて言いますが、スペルミスの対処法として「気をつける」は厳禁です。コードを手打ちするのもやめましょう。
極力エディタの予測変換とEmmetに頼るのが正しい「スペルミス」の予防法です！