プロの経験を活かしたWeb制作スキルアップ講座 実案件を想定した実装スキルを身につける

本講座について

今回なぜこの様なスキルアップ講座を作ろうと思ったのかというと、
Web制作の勉強をし初めている方でどんな勉強方法で進めばいいんだろうという方がかなり多いという印象を受けたからです。

その際にスクールを
おすすめするのですが、

お金がないので10万円以上だと支払いが難しい 継続的に勉強ができる様な講座が欲しい 実際にプロが実践形式でコーディングしているのが見てみたい

こういったが多かったので

低価格案件獲得必要な知識
つけることのできる
講座
を作成することにしました。

こんな悩みありませんか?

  • 独学で勉強すると
    挫折しそう

  • スクールを受講する
    お金の余裕がない

  • プロが実際にコーディング
    している映像が見てみたい

  • どこまで学習すればいいのか
    不明確で悩んでいる

  • WordPressまでの学習は
    終わっているが
    スキルに不安がある

営業に行く前にこう言った悩みを持つ人が多く、
中々営業に踏み込めないまま挫折する人を多く見てきました。

そんな悩みの種を一つでも解消するべく、
これ一つで営業にいくまでのスキルを講座に落とし込みました。

これまでの実績

こんにちは。
Web制作者として活動しているこうだいです。

僕は、決して飛び抜けた実績を持っている訳ではないですが、副業でコーディング案件をWeb制作会社から受注して実践してきました。まずは僕の実績をご覧ください。

これらを経験して今に至ります。

これらの経験をもとにスキルアップ教材を作成して一人でも多くの方を挫折しやすい環境から脱出させたいと思っています。

どういった講座内容と
なっているか

勉強方法については購入者専用学習サービスを活用してインプットし、
最終的にはデザインカンプからのコーディングを行うことで案件獲得までに
必要な知識、ノウハウを身につける

具体的な学習手順は下記となります。
※学習内容は今後アップデートしていきますが追加料金はかかりません

準備編

1. PCの基本知識


ファイルやフォルダの操作

ファイルやフォルダの操作

右クリックを使える

ドラッグ&ドロップができる

zipファイルの扱いができる

キー操作

全角と半角の使い分け

半角記号の名称を覚える
→コロン、セミコロン、アスタリスク、スラッシュ、バックスラッシュ、シングルクォーテーション、ダブルクォーテーション、

半角記号の名称を覚える
→コピー&ペースト、カット&ペースト

ググる


2. 開発ツールの導入


Chromeブラウザの導入

ダウンロード

インストール

タスクバーへのピン止め

設定

VScodeの導入

ダウンロード&インストール

設定
→日本語化、テーマ、AutoSave、タブサイズ、wordwrap、emmetのlang Japanese Language Pack for Visual Studio Code
→プログラミング用フォント

覚えるべきショートカット

初心者からでも始める事ができる商品設計としており、初歩的な部分だけど知らない事や覚えておきたい部分を詰め込んでいます。

HTML、CSSの基本的な実装編

1.Webサイトをつくるしくみ


2. HTMLの基本


3. HTMLの実践的な知識


4. CSSの基本


5. CSSの実践的知識


6. デザインカンプからのコーディングをしよう

XDデザインカンプからのコーディングに必要なHTML、CSSの知識を習得

購入者限定でデザインカンプを元にプロのライブコーディングを元に実際に手を動かして実装を進める

Sassを学ぼう

1. sassとは


2. sassの書き方とコンパイル


3. 変数


4. mixin、function


5. ファイルを分ける(@use)


JavaScript、jQueryを使った実装編

1.JavaScriptとは


2. JavaScriptの書き方、実装方法


3. jqueryとは


4. Webサイトでよく使うJSの実装


5. デザインカンプからのコーディングをしよう


XDデザインカンプからのコーディングに動きをつけるJavaScript、jQueryの知識を習得

購入者限定でデザインカンプを元にプロのライブコーディングを元に実際に手を動かして実装を進める

基本設計からWordPressまでの実装編

1. WordPressとは


2. Wordpress 環境構築編


3. Wordpressで使うphpの書き方


4. Wordpressテンプレート階層について


5. functions.phpについて


6. カスタム投稿の解説


7. カスタムフィールドの解説


8. カスタムタクソノミーの解説

XDデザインカンプからのコーディングをしてWordPress化する為に必要な知識を習得

制作方法のコンテンツについては順次追加していき上記内容は一部で、実装手順も組み込んでいます

購入者限定でデザインカンプを元にプロのライブコーディングを元に実際に手を動かして実装を進める

デザインカンプからコーディングしたものはそれぞれ実績として公開可能としていますので、ポートフォリオの中にいれていただいても問題ありません。

今回ライブコーディングを実施してくれる
プロ講師は下記2名

もりさん

もりさん

(@MoRi_Coding)

第1章

HTML、CSSの基本的な実装編デザインカンプ コーディング

第2章

JavaScript、jQueryを使った実装編デザインカンプコーディングのコーディングをそれぞれ担当

ケンタローさん

ケンタローさん

(@Kentaro_S_716)

ケンタローさん事業用サイトはこちら

第4章

基本設計からWordPressまでの実装編デザ インカンプコーディング

講師MEMO

コーディングのみでコンスタントに毎月50万円を稼いでおられる方々です。

ケンタローさんに関しては、スクールのメンターをされている方で教え方が上手で難しい課題も難なくこなされている方です。

もりさんに関しては、Twitterでご存知の方も多いと思います。 Web制作会社で働かれていた経験がありコーディングのみでかなり稼がれている凄腕の方です。

今回一つのライブコーディングの見どころとしては、デザインカンプを元々渡しているのではなく、制作会社さんとの実案件を想定して何も分からない状況(デザインカンプを渡された状態)から始める部分です。なので、躓きやすいポイントを知れるのと、一から全て確認できることで、どういった手順で実装していくのかが明確に分かることです。

更に1人の実装を確認するだけでなく、2人のプロからライブコーディングを確認することで、色々な実装方法があることと、それぞれコーディングをする上で視点が違う部分を学べる部分がこちらの教材の強みとなります。

ライブコーディングを
受けるメリット

  1. メリット01

    一つの実装方法だけではなく、色々な実装方法があることを実際に見て 手を動かして確 認することで、スキルアップ速度が上がる。

  2. メリット02

    どういった実装方法があるのか躓きやすいポイント等確認することができる。

  3. メリット03

    実装方法をストックすることで、案件の際に使い回しできるコードが増えて時間単価ア ップを目指すことができる。

ライブコーディングの実施予定は?

ライブコーディングに関しては、3日に1回ペースで実施していく予定※で進めていきます。
※多少ズレはあるかと思いますのでご了承ください
ライブコーディングの実施告知は購入者限定のDiscordを作成するので、そこで全て告知を行います。

こんな方におすすめです

  • プロのライブコーディングを見て
    スキルアップしたいと思っている

  • コーディングの実装スピードを
    上げたい(効率化したい)

  • 自分の実装方法が合っているか不安

  • プロの実装方法が気になる方

  • プロゲートとドットインストールの勉強が終えてデザインカンプからのコーディングをしようと思っている

こんな方には
おすすめできません

  • プロゲート、ドットインストールを
    勉強中の方

  • まだコーディングの勉強を始めていない方

  • 自走力に自身がない方

本教材を購入するメリット

  • 案件獲得するまでのスキルを習得できる

  • 自走力が身に付く

  • 実践で使用しているノウハウが身に付く

  • コーディング速度が早くなる

購入からの流れ

  1. 購入を行う

  2. 教材へのログインを行う

    教材のログイン情報を付与します

  3. 教材のカリキュラムを
    進める

    ※一部追加がまだの部分があるのですが、
    その部分は無料で追加を行います

  4. 教材よりデザインカンプを
    ダウンロード

    実施できそうな方はダウンロード後自身で進めてみてください

  5. ライブコーディングの日程を
    確認する

    ※DiscordまたはTwitterで告知します
     ライブコーディングに参加できない方も
     おられると思うので、教材の方にアーカ
     イブ動画を残します

  6. デザインカンプコーディングを実施

    ライブコーディングの映像を元に自身で 手を動かしていく解説も載せているので、 その部分を参考に実装を行う

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

よくある質問

  • 学習教材はどこからどこまで学べますか?

    HTML、CSSの基礎、JavaScript、jQueryの動きの実装方法、WordPressの構築方法をデ ザインカンプからのコーディングができるレベルまでのスキルが身に付きます。

  • デザインカンプからのコーディングが全くできない状況ですが、問題ないでしょうか?

    はい、問題ないですが、最初は無料で学習できるプロゲート、ドットインストールを完了してからをおすすめしています。

  • メンターはついていますか?

    メンターはついておりません。ライブコーディング映像で解説をしているので、分からない部分はそちらを参考に進めていただいています。

  • アップデートした教材は有料ですか?

    今現在出している各章についてのアップデートについては全て無料で公開していきます。公開の際もディスコードまたは購入者専用学習サービスにて情報共有を行います。

  • 閲覧期間はありますか?

    無期限で閲覧可能です。

今すぐ

Web制作スキルアップ講座を
受講して最短案件獲得
スキルアップを目指そう!

  1. 特典1

    追加コンテンツ情報を
    都度確認できるDiscord

  2. 特典2

    営業時に活用できる
    ポートフォリオサイト

  3. 特典3

    リアルに学べる
    ライブコーディング参加権

  4. 特典4

    無期限の限定会員サイトへの
    参加券