¥139800
30日間返金保証
このコースの特徴
どんな案件でももう怖くない！
～高難易度のプロ案件も、安心して受注できるスキルを獲得～
HTMLとCSSを学んでも「コーディングのお仕事を受けて、できるのか」となると不安に感じる方も多いのではないでしょうか。デザインをコードに起こす「考え方」を学び、どんなデザインもコーディングできるようになりましょう。
実際に稼働しているサイトデザインを元に、プロとしてのコーディング力を培うカリキュラムをご用意しました。
実際に稼働しているプロのデザインを使った本格学習
本物のプロコーダースキルが身につく
どんなデザインでも自力でコーディングできるようになる
コーディングを依頼されるデザインは、スクール等の題材よりも圧倒的にむずかしいですよね。時にはHTMLやCSSを全く知らないデザイナーが作ったものもあります。
この講座の内容をマスターすれば、もうデザインカンプを見て途方に暮れることはありません。どんな案件・どんなデザインも自分の力だけでコーディング出来るから怖いものなし！
クライアントの困難な要求に答えられるようになる
デザインカンプとぴったり重なるように作って欲しい、cssリセットは〇〇を使って...クライアントに伝えられる様々な要件。それをきっちりとクリアしてこそ、プロのコーダーです。
頂いたデザイン以外に「タブレット幅は見やすいように作っておいて」「ここはちょっと動きをつけて欲しい」など、漠然とした要求にも対応できるようになりますよ。
単価の高いお仕事が受けられ、余裕ができる
制作要件やデザイン難易度が高い案件ほど、お仕事の報酬も高額になります。また、複雑なデザインを再現できるコーダーは多くありません。競争相手が少ないので、案件獲得のチャンスもどんどん高くなります。
中には1時間4000円もありますので、毎日2時間、週末少しで20万円以上稼ぐことも可能です。
現場レベルのコーディングを学びましょう
本当の「プロのデザイン」を使ってコーディング
コーディング学習が目的のデザインではなく、プロがデザインし実際にリリースされているサイトデザインをコーディングします。デザイン通りに作る大変さを乗り越え、自信をゲットしましょう。
デザイン画からコーディングする「考え方」を学ぶ
レッスンでは、どう要素・クラスを設計を考えたのかを解説しています。習ったものならできる、ではなく、どんなデザインが来ても「考えてコーディングする」ことができるようになります。
モバイルファースト設計のコツが分かる
課題はコーディングは現在の主流であるモバイルファーストで行います。スマホ向けとPCモニター向けで、レイアウトやパーツデザインが変化する場合のクラス設計やCSSも解説。現場でも通用するモバイルファースト設計を学びましょう。
「自己解決力」をつけて、できないを自力で解決！
お仕事をするならば、作り方がわからないときに自分で調べて解決する力が必要です。レッスンは「調べながら作る」箇所も多いので、自然と自己解決力が身につきますよ。習っていないからできない、はもう卒業です！
ツールを使って効率よくコーディングする
カンプと同じに仕上がっているか確認したり、CSSで図形やアニメーション効果を表現したり…。コーダーの作業はツールを使うと簡単・短時間で出来ることもたくさんあります。卒業後も使用必須の便利なコーディングツールも紹介しています。
本講座の受講に必要なスキル
ランディングページ(LP)コーディング講座では複雑なレイアウトや、デザイン性の高いコーディングを行います。レッスンをスムーズに進めるため、HTMLとCSSの基礎知識が必要となります。
- HTML,CSSの基本書式を理解している
- Flexboxでのレイアウトができる
- positionプロパティを使った絶対位置指定ができる
- ブラウザ付属の検証ツールが使える
学習内容
- 複雑なデザインをHTMLとCSSでコーディングできる
- デザイン画からレスポンシブにコーディングができる
- レイアウトが崩れてしまった時の修正方法が身につく
- スマホ幅でも横方向のはみ出しゼロでコーディングできる
- 実務レベルのコーディング力が身につく
- Webコーダーとしての自信がつく
こんな方におすすめ
- 基礎学習のあと、何をして良いかわからない方
- 基礎を学んだが「作りたいサイトが作れない」とお悩みの方
- 一回沼ると修正ができない・時間がかかる方
- クライアントの期待に答えられるか不安な方
- 実践的なHTML/CSS設計・コーディング方法を知りたい方
- お仕事レベルのWebコーディングスキルを身につけたい方
受講に必要なもの
- パソコンの基本操作ができる方
- HTML/CSS基礎学習終了者
- 【推奨】Google Chrome がインストールされている環境 ※他のブラウザでもOKですが、動画と同じ操作画面にするために、同じ環境を推奨します。
コースコンテンツ
本講座の目的と進め方
プロコーダーに必要なスキルについて
Bootstrapを使わないコーディング
リセットCSSについて
コーディング、検索のための基礎知識
テーブルの基礎を知ろう
コーディングお役立ちツール
画像化する部分・CSSで再現する部分を考える
Illustratorからの画像書き出し方法
~ここからの先のレッスンについて~
【準備編】初期セッティングとヘッダーナビゲーション作成
【実習01】スマホ幅ファーストビューの作成
【解説01】スマホ幅ファーストビューの作成
【解説01】デザインと比較し、調整する
【実習02】無料８テストのセクションを作成
【解説02】無料８テストのセクションを作成
【実習03】実力をアップする3ステップ部分を作成
【解説03】実力をアップする3ステップ部分を作成
【実習04】Webデザイナースキルが上がる理由部分の作成
【解説04】Webデザイナースキルが上がる理由部分の作成
【実習05】ユーザーの声部分の作成
【解説05】ユーザーの声部分の作成
【実習06】クロージングとフッターを作成
【解説06】クロージングとフッターを作成
◇スマホ幅以上のコーディングについて
【実習07】PC幅-ファーストビューの作成
【解説07】PC幅-ファーストビューの作成
【解説07】TB幅-ファーストビューの調整
【実習08】PC幅-無料８テストの作成
【解説08】PC幅-無料８テストの作成
【実習09】PC幅-実力をアップする～部分の作成
【解説09】PC幅-実力をアップする～部分の作成
【実習10】PC幅-Webデザイナースキルが～部分の作成
【解説10】PC幅-Webデザイナースキルが～部分の作成
【実習11】PC幅-ユーザーの声部分の作成
【解説11】PC幅-ユーザーの声部分の作成
【実習12】クロージングとフッターの調整
【解説12】クロージングとフッターの調整
【実習13】ファーストビューのアニメーション設定
【解説13】ファーストビューのアニメーション設定
◇課題：テスト一覧ページの作成
