• ホームページ
  • 記事
  • ウェブ
  • 設計者はどのようにコーディングを学ぶべきですか？ Git、HTML / CSS、エンジニアリングの原則（パート2）

設計者はどのようにコーディングを学ぶべきですか？ Git、HTML / CSS、エンジニアリングの原則（パート2）

公開: 2022-03-10
簡単な要約↬パート1では、Paulがターミナルの基本を説明し、作業を開始するための生産性のハックをいくつか共有し、コードエディターの選択方法を説明しました。 このパートでは、バージョン管理（Git）、HTMLとCSS、セマンティックコード、およびいくつかの主要なエンジニアリング原則の簡単な紹介のトピックを続けます。

文字通り、テーマはバージョン管理で書かれています。 それでも、私は簡単な説明と他の紹介コンテンツを共有することから始めて、さらなる研究へのあなたの欲求を刺激します。

バージョン管理（バージョン履歴と混同しないでください）は、基本的に、信頼できる唯一の情報源（「マスター」ブランチと呼ばれることが多い）を使用して、単一のプロジェクトで自分の環境で共同作業を行うための方法です。

今日は、プロジェクトをダウンロードして変更を加え、それをマスターに送信するために知っておく必要のある最低限のことです。

ソースコードを管理およびホストするためのバージョン管理ソフトウェアとツールには多くの種類があります（GitLabまたはBitbucketについて聞いたことがあるかもしれません）。 GitとGitHubは、より一般的なペアの1つです。私の例では、GitHubを参照しますが、原則は他のほとんどのソースコードマネージャーに適用されます。

脇：

  • より包括的で技術的な紹介については、TobiasGuntherの記事を参照してください。
  • より実践的なアプローチを好む場合は、GitHubに優れたステップバイステップガイドがあります。

データの収集、強力な方法

CSSを使用して統計を収集できることをご存知ですか？ 実際、GoogleAnalyticsを使用してUIインタラクションを追跡するためのCSSのみのアプローチもあります。 関連記事を読む→

ジャンプした後もっと！ 以下を読み続けてください↓

あなたの最初の貢献

これらの手順を実行する前に、いくつかの設定が必要です。

  1. GitHubアカウント、
  2. コンピューターにインストールされているノードとNPM、
  3. 痛みに対する高い耐性、または他の人に助けを求めるための低い閾値。

ステップ1：フォーク（GitHubアカウントのコードのコピーを取得する）

GitHubで、問題のリポジトリ（リポジトリ）をフォークします（フォーク=アカウントにコードのコピーを作成します。次の図では、青、オレンジ、赤、緑の線がフォークを示しています）。

マスターからブランチを作成することにより、複数の人がプロジェクトのさまざまな領域に貢献し、それらの作業をマージすることができます。 （大プレビュー）

これを行うには、GitHubのリポジトリに移動し、現在リポジトリの右上隅にある[フォーク]ボタンをクリックします。 これが「オリジン」、つまりGitHubアカウントのフォークになります。

例として、https：//github.com/yourGitHubUsername/liferay.designに移動すると、Liferay.Designリポジトリのフォークが表示されます。

これはvictorvalleのGitHubフォークです。 （大プレビュー）

ステップ2：クローンを作成する（コンピューターにコードをダウンロードする）

ターミナルで、コードを保存する場所に移動します。 個人的には、 /userフォルダーに/githubフォルダーがあります。これにより、このように整理しやすくなります。 これを実行したい場合の手順は次のとおりです。ターミナルウィンドウにこれらのコマンドを入力した後、 ↵キーを押して実行します。

 cd ~/ ## you'll usually start in your root directory, but just in case you don't this will take you there mkdir github ## this creates a "github" folder — on OSX it will now be located at users/your-username/github cd github ## this command navigates you inside the github folder

/githubフォルダーに移動したので、リポジトリのクローンを作成します（コードのコピーをコンピューターにダウンロードします）。

 clone https://github.com/yourGitHubUsername/liferay.design

このコマンドを入力すると、ターミナルに一連のアクティビティが表示されます。次のようになります。

 Cloning into 'liferay.design'... remote: Enumerating objects: 380, done. remote: Total 380 (delta 0), reused 0 (delta 0), pack-reused 380 Receiving objects: 100% (380/380), 789.24 KiB | 2.78 MiB/s, done. Resolving deltas: 100% (189/189), done.

ステップ3：インストール（マシンで実行する）

/projectフォルダーに移動します。 この場合、 cd liferay.designと入力します。 ほとんどのプロジェクトでは、 /rootフォルダーにREADME.mdファイルが含まれます。これは通常、プロジェクトをインストールして実行するための開始場所です。 私たちの目的のために、インストールするには、 npm installと入力します。 インストールしたら、 npm run devと入力します。

おめでとう！ これで、ローカルコンピューターでサイトを利用できるようになりました。通常、プロジェクトはサイトが実行されている場所を教えてくれます。 この場合、ブラウザを開いてlocalhost:7777に移動します。

ステップ4：コミット（いくつかの変更を加えて保存する）

コミットは、ユーザーが行った変更のコレクションです。 ゲームの進行状況を保存すると説明されていると聞きました。 コミットをどのように構成するかについては多くの意見があります。私の意見では、1つのことを達成したときにコミットを作成する必要があります。コミットを削除しても、プロジェクトが完全に中断されることはありません（理由の範囲内で）。

変更を念頭に置いてリポジトリにアクセスしない場合は、[問題]タブを使用することをお勧めします。 ここで、プロジェクトで何をする必要があるかを確認できます。

変更のアイデアがある場合は、先に進んでそれを実行してください。 ファイルを保存したら、コミットを作成するために必要な手順は次のとおりです。

 git status ## this will print out a list of files that you've made changes in git add path/to/folder/or/file.ext ## this will add the file or folder to the commit git commit -m 'Summarize the changes you've made' ## this command creates a commit and a commit message

ヒント：コミットメッセージについて私が今まで見た中で最高の推奨事項は、ChrisBreamsの「Gitコミットメッセージの書き方」からです。 適切に形成されたGitコミットの件名は、常に次の文を完成させることができるはずです。「適用された場合、このコミットは[ここにあなたの件名]になります。」 コミットの詳細については、ClariceBouwerによる「Gitでアトミックコミットを作成する理由」を確認してください。

ステップ5：プッシュ（変更をオリジンに送信）

コンピューターでいくつかの変更を加えたら、それらをマスターブランチ（プロジェクトに追加）にマージする前に、ローカルからリモートリポジトリに移動する必要があります。 これを行うには、コマンドラインにgit push originと入力します。

ステップ6：プルリクエスト（変更をアップストリームにマージするように依頼します）

変更が指からコンピューター、リモートリポジトリに移ったので、プルリクエスト（PR）を介してプロジェクトにマージするように要求します。

これを行う最も簡単な方法は、GitHubのリポジトリのページに移動することです。 ファイルウィンドウのすぐ上に、「このブランチはXコミット先のrepo-name：branch」という小さなメッセージが表示され、次に「プルリクエスト」または「比較」のオプションが表示されます。

ここで[プルリクエスト]オプションをクリックすると、変更を比較できるページに移動し、[プルリクエストを作成]というボタンをクリックすると、タイトルを追加する[プルリクエストを開く]ページに移動します。コメントを含めます。 簡潔であるが、コメントで十分に詳細であると、プロジェクトのメンテナが提案された変更を理解するのに役立ちます。

ターミナルでプルリクエストを開始および管理できるNodeGH（GitHubも最近CLIツールのベータ版をリリース）のようなCLIツールがあります。 この時点で、Webインターフェイスを使用することをお勧めします。これはすばらしいことです。 わたしもそう。

フォークがアップストリームリポジトリから分岐すると、[プルリクエスト]および[比較]オプションが表示されます。 （大プレビュー）

ボーナスステップ：リモート（すべてのリポジトリをリンク）

この時点で、3つのリポジトリ参照があります。

  1. upstream ：追跡しているメインリポジトリ。多くの場合、フォークしたリポジトリです。
  2. origin ：複製するリモートのデフォルト名。
  3. local ：現在コンピュータにあるコード。

これまでのところ、＃2と＃3がありますが、＃1は一次資料であるため、重要です。 これらの3つのことを互いに一致させることで、コミット履歴をクリーンに保つことができます。 これは、プルリクエスト（PR）を送信するときにマージの競合を排除（または少なくとも最小化）するため、プロジェクトメンテナに役立ちます。また、最新のコードを取得し、ローカルリポジトリとオリジンリポジトリを最新の状態に保つのに役立ちます。

アップストリームリモートを設定する

アップストリームリモートを追跡するには、ターミナルで次のように入力します。

 git remote add upstream https://github.com/liferay-design/liferay.design

次に、使用可能なリモートを確認します。ターミナルにgit remote -vと入力すると、次のように表示されます。

originとupstreamは、リモートの最も一般的なラベルです—'origin 'はフォーク、' upstream 'はソースです。 （大プレビュー）
 origin https://github.com/yourGitHubUsername/liferay.design (fetch) origin https://github.com/yourGitHubUsername/liferay.design (push) upstream https://github.com/liferay-design/liferay.design (fetch) upstream https://github.com/liferay-design/liferay.design (push)

これにより、アップストリームの最新バージョンをすばやく取得できます。長い間リポジトリで作業しておらず、保持したいローカルの変更がない場合、これは私が使用する便利なコマンドです。 ：

 git pull upstream master && git reset --hard upstream/master

GitHubヘルプは、これや他の多くの質問に対する優れたリソースです。

HTMLとCSS：セマンティクスから始める

Webには、HTMLとCSSを学習するためのリソースが無限にあります。 この記事の目的のために、私はに基づいて私がお勧めするものを共有しています私が犯した間違いHTMLとCSSの書き方を最初に学んだ方法。

HTMLとCSSとは何ですか？

先に進む前に、HTMLとCSSを定義しましょう。

HTMLはハイパーテキストマークアップ言語の略です。

ハイパーテキスト：

「ハイパーテキストは、読者がすぐにアクセスできる他のテキストへの参照（ハイパーリンク）を備えた、コンピューターディスプレイまたは他の電子デバイスに表示されるテキストです。」

—ウィキペディアの「ハイパーテキスト」

マークアップ言語：

「…テキストと構文的に区別できる方法でドキュメントに注釈を付けるためのシステム。」

—ウィキペディアの「マークアップ言語」

これらの単語の多くが何を意味するのかもわからない場合、簡単に言えば、HTMLは、Web上のドキュメント間の参照（リンク）と、それらのドキュメントに構造を与えるために使用するタグの組み合わせです。

ほとんどすべての基本要素にHTML5タグがあります。それ以外の場合は、いつでもdivを使用できます。 （大プレビュー）

HTMLとCSSの完全な紹介については、 Mozilla Developer Network（MDN） Webドキュメントの両方でHTMLとCSSの最初のステップを紹介することを強くお勧めします。 つまり、CSS Tricks、24 WaysなどのWebサイトが提供する優れた記事に加えて、HTML / CSSに関して参照する必要のあるすべてのものが基本的に含まれています。

HTMLドキュメントには、 <head>と<body>の2つの主要部分があります。 - <head>には、ブラウザに表示されないものが含まれています—メタデータとインポートされたスタイルシートおよびスクリプトへのリンク。 - <body>には、ブラウザによってレンダリングされる実際のコンテンツが含まれています。 コンテンツをレンダリングするために、ブラウザはHTMLを読み取り、使用されるタグのタイプに応じてスタイルのベースレイヤーを提供し、Webサイト自体によって提供されるスタイルのレイヤーを追加します（スタイルは<head>に含まれるか、 <head>から参照されます）。インラインです）、そしてそれは私たちが最終的に見るものです。 （注：JavaScriptの追加レイヤーもあることがよくありますが、この記事の範囲外です。）

CSSはCascadingStyle Sheetsの略で、ドキュメントにカスタムのルックアンドフィールを簡単に与えることでHTMLを拡張するために使用されます。 スタイルシートは、タグ、クラス、ID、およびその他のセレクターに基づいてルールを設定することにより、要素がどのように表示されるか（および要素がどのように配置されるか）をHTMLに指示するドキュメントです。 カスケードとは、ルールの競合が避けられない場合に、シート内のどのルールが優先されるかを決定する方法を指します。

「「カスケード」とは、スタイルを1つのスタイルシートから別のスタイルシートに分類（またはカスケード）できることを意味し、1つのHTMLドキュメントで複数のスタイルシートを使用できるようにします。」

—カスケード—マックスデザイン

CSSは評判が悪いことがよくあります。スタイルシートがたくさんあるサイトでは、特に文書化された一貫性のある方法が使用されていない場合（後で詳しく説明します）、すぐに扱いにくくなる可能性があります。ベストプラクティス、CSSはあなたの親友になることができます。 特に、最近のほとんどのブラウザで利用できるようになったレイアウト機能では、CSSは、かつてのようにハッキングして戦う必要はほとんどありません。

レイチェル・アンドリューは、CSSを学ぶためのすばらしいガイドを書きました—そして始める前に知っておくべき最も良いことの1つはそれです：

「すべてのCSSプロパティと値を記憶することにコミットする必要はありません。」

—レイチェル・アンドリュー

代わりに、セレクター、継承、ボックスモデル、そして最も重要なこととして、CSSコードのデバッグ方法などの基本を学ぶことがはるかに重要です（ヒント：ブラウザー開発者ツールが必要になります）。

backgroundプロパティの構文を覚える必要はありません。また、Flexboxでコンテンツを正確に配置する方法を忘れても心配しないでください（FlexboxのCSSトリックガイドは、これまでで最も訪問されたページのトップ10の1つです。 ）; GoogleとStackOverflowは、CSSのプロパティと値に関しては友だちです。

一部のコードエディタにはオートコンプリートが組み込まれているため、たとえば、境界線のすべての可能なプロパティを把握するためにWebで検索する必要はありません。

Firefox 70の私のお気に入りの新機能の1つは、非アクティブなCSSルールインジケーターです。 スタイルが適用されていない理由を理解するのにかかる時間を節約できます。

最近の子供たちはとても簡単です！ （大プレビュー）

セマンティクス

セマンティックコードから始めましょう。 セマンティクスとは単語の意味を指し、セマンティックコードとは特定の言語のマークアップに意味があるという考えを指します。

セマンティクスが重要である理由はたくさんあります。 これを要約すると、セマンティックコードを学習して使用すると、多くのものを無料で入手できるため、生活がはるかに楽になります。無料のものが嫌いな人はいますか？

セマンティックコードのより完全な紹介については、このトピックに関するPaulBoagの簡単なブログ投稿を参照してください。

セマンティクスには多くの利点があります。

  1. デフォルトのスタイル
    たとえば、ドキュメントのタイトルにヘッドラインタグ<h1>を使用すると、ヘッドラインと同じように、ドキュメントの残りのコンテンツから目立つようになります。
  2. アクセシブルなコンテンツ
    コードはデフォルトでアクセス可能になります。つまり、スクリーンリーダーで機能し、キーボードでナビゲートしやすくなります。
  3. SEOのメリット
    セマンティックマークアップは、マシンにとって読みやすく、検索エンジンにとってよりアクセスしやすくなります。
  4. パフォーマンス上の利点
    クリーンなHTMLは、パフォーマンスの高いサイトの基盤です。 また、クリーンなHTMLは、CSSのクリーン化にもつながる可能性があります。つまり、コード全体が少なくなり、サイトやアプリが高速になります。

注：セマンティクスとHTMLの詳細については、Heydon Pickeringが「構造セマンティクス：HTML5セクショニング要素の重要性」を作成しました。これを読むことを強くお勧めします。

エンジニアリングの原則とパラダイム：基本

抽象化

抽象化の概念について探求できるアプリケーション、接線、レベルはたくさんあります。この記事では、概念を簡単に紹介して、学習を続けながらそれらに気付くようにすることを目的としています。

抽象化は、さまざまなアプリケーションを備えた基本的なエンジニアリングパラダイムです。この記事の目的上、抽象化とは、フォームを機能から分離することです。 これは、トークン、コンポーネント、およびDo n't RepeatYourselfの原則の3つの領域に適用されます。

トークン

最新のデザインツールを長い間使用している場合は、おそらくトークンのアイデアに出くわしたことでしょう。 PhotoshopやIllustratorでさえ、一元化されたライブラリで共有スタイルのこのアイデアを持っています。値をデザインにハードコーディングする代わりに、トークンを使用します。 CSSまたはSASS変数の概念に精通している場合は、トークンに既に精通しています。

トークンを使用した抽象化レイヤーの1つは、色に名前を割り当てることです。たとえば、 $blue-00は16進値（またはHSL値、または任意の値）にマップできます。たとえば、 #0B5FFFとします。 これで、スタイルシートで16進値を使用する代わりに、トークン値を使用します。これにより、 blue-00が実際に#0B36CEであると判断した場合、1か所で変更するだけで済みます。 これは素晴らしいコンセプトです。

Lexicon Alertsコンポーネントの色のトークンは、物事を乾燥状態に保つのに役立ちます。 （大プレビュー）

これと同じ抽象化のパラダイムを採用し、さらにレイヤーを進めると、トークンを受け取り、変数を機能値に割り当てることができます。 これは、堅牢なシステムがあり、システム内にさまざまなテーマを設定したい場合に特に便利です。 この機能的な例は、 $primary-colorような変数を割り当て、それを$blue-00にマップすることです。これで、マークアップを作成でき、青を参照する代わりに、機能変数を参照できます。 同じマークアップを使用したいが、スタイル（テーマ）が異なる場合は、 $primary-colorを新しい色にマップするだけで、マークアップを変更する必要はありません。 魔法！

コンポーネント

過去3〜4年で、コンポーネントとコンポーネント化のアイデアは、設計者にとってより適切でアクセスしやすくなりました。 シンボルの概念（Macromedia / Adob​​e Fireworksによって開拓され、後にSketchによって拡張され、FigmaとFramerによって次のレベルに引き上げられました）は、ほとんどのデザインツール（Adobe XD、InVision Studio、Webflowなど）でより広く利用できるようになりました。その他）。 コンポーネント化は、トークン以上に、何かの形式をその機能から分離することができます。これは、形式と機能の両方を改善するのに役立ちます。

初期の注目すべき例の1つは、ニコールサリバンのメディアオブジェクトコンポーネントです。 一見すると、ページ全体が基本的に単一のコンポーネントで構成されており、さまざまな方法でレンダリングされていることに気付かないかもしれません。 このようにして、同じマークアップ（フォーム）を再利用し、オプションやパラメーター、スタイルを渡すことでわずかに変更し、さまざまな値（関数）を提供させることができます。

繰り返さないでください

DRY （Do n't Repeat Yourself）は、私のお気に入りの原則の1つです。何度も再利用できるものを作成することは、コーディング時に得られる小さな勝利の1つです。

多くの場合、DRYの原則を常に100％適用することはできません（そしておそらくそうすべきではありません）が、作業中にどのように作業するかを検討できるように、これを認識しておくことは少なくとも有益です。あなたが取り組んでいるものは何でもより再利用可能にすることができます。

三つのルールに関する注意： DRYの原則の当然の結果は、三つのルールです。基本的に、何かを3回再利用（コピー/貼り付け）したら、それを再利用可能なコンポーネントに書き直す必要があります。 海賊の掟のように、それは厳格な規則というよりもガイドラインであり、コンポーネントごとに、そしてプロジェクトごとに異なる可能性があります。

CSSとスタイリングの方法論：アトミックとBEM

CSSコードを整理して記述する方法はたくさんあります。AtomicとBEMは、遭遇する可能性のある多くの方法のうちの2つにすぎません。 1つを「選択」する必要はなく、正確にフォローする必要もありません。 私が一緒に仕事をしたチームのほとんどは、通常、プロジェクトやテクノロジーに基づいて、独自のブレンドを持っています。 時間の経過とともに、状況に応じてどのアプローチを取るべきかを学ぶことができるように、それらに精通していると役立ちます。

これらのアプローチはすべて、「単なる」CSSとスタイル設定を超えており、多くの場合、使用するツール、ファイルの整理方法、および場合によってはマークアップに影響を与える可能性があります。

アトミックCSS

アトミックWebデザインと混同しないでください—アトミック（おそらく「機能的」と呼ばれる）CSSは、視覚機能を定義するために小さな単一目的のクラスを使用することを本質的に好む方法論です。 いくつかの注目すべきライブラリ：

  1. スティーブカールソンによるアトミックCSS;
  2. アダムモースによるタキオン;
  3. AdamWathanによるTailwindCSS。

この方法で私が気に入っているのは、物事のスタイルとテーマをすばやく設定できることです。最大の欠点の1つは、マークアップがかなり乱雑になり、かなり速くなる可能性があることです。

Atomic CSSの完全な紹介については、CSSトリックに関するJohnPolacekの記事を確認してください。

BEM

BEMの哲学は、Angular、React、Vueなどの多くの最新のJavaScriptフレームワークの優れた先駆けです。

「BEM（Block、Element、Modifier）は、Web開発へのコンポーネントベースのアプローチです。」

— BEM：クイックスタート

基本的に、再利用できるものはすべてブロックです。 ブロックは、要素、ブロックの外部では使用できないもの、および場合によっては他のブロックで構成されます。 修飾子は、何かのステータス、またはその外観や動作を説明するものです。

個人的には、BEMの理論と哲学が好きです。 私が嫌いなのは、物事の命名方法です。 アンダースコアやハイフンが多すぎると、不必要に繰り返しを感じる可能性があります（ .menu 、 .menu__itemなど）。

推奨読書： InnaBelayaによって書かれた初心者のためのBEM

ありがとう、Next（.js）

これらのトピックを十分に習得した後でも、心配しないでください。まだ学ぶことがたくさんあります。 いくつかの提案：

  1. 関数型およびオブジェクト指向プログラミング
    軽く触れましたが、CSS以外にも学ぶべきことがたくさんあります。
  2. 高水準言語とフレームワーク
    Typescript、Ruby、React、Vueは、HTMLとCSSを十分に理解したら、次に取り組むことになるものです。
  3. 言語のクエリとデータの使用
    GraphQL、MySQL、REST APIについて学ぶことで、コーディング能力を次のレベルに引き上げることができます。

結論：コーディングする設計者！=ソフトウェアエンジニア

うまくいけば、この記事が、コーディングの学習が以前考えていたほど難しくないことを示していることを願っています。 かなりの時間がかかる場合がありますが、インターネットで利用できるリソースの量は驚異的であり、減少していません。まったく逆です。

私が強調したい重要な点の1つは、「コーディング」は「ソフトウェアエンジニアリング」と同じではないということです。スタックオーバーフローからレポをフォークしてコードをコピー/貼り付けできると、長い道のりを歩むことができます。すべてではありませんが、私が知っているソフトウェアエンジニアは、それを実行しました。新しく見つけたスキルを、知恵と謙虚さを持って使用する必要があります。 エンジニアリングの腕前でアクセスできるすべてのものについて、あなたが知らないことがはるかにたくさんあります。 機能やスタイルは簡単に実現できると思うかもしれませんが、「ねえ、devtoolsで動作するようになりました！」 または「Codepenで動作させました。」 —知らないこと、おそらく知らないエンジニアリングプロセス、依存関係、およびメソッドがたくさんあります。

つまり、私たちがまだデザイナーであることを忘れないでください。 私たちの主な機能は、顧客またはユーザーの問題を理解し、それらを設計パターン、方法、およびプロセスの知識と統合するというレンズを通してビジネス価値を追加することです。 はい、「コードを書くデザイナー」になることは非常に役立ち、この価値を追加する能力を拡張しますが、それでもエンジニアにエンジニアリング上の決定をさせる必要があります。

何かおかしい？

この投稿の何かがあいまい、鈍い、および/または時代遅れである可能性が高いので、それをより良くする機会が大好きです！ 以下にコメントを残してください、DM me、またはTwitterで@mention meして、改善できるようにしてください。

参考文献

  1. ブートキャンプとコンピューターサイエンスの学位のコーディング：雇用主が望んでいることとその他の視点（Kyle Thayer）
  2. Sketch And Framer Xの使用を開始する方法（Martina Perez、 Smashing Magazineによる）
  3. Linuxコマンドの概要（Paul Tero、 Smashing Magazineによる）
  4. Oh My ZSHとZでコマンドラインパワーユーザーになる（Wes Bos、 Smashing Magazineによる）
  5. PowerShellで使用できる一般的なcmd.exeおよびUnixコマンドのリスト（ Microsoft Docs ）
  6. regular-expressions.info（Jan Goyvaertsによる）
  7. regexone.com（簡単なインタラクティブな演習で正規表現を学ぶ）
  8. コマンドラインとImageMagickを使用したバッチサイズ変更（Vlad Gerasimov、 Smashing Magazineによる）
  9. 崇高なテキストで生産性を向上させるためのショートカットとヒント（Jai Pandya、 Smashing Magazineによる）
  10. Visual Studio Codeはそれを行うことができますか？ （Burke Holland、 Smashing Magazineによる）
  11. バージョン履歴がバージョン管理ではない理由（Josh Brewerによる）
  12. Gitを使用した最新バージョン管理（Tobias Gunther、 Smashing Magazineによる）
  13. 「HelloWorld」（GitHubステップバイステップガイド）
  14. MacにNode.jsとNPMをインストールする方法（Dave McFarlandによる）
  15. Node.jsとNPMをWindowsにインストールする方法（Dejan Tucakovによる）
  16. Gitでアトミックコミットを作成する理由（Clarice Bouwerによる）
  17. Gitコミットメッセージの書き方（Chris Breamsによる）
  18. セマンティックコード：何ですか？ なんで？ どのように？ （ポール・ボーグによる）
  19. 構造セマンティクス：HTML5セクショニング要素の重要性（Heydon Pickering、 Smashing Magazineによる）
  20. パフォーマンスのための設計：第4章マークアップとスタイルの最適化（Lara C. Hogan、 O'Reilly Mediaによる）
  21. メディアオブジェクトは数百行のコードを保存します（Nicole Sullivanによる）
  22. アトミックCSSとは何かを正確に定義しましょう（John Polacek、 CSS Tricksによる）
  23. 初心者のためのBEM：なぜBEMが必要なのか（Inna Belaya著、 Smashing Magazine ）
  24. 猫のためのJavascript：新しいプログラマーのための紹介
  25. Roadmap.sh：フロントエンド開発者
  26. 関数型プログラミングとオブジェクト指向プログラミング：私が5歳のように説明する
  27. セマンティックHTMLとARIAを使用する理由、方法、および時期（Adam Silver、 CSS Tricksによる）
  28. HTMLセマンティクス（ Smashing MagazineによるeBook）
  29. 基本-HTML + CSS（ Syntax.fm上）
  30. カスケードと継承（ westciv.com ）
  31. CSSトリック（Chris Coyierによる）
  32. CSSレイアウト入門（Rachel Andrew、 Smashing Magazineによる）
  33. HTMLの概要（MDN Webドキュメント）
  34. CSSの最初のステップ（MDN Webドキュメント）
  35. JavaScriptファーストステップ（MDN Webドキュメント）
  36. 24の方法（ドリュー・マクレランによる）