12. From Zero to Front-end Hero (Part 1)

【所要時間】

2時間8分（2018年7月15日）

【概要】

・フロントエンドの開発技術の学習法のガイダンスその1/2
・ここではHTMLとCSSについて学ぶ。

【要約・学んだこと】

・HTML and CSS basics
HTMLとCSSはウェブ上で見えることをコントロールする。
HTMLが中身を、CSSがスタイルやレイアウトを 扱う。

1. MDNでHTML , CSSチュートリアルを読む
2. CodeAcademyでMake a website コースを受講する。（数時間で終わる。）
3. もっと学びたい場合は、CodeAcademyのBuilding web formsのチュートリアルで、ウェブフォームの構築とスタイリングを学ぶ。
4. 練習としてCSS Dinerというゲームをやる。
5. LearnLayoutでどのようにHTMLとCSSでレイアウトを作るのか学ぶ。
6. Google FontsとBasics of Google Font Apiの使い方を、CSSTricksで学ぶ。 Typographyは基本的なインターフェースのビルディングブロックのことである。
7. 時間がある時にDonny TruongのProfessional Web Typographyという無料オンラインブックを読むことを強く推奨。typographyについてfront end developerが知るべきことがわかる。

これらのカリキュラムはHTMLとCSSがどのように動作するかを理解することにフォーカスしており、暗記量は多くない。

・Practicing HTML and CSS Basics

・Experiment1
CodePen は、ファイルをローカルに保存せずにHTMLとCSSがコードが書けるフロントエンドの遊び場である。

CodePenでHTMLとCSSが実行でき、基礎的な進捗ポートフォリオを作ることができる。
また、デザインインスピレーションが豊富なDribbbleも使う。

デスクトップよりも簡単なモバイルデザインを最初に学ぶ。1, 2, 3, 4 , 5

開始後に悩む部分があれば、StackOverflowを参照する。
他にもMedium, AirBnB, Dropboxなどがどのようにレイアウトやスタイルを作っているのが、inspector toolで見るのも役に立つ。
デザイン感覚についてはdevelop your design eyeが役に立つ。

・Experiment 2
いくつかのサイトを見て、一部のコードを書く（全てのページではない）。

Dropbox for Business : Try replicating their hero section
AirBnB : Try replicating their footer
PayPal : Try replicating their navigation bar
Invision : Try replicating their signup section at the bottom of the page
Stripe : Try replicating their payments section

右クリック→inspectをクリックで、ウェブサイトのHTMLとCSSは見ることができる。わからなくなった時や、終わった後に、自分のコードとウェブサイトのコードを比べてみる。

・HTML and CSS Best Practices
ベストプラクティスを学ぶ。ベストプラクティスとはコードのクオリティを上げるインフォーマルなルールのこと。

・Semantic Markup
HTMLとCSSを練習するベストな方法の１つは、semaantic markupを書くことだ。
いいウェブセマンティクスとは、適切なHTMLタグと、意味のあるCSSクラス名で、構造的な意味をつたえることである。
CSSTricksのA Look Into Proper HTML5 Semantics and What Makes For a Semantic Class Name に詳しい説明がある。

・CSS Naming Conventions
CSSでベストな練習方法は、適切な命名規則をきめるである。
semantic markupのようないい命名規則は、コードを予測しやすく、読みやすく、維持しやすくしてくれる。
OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?

最初は直感的にわかるシンプルな命名規則を使うと良い。のちに良い方法がわかってくる。Medium’s CSS is actually pretty f***ing good

・CSS Reset
ブラウザーはマージンから行高まで、小さなスタイルの違いがある。よって、いつもCSSをリセットする。
MeyerWebは人気のリセットで、もっと深く知りたい場合はCreate Your Own Simple Reset.css Fileを読むとわかる。

・Cross Browser Support
Cross browser supportは、自分のコードがほとんどの最新ブラウザをサポートしているという意味である。
transitionのようにvendor prefixesが必要なCSSもある。基本的にはChrome, Firefox, Safariなど様々なブラウザでテストをするべきだ。

・CSS Preprocessors and Postprocessors
CSS preprocessorsはCSS拡張言語で、変数、ミックスイン、継承のような付属品を加える。
主にSassとLessがある。2016年では、Sassの方が広く使われている。また、多くの人がSassについて話しているときはSGSSのことをのことを話している。

CSS postprocessorsは、手書きかpreprocessorで編集された後に、CSSに変更を適用する。

・Grid Systems and Responsiveness
Gridシステムとは、要素を水平や垂直に積み上げるCSSの構成である。
Bootstrap, Skeleton, FoundationのようなGrid frameworksは、行や列を管理するstylesheetsを提供する。
gird frameworksがどのように動作するを理解することも重要で、Understanding CSS Grid SystemsとDon’t Overthink Gridsがよく書かれた概要である。

gridシステムを導入する大きな理由の１つは、ウェブサイトに応答性を加えることだ。応答性とはウィンドウ幅に合わせてウェブサイトをリサイズすることだ。
CSS media queriesを使って応答性が作られることが多々ある。
media queriesについては、Intro to Media Queriesに詳しく書いてある。これらも参照。 mobile-first, An Introduction to Mobile-First Media Queries

・Practicing HTML and CSS Best Practices
次の2つの実験では、綺麗なコードを書くことと、可読性と保守性の影響を長期的に観察することが目標だ。

・Experiment 3
refactoringとは読みやすく、単純化するためにコードを編集することだ。CSS Architectures: Refactor Your CSSはrefactoringを始めるのに良い。
・6ヶ月後にも理解できるクラスネームの意味になっているか。
・HTMLとCSSはsematicか。コードを一目見て構造や関係がわかるか。
・同じhex color codeを使いまわしているか。Sass variable
・SafariでもChromeでも機能するか
・!importantフラッグをどれくらい使っているか。どうやってしゅうせいするか。

・Experiment 4
自分のportfolioウェブサイトを構築する。フロントエンドとして、portfolio siteは最も重要なデジタル財産の１つになる。それに加えて、自分の作品の進歩や発達の記録となる。

はじめに、Adham DannawayのMy (Simple) Workflow To Design And Develop A Portfolio Websiteのやり方に従う。
重要なのは自分のスキルを積み立てることだ。

・Stay current

フロントエンドの環境を常に最新に保つことは重要。
下記のウェブサイトがいい。
CSSTricks
Smashing Magazine
Designer News
Nettuts+
CSS Wizard

・Learn by example
Styleguidesなどから、より効率的なフロントエンドを学ぶとよい。
Web styleguidesは多くのウェブサイトで流用できるCSS構成やパターンのコレクションだ。

Mapbox
LonelyPlanet
SalesForce
MailChimp

・Code Conventions
code conventionsはコードを読みやすく、メンテナンスしやすくするためにデザインすることだ。
CSS GuidelinesやGithub internal CSS toolkit and guidelines, AirBnB’s CSS StyleguideはよりよいHTMLとCSSを書くためのガイドラインだ。

・Wrap up
フロントエンドを学ぶベストの方法は、プロジェクトや実験をすることだ。

【わからなかったこと】

特になし。

【感想】

wrap upは要約という意味。