【YouTube講座 #01】手を動かして学ぶ、Web制作コーディング

フロントエンドエンジニアになりたい人向けに、Web制作を学ぶYouTube講座をはじめました。
プロゲートで基礎を学んで、もっと実践的にWeb制作を勉強したい人向けの動画となります。

今回の講座で作成するサイトはこのようなものになります。

#01 Web制作チュートリアル完成サイト

チュートリアル動画なので、動画と同じように手を動かして学んでいくのですが、
以下のようにより実践に近い講座となります。

YouTube講座へのリンク

Webフロントエンド講座の1つ目、Web制作チュートリアルは長くなりすぎたので、3つに分けました。

Web制作チュートリアルは実際の仕事に近づけるため、こちらで用意したデザインファイルから画像を書き出しから初めて、デザインを元に1ページをコーディングする流れを学んでいきます。

各YouTubeへのリンクはこちら。

#01 – 前編 / 手を動かして学ぶ、Web制作コーディング（デザインソフトから画像の書き出し）
#01 – 中編 / 手を動かして学ぶ、Web制作コーディング（コーディング前半）
#01 – 後編 / 手を動かして学ぶ、Web制作コーディング（コーディング後半）

動画講座の補足

Webデベロッパーツールを右に出すには？

ChromeブラウザでWebデベロッパーツールを出すと、最初はブラウザの下に出ます。
これを講座と同じく右に出すには、ツールの設定を変更する必要があります。

Web制作チュートリアルの作業ファイル

講座で使うファイルになります。

作業ファイルダウンロードはこちら

講座で使う無料ツール

コーディングとデザインで使う無料ソフトを使います。

作業用ブラウザ「Google Chrome」

Web制作の作業では、Google Chromeが使われている事が多いです。
この講座でもChromeを使いますので、以下からダウンロードしてください。

Google Chromeのダウンロードはこちら

コーディングで使うツール「Visual Studio Code」

私自身はSublime Textを使っていますが、この講座では無料で使えるVisual Studio Codeで作業をしていきます。

Visual Studio Codeのダウンロードはこちら

デザインで使うツール「Adobe XD」

このチュートリアルで使っているデザインソフトはAbode XDです。
ダウンロードするにはAdobeアカウントを作る必要があります。

有料版と無料版の違いは、ネット上でプロトタイプやデザインを共有する機能の有無となります。
個人が学習で使う分にはあまり気にしなくて良いのでおすすめです。

Adobe XDのダウンロードはこちら

PNG画像圧縮ソフト「Pngyu」

Mac・Windowsで使えるPNG画像圧縮ソフトです。

Pngyuのダウンロードはこちら

キーボードの記号配置

ショートカット

基本的なPCのショートカット

Chromeブラウザのショートカット

Visual Studio Codeのショートカット

Adobe XDのショートカット

すべてのショートカットはこちら