N予備校プログラミングコースでは、毎週行っているプログラミング授業のほかに毎月1回の頻度でプログラミングコース座談会という番組を行っています。
この番組では、授業中での回答が難しい質問や悩み、エンジニア就職に関する話など、授業ではメインで扱うことが難しい話題を取り扱っています。
プログラミングコース座談会N予備校プログラミングコース
View Slide
プログラミングコース座談会プログラミングコース座談会は、プログラミングに関する相談・悩みへの回答や、N予備校プログラミングコースについての意見交換会などを行う番組です。
● 菅原 優(すがわら ゆう)● 大学4年(工学部)● 教材制作をさせていただいています● ちょうど一週間後7/8 の「プロフェッショナルプログラミング」出ます● 普段していること○ アニメを2.7倍速で見ること(おすすめ教えてください)○ 二郎系ラーメン好きです○ Adoさんの曲を聴きまくっています本日のゲスト
あなたのいいところ診断アレンジしてみた本日のテーマ
菅原さんver
装飾がんばってみた
ポイント1: 好きなレイアウトにしてみたAfterBefore
ポイント1: 好きなレイアウトにしてみたFigma というツールを使ってデザインしました
ポイント2: アニメーションをつけてみた「診断」を押すと猫がカラフルになります
ポイント2: アニメーションをつけてみたcssを書いた属性(classなど)を与えるとアニメが始まりますCSS JS
ポイント3: OGPをつけてみたTwitterやSlackに投稿するとこの画像(と文章)が出ます
気にしたところ1: CSSファイル分けてみたHTML CSSCSS1CSS2CSS3CSS4
気にしたところ2: セマンティックHTMLslackの #プログラミングコース座談会 での質問
気にしたところ2: セマンティックHTMLdiv と nav に、css/js 上の差はありません他にも、article や section, main なども divと一緒ですしかし、- 開発者(コードを書く人)- 検索エンジン- 読み上げツールにとっては、差があります
気にしたところ2: セマンティックHTMLこういう要素があったとしましょう出典: : 記事コンテンツ要素 -HTML: HyperText Markup Language | MDNhttps://developer.mozilla.org/ja/docs/Web/HTML/Element/article
気にしたところ2: セマンティックHTML内容を差し替えようと思ったとき、どちらが見つけやすい?
気にしたところ2: セマンティックHTMLいいところ診断のように差し替えをするとき、こうなることも
気にしたところ2: セマンティックHTMLということで、申し訳程度にheader と main をつけてみました- もっとできる気はする- でも無理はしなくていい詳しく知りたい方は「セマンティック HTML」で調べてみよう
小枝先生verあなたのオススメの授業診断
ソースコードWebページ
プロ的ビフォーアフター
ポイント1: assessment関数を2行にBefore
ポイント1: assessment関数を2行にAfter ヒミツ道具:コレクション関数
ポイント2: タグは作らずにテンプレ式にBefore
ポイント2: タグは作らずにテンプレ式にBefore ヒミツ道具:spanタグ
ポイント3: オブジェクトを使ってわかりやすくヒミツ道具:オブジェクトの配列
ポイント4: ボタンを削除してリアルタイムにポイント5: 表示のオンオフを1行でポイント6: document.getElementByIdは省略ヒミツ道具:oninputヒミツ道具:三項演算子ヒミツ道具:変数に入った関数
フリータイム