Web制作入門プログラム

まずはWeb制作の基礎的な知識を身につけよう!

プログラム概要

Webサイトが作れるようになろう

Web制作やWebデザインをこれから学ぼうと考えている初心者の方向けのプログラムです。HTMLというWebサイトの構成を記述する言語、CSSというスタイリングのための言語を学び、最終的にはリスポンシブWebデザインの手法を用いて、自分の力で静的なWebサイトが作れるようになります。独学でHTMl/CSSを既に学んだが、自分のコードの質に不安があるという方にもオススメです。

学習時間の目安

50時間

受講対象者

初心者

学習内容

HTML/CSS
Sass
リスポンシブWebデザイン
Flexbox
Bootstrap4

CodeGritの特徴

ビデオ通話

毎週のマンツーマンでのビデオ通話を通じて、学習中の疑問を解決。

チャット

チャットを通じて、いつでもメンターに分からないことを質問出来ます。

学習プログラム

CodeGritのオリジナル教材を利用してプログラミングの知識を効率的に学習出来ます。

メンター

CodeGritでは現役プログラマーの方と一人一人面談してメンターを採用しています。

カリキュラム

HTML/CSSコース

Webサイトの構造を表すための言語HTMLと、装飾を行うための言語CSSを学びます。また、オブジェクト指向CSS、Sass、Bootstrapのような応用的な技術を身につけることでよりプロに近いサイトを作成できるようになります。

学べる内容
  • - オブジェクト指向CSS(OOCSS)
  • - Flexbox
  • - Sass
  • - Bootstrapを利用したリスポンシブデザイン
  • レッスン1 - 初めてのHTML
    1. 1. HTMLの基本要素
    2. 2. HeadとBody
    3. 3. ハイパーリンク、画像、テーブル
    4. 4. チャレンジ
  • レッスン2 - 初めてのCSS
    1. 1. CSSの基本要素
    2. 2. CSSセレクタ
    3. 3. CSSプロパティ
    4. 4. CSSスタイルのリセット
    5. 5. チャレンジ
  • レッスン3 - floatとポジショニング
    1. 1. Floatとは
    2. 2. Floatと回り込み
    3. 3. ポジショニングとは
    4. 4. z-index
    5. 5. マージンの相殺とbox-sizing
    6. 6. チャレンジ
  • レッスン4 - Flexbox
    1. 1. Flexboxとは
    2. 2.Flexコンテナーのプロパティ
    3. 3.Flexアイテムのプロパティ
    4. 4.Flexコンテナーのネスト
    5. 5. チャレンジ
  • レッスン5 - オブジェクト指向CSSとコンポーネント
    1. 1. オブジェクト指向CSSとは
    2. 2. オブジェクト指向CSSのルール
    3. 3. コンポーネント
    4. 4. チャレンジ
  • レッスン6 - CSSアニメーション
    1. 1. CSS Transforms
    2. 2. CSS Transiton
    3. 3. CSS Animation
    4. 4. チャレンジ
  • レッスン7 - グリッドレイアウト
    1. 1. グリッドレイアウト
    2. 2. チャレンジ
  • レッスン8 - レスポンシブデザイン
    1. 1. レスポンシブデザインとは
    2. 2. レスポンシブデザイン実装の基本
    3. 3. レスポンシブデザインの実装
    4. 4. チャレンジ
  • レッスン9 - HTMLフォーム
    1. 1. HTMLフォーム基礎
    2. 2. HTMLフォームの仕組み
    3. 3. チャレンジ
  • レッスン10 - Sass
    1. 1. Sassのインストール
    2. 2. Sassファイルの作成とコンパイル
    3. 3. Sassの実践
    4. 4. チャレンジ
  • レッスン11 - Bootstrapを利用したレスポンシブデザイン
    1. 1. Bootstrapとは
    2. 2. Bootstrapのグリッドを利用したレスポンシブデザイン
    3. 3. より細かいレスポンシブデザイン
    4. 4. チャレンジ

学習の進め方

複数のコンセプトで構成されたレッスンで知識を効率的に学ぶ。

CodeGritの各レッスンは、複数の小さなコンセプト(小レッスン)で構成されています。各コンセプトでは重要な知識がまとめられているので、すきま時間でも順を追って必要な知識を効率的に身につけられます。

レッスンに取り組む
レッスンに取り組む

レッスンごとのチャレンジ課題で、実践を通して知識を定着させる。

知識を知っていることと使えることとの間にはギャップがあります。CodeGritでは、各レッスンごとにチャレンジを用意しており、実践を通して知識を知っている状態から使える状態に橋渡しします。

メンターとの週1回のビデオ通話と、チャットアプリでの質問で疑問を素早く解決。

プログラミングを学習していけば、壁に当たることもあります。こうしたときに、自分一人の力で壁を乗り越えていくのは大変ですし、壁を超えられず挫折してしまうこともあります。CodeGritでは、メンターとの週1回のビデオ通話、そしてチャットでの質問をプラントして提供しています。メンターは現役のエンジニアですので、ただ動くプログラムではなく、実務で通用するプログラムの書き方も学べます。

レッスンに取り組む

ご利用料金

CodeGritが、高品質なのにプログラミングスクールよりも安いワケ

CodeGritでは、一般的なプログラミングスクールと異なり、学習者とメンターを直接つなげています。そのため手数料がスクールに比べて大幅に低く、メンターはより多くの報酬を受け取ることが出来ます。多くのスクールでは月5-7万円程度がかかりますが、CodeGritなら月1.5万円程度から学習を開始できます。

* 料金はメンターが自分で設定するため一律ではありません。

CodeGrit料金イメージ

一般的なプログラミングスクールとの比較

CodeGrit(週1回面談)CodeGrit(週2回面談)A社B社
料金(12週間、または3ヶ月)
48,000円~(税込)96,000円~(税込)239,000円(税抜)177,600円(税抜)
面談
週1回30分週2回30分週2回30分定期的なものはなし
メンターの選択
選べる選べる選べない選べない
メンター
現役エンジニア現役エンジニア現役エンジニア実務未経験の卒業生中心
学習場所
オンラインオンラインオンライン教室、オンライン
質問サポート
固定メンター、無制限固定メンター、無制限無制限無制限

よくある質問と答え

初期費用や教材費などは必要ですか?

初期費用、教材費ともにかかりません。メンターと契約いただくことで教材を自由にご利用いただくことが出来ます。

支払いはどのように行えばよいですか?

CodeGritでは全ての支払いを世界最大級のカード決済代行会社であるStripe社を通じてクレジットまたはデビットカード決済で行います。カード情報はStripe社側で厳重に保管されますのでセキュリティ面についてはご安心ください。

メンター契約や支払い頻度について教えて下さい。契約期間やキャンセル料などはありますか?

CodeGritではメンターとの契約はメンター、生徒間で直接行われます。契約前に面談日程などについてメンターとチャットで相談し、合意すれば契約を行います。利用料金は毎週1回月曜日にその週の利用分が引き落としされます。契約期間やキャンセル費用はないのでメンター契約はいつでも解約することが出来、解約処理を行ったその週の日曜日までメンター契約が継続されます。

契約時には必ずCodeGritの教材を使う必要がありますか?

CodeGritではメンターの負担を抑えることも一つの目的に教材を提供しております。しかし、契約自体はメンターと直接行いますのでメンターと合意があれば、CodeGrit以外のサービスや教材についてのメンターをお願いすることも可能です。必要であれば直接メンターにお問い合わせください。

他の学習サービスを通じて既にある程度知識があるレッスンについては飛ばして進められますか?

既にレッスンについて知識がある場合、メンターと相談の上飛ばして頂いて問題ありません。

ビデオ面談はどのようにして行いますか?また一回あたりの時間はどれくらいですか?

面談時間は1回あたり30分となっています。現在、Appear.inという無料の通話サービスを利用して面談を行っています。毎週の面談時間を契約時に設定しますので、その時間にAppear.in上のメンターのルームに入り面談を行います。

ビデオ面談に出席出来なかった場合はどうなりますか?

ビデオ面談に出席出来ない場合、前日までにメンターにその旨をお伝え下さい。当日のキャンセルの場合は面談実施扱いとなりますのでご注意ください。

チャットサポートについて教えて下さい。

チャットでのサポートは、多くのIT企業が開発の際に用いているSlackというアプリを利用して行います。サポートの時間はメンターによってばらつきがありますのでメンターに直接ご確認ください。終日のサポートを希望する場合はフリーランスのエンジニアを選択されることをおすすめします。

全くの初心者なのですが大丈夫でしょうか?

初心者の方向けのコースから開始できるので問題ありません。またCodeGritでは、「CodeGritのはじめ方」というプログラムを生徒様全員に提供しています。こちらに沿って準備を進めることでスムーズに学習を開始することが出来ます。

プログラミングは独学でもできると思いますが、メンターを利用する価値はありますか?

CodeGritの創業者自身も独学でプログラミングをマスターしましたが、モチベーションの維持の難しさや学習速度の遅さに不満があり、このサービスを立ち上げました。独学でなかなか勉強が続かない方や、より効率的に学びたい場合はメンターと学ぶことをおすすめします。

今すぐ学習をはじめよう!

CodeGritは現在教材を無料で公開しています。会員登録は1分で完了します。登録をしてプログラミングを始めてみましょう!