【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のショートカット

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
コピー ⌘C Ctrl + C
切り取り ⌘X Ctrl + X
貼り付け ⌘V Ctrl + V
取り消し ⌘Z Ctrl + Z
すべて選択 ⌘A Ctrl + A
削除 Delete

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

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
新規タブを開く ⌘T Ctrl + T
タブを閉じる ⌘W Ctrl + W
デベロッパーツール ⇧⌘I Shift + Ctrl + I

Visual Studio Codeのショートカット

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
ファイル保存 ⌘S Ctrl + S

Adobe XDのショートカット

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

メニュー ショートカットキー(macOS) ショートカットキー(Windows)
書き出し ⌘E Ctrl + E
ズームイン
  • ⌘+
  • Option-スクロールホイール
  • Option-スワイプ(Magic Mouse)
  • ピンチアウト(トラックパッド)
  • Ctrl + +
  • Ctrl キーを押しながらスクロールホイール
  • ピンチアウト(トラックパッド)
ズームアウト
  • ⌘-
  • Option-スクロールホイール
  • Option-スワイプ(Magic Mouse)
  • ピンチイン(トラックパッド)
  • Ctrl + –
  • Ctrl キーを押しながらスクロールホイール
  • ピンチイン(トラックパッド)
画面サイズに合わせる ⌘ 0 Ctrl + 0
100% ⌘ 1 Ctrl + 1
200% ⌘ 2 Ctrl + 2
アートボードガイドを表示/隠す ⌘ + ; Ctrl + ;
オブジェクト間の距離を測る (オブジェクトを選択した状態で)
Option
(オブジェクトを選択した状態で)
Alt
  • このエントリーをはてなブックマークに追加
  • LINEで送る

SNSでもご購読できます。