独学

【30DAYSトライアル2nd】デザインカンプからのコーディング【学習内容】

前回の記事では、30DAYSトライアル1stの学習内容を紹介しました。

 

具体的には、動画を見ながらBootstrapでLPをコーディングしたり、HTMLテンプレートを使ってポートフォリオを作ったりと、「コーディングの楽しさ」を知ることができました。

【30DAYSトライアル1st】はじめてのLPコーディング【学習内容】東京フリーランスさんの学習コンテンツ、30DAYSトライアルの2ndを終えたので、1st〜2ndまでの学習内容をまとめておきたいと思います。 1stは、結論から言うと「サイトを作る楽しさ」を学べて、「もっと学びたい」という意欲をかき立てられる内容でした。...

 

今回は、2ndのコーダーとして企業と仕事ができるレベルに挑戦したので、学習内容をまとめてみたいと思います。

 

1st.初心者からコーディングの副業で月5万円を稼ぐ

2nd.コーダーとして企業と仕事ができる ← 今回はココ

 

2nd.コーダーとして企業と仕事ができる

2ndでは、ちづみさんやはにわまんさんのnoteで学習していたような、デザインカンプデータからのコーディングがメインになります。

 

僕が個人的に衝撃だったのが

 

コーディングに正解はありません。

 

という言葉w

 

 

結局はデザインされたものをWebサイトとして再現できれば、なんでもいい。

要するにデザインを作るための正解を自分の中に持っておいて、ストックをたくさん作ることが大切なんだなーと思いました。

 

デザインカンプからデータを取得したり

ピクセルパーフェクトでコーディングしたり

 

より実務に近い、
企業と仕事ができるレベルのスキルを身に着けることができます。

 

→30DAYSトライアル2ndで学んだ内容

  1. javascriptの基礎学習
  2. jQueryの基礎学習
  3. Sassの基礎学習
  4. ヘッダーとメインビジュアルのコーディング
  5. 横並びカードのコーディング
  6. PerfectPixelを使ったチェック&修正
  7. ボタン、見出しを自在に作れるようになる
  8. ニュース系のコーディング
  9. テーブルとGoogleMap埋め込みのコーディング
  10. お問い合わせフォームのコーディング
  11. フッターのコーディング
  12. マウスホバー時の動きを付ける
  13. Webフォント、デバイスフォントを理解する
  14. コーディング後の品質を担保するテスト
  15. スライダー(カルーセル)を作る
  16. スクロールに応じて要素を「フワッ」と登場させる
  17. スマホ時のドロワーメニューを作る
  18. スムーススクロールとフローティングアイテムを作る
  19. ページ内リンクでクリックした要素に対して下線を引く(クリックイベントの処理)
  20. Q and Aをアコーディオンでコーディング』
  21. モーダルを作る
  22. 最終課題:実践コーディング

 

ボリュームたっぷり!!

LPコーディングするのに必要な知識を学習することができました。

 

よって、最終課題をクリアした時の達成感は半端ないです。学習内容は都度ツイートしたりブログにまとめていましたので、一部を抜粋してご紹介します。

 

Sassの基礎学習

ProgateのSass学習コースでSassについての理解を深めつつ、実際にSassを使ってコーディングをしていきました。

参考にしたのが、HPcodeさんのSassを使うメリットとよく使う機能の記事です。

 

デイトラの課題ではありませんが、Sassの教科書を購入して、さらに理解を深めていきました。

 

BEM+Sassだとコードがすっきりするという記事を見て、早速導入しています。

 

ヘッダーとメインビジュアル、横並びカード

  • ヘッダーとメインビジュアルのコーディング
  • 横並びカードのコーディング
  • PerfectPixelを使ったチェック&修正

 

シンプルなヘッダーと、1stで学んだ横並びカードのデザインコーディングなので、そkまで時間もかからず、サクッとコーディングできました。

 

しかし、パーフェクトピクセルのチェックをかけるとかなりずれています。。

 

デベロッパーツールでチェックしてみると、細かいミスが目立っていたのが印象的です。

 

メインビジュアルは、背景画像にテキストが中央表示というよくあるデザインですが、中央表示する方法についてもまとめました。

 

http://keibloglife.com/2019/07/08/css-center/

【flexbox】position要らず?要素の中央にテキストを配置する方法よく見るレイアウトで、背景画像の中央にテキストが配置されているデザインってありますよね。 コーディングに慣れた人なら、サクッと書い...

 

ボタン、見出しを自在に作れるようになる

 

見出しやボタンのパターンは、いろんな作り方があるということを覚えた!よく使いそうなパターンは、ストックしておくと良さそう!

  • 擬似要素
  • position
  • transform

 

参考記事

 

ニュース系のコーディング

ニュース系コーディングにもいろんなコーディング方法がありました。

以前にちづみさんのnoteでニュース系デザインに触れていたので、手が止まることなく進めることができました。

 

 

【dlかul】ニュース系(新着情報)デザインのコーディングパターン今回は、ニュース系のデザインコーディングの方法についてまとめてみました。 ニュース系デザインとは、Webサイトでよく見かける「新着情報」とかを掲載しているデザインです。 そもそも、どのコードで書けばいいのかわからないというかたもいるかと思います。 他のサイトのデザインを参考に、色々なデザインパターンをコーディングしてみました。...

 

 

お問い合わせフォームのコーディング

 

 

問い合わせフォームについては、正直手こずりました。

レイアウトを整えながら、横並び+レスポンシブ対応する。

 

ポイント

  • 「dt→ラベル」「dd→インプット」でマークアップ
  • display:inline-block;
  • ddの開始位置を揃えるため、dtのwidthを指定
  • ddはcalcで(横幅100%-dtの幅)を指定
  • vertical-align:top;+ paddingで頭を揃える。

 

【お問い合わせフォーム】formをコーディングするときのCSS初期化30DAYSトライアルの課題で、「お問い合わせフォームの実装」を実践してました。 結論から言うと、めちゃくちゃ苦戦。 #30...
【横並び】お問い合わせフォームの作り方【レスポンシブ対応】お問い合わせフォームの作り方を解説していきます。 以前に、フォームCSSのリセットについて解説しましたが、今回は具体的に横並びレイアウトにしつつデザインを整えていきたいと思います。...

 

 

スライダー(カルーセル)を作る

 

メインビジュアルをスライドできるようにするプラグイン「swiper」を使ったカルーセルの実装です。

http://keibloglife.com/2019/07/09/jquery-prugin-swiper/

 

スクロールに応じて要素を「フワッ」と登場させる

jQueryといえば、アニメーション!というイメージですw

wow.jsを使うと、簡単にアニメーションをつけることができます。

 

http://keibloglife.com/2019/07/10/javascript-animation-wowjs/

 

スマホ時のドロワーメニューを作る

ドロワーメニューを実装するには、jQueryのプラグインhiraku.jsを使いました。

ドロワーメニューをデザインに合わせて実装するには、デベロッパーツールを使いつつ、プラグインが指定しているクラスに上書きしてスタイルを当てていきます。

 

http://keibloglife.com/2019/07/11/jquery-hirakujs/

 

スムーススクロールとフローティングアイテムを作る

 

Progateで復習しつつ、スムーススクロールの実装に取り組みました。

ポイントは、

固定ヘッダーの場合、jQueryで高さ分を調整する

 

http://keibloglife.com/2019/07/13/jquery-smoothscroll/

 

 

Q and Aをアコーディオンでコーディング』

アコーディオンの実装です。

Progateで学習した内容をツイートしたり、ブログに残したりしていたので、過去ツイートを見返して実装できました。

 

http://keibloglife.com/2019/06/13/jquery-if/

 

モーダルを作る

 

 モーダルが表示される仕組みを理解することが大切だなーと感じました。

$(function(){ $(".signup-show").click(function(){ $("#signup-modal").fadeIn(); }); //ボタンをクリックした時に、モーダルを表示 $("#close-modal").click(function(){ $("#signup-modal").fadeOut(); }); //閉じるボタンをクリックした時に、モーダルを非表示 });

 

 

http://keibloglife.com/2019/07/16/jquery-modal/

 

最終課題:実践コーディング

とにかく最終課題は凝ったデザインだったので、かなり苦戦。

positionを使いすぎてわけがわからなくなったり、背景画像がうまく表示できなかったりと、基礎を学びなおさないとなーと感じさせられました。

 

 

何とかコーディングが完了して、

一からサイトをコーディングしたという事実は、大きな自信につながりました。

 

まとめ:自分の作品を作る

30DAYSトライアル1stと2ndを通して、未経験からスタートラインに立つことができたと感じています。

  • コーディングの基礎
  • コーディングの楽しさ
  • デザインカンプからピクセルパーフェクトコーディング方法
  • jQueryを使った動きの付け方
  • 1からサイトを作ることで自信がついた

 

最終課題をしている間にも、模写をやったり、wordpressテーマのコーディングをしたり、手を止めずに作業を続けています。

 

僕の目標は、Web制作会社に転職することです。

模写や書籍の練習をしていても、実績として評価されないと思っていまして、自分の作品を一から作るということが次のステップです。

 

次の目標としては、以下のように掲げておきます。

  • シンプルなWordpressテーマを作る
  • クラウドソーシングでコーディング案件を受注する

自走できるエンジニアとなるためには、どんどん実績を重ねることが重要で、「自分には無理」とブレーキをかけずに、成長マインドセットを軸に挑戦しつづけたいと思います。

 

 

 

【無料】完全未経験からのプログラミング独学方法まとめ【 Web制作】 こんな質問に答えたいと思います。 結論から言うと、 しっかり基礎をこなして、手を動かしていけばスキル...