30DAYSトライアル2nd

DAY0:Webコーダーとして仕事できるようになる30日

今回の「#30DAYSトライアル」では、 「Webコーダーとして仕事できるようになる」 を目標に、30日の課題を作成しました。前提としては、第1週目の「DAY25」あたりまで完了させておいてください!…

はにわまん

DAY1:XDからヘッダーとメインビジュアルのコーディング

HTMLとCSSの基礎を学び、コーディング模写まで経験している方なら「できる!」ということで、今回の課題は全編を通じてXDのデザインカンプからコーディングするということをやっていただこうと思います。 …

はにわまん

DAY2:XDから横並びのカードのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY1で作成したメインビジュアルの続きとして追加する形になります。 → https://xd.adobe.com/spec/58…

はにわまん

DAY3:「PerfectPixel」を使ってチェック & 修正

DAY2までに作ったサイトを「PerfectPixel」を使ってズレがないかチェックしてみましょう! まずは以下の画像を右クリック → 名前を付けて画像を保存 で手元のPCにダウンロードしてください。…

はにわまん

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

見出しやボタンのパーツが利用頻度がたぶん一番多いです。 HTMLやCSSで自在に作れる状態がベストです。そこまでいかなくても、コピペしたとしてどの値を変更すれば見た目が変わるか分かる状態にしておきまし…

はにわまん

DAY5:XDからニュース系のコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY2までにコーディングした続きに書いていく感じになります。 → https://xd.adobe.com/spec/d2cde…

はにわまん

DAY6:XDからテーブルとGoogleMap埋め込みのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY5の続きからコーディングする感じになります。 → https://xd.adobe.com/spec/ac246482-0f…

はにわまん

DAY7:XDからお問い合わせフォームのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY6の続きにコーディングしていく感じになります。 → https://xd.adobe.com/spec/ff02d2d2-b…

はにわまん

DAY8:XDからフッターのコーディング

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。DAY7の続きにコーディングしてく感じになります。 → https://xd.adobe.com/spec/bb6eef73-71…

はにわまん

DAY10:マウスホバー時の動きを付ける

ボタンやリンクの上にボタンを乗せた時にどういったアニメーションをさせるかの代表的なパターンを覚えていきましょう。 :hoverの擬似クラスと一緒に、transitionのCSSプロパティも理解しておく…

はにわまん

DAY11:Webフォント、デバイスフォントの理解

デザインカンプのフォントをコーディングで表現する時、以下の3パータンのいずれかで対応します。 デバイスフォント Webフォント 画像 優先順位としては、デバイスフォント > Webフォント &g…

はにわまん

DAY12:コーディング後の品質を担保するテスト

コーディングの品質を担保するために、最低限チェックしておいた方がいい(と思う)項目がいくつかあります。 わたしは新卒でシステムエンジニアとして働いていたのですが、プログラミング(実装)後は「テスト指示…

はにわまん

DAY13:Progate:JavaScript Ⅰ

これからサイトに動きを付けていきますが、その前にJavaScriptとjQueryの基礎をProgateで学んでください。ここから6日間は久しぶりのProgateです。 → JavaScript 学習…

はにわまん

DAY14:Progate:JavaScript Ⅱ

引き続き、ProgateでJavaScriptを進めてください。 → JavaScript 学習コース Ⅱ | プログラミングの入門なら基礎から学べるProgate[プロゲート] 繰り返し処理 配列 …

はにわまん

DAY15:Progate:JavaScript Ⅲ

引き続き、ProgateでJavaScriptを進めてください。JavaScritpはここまででOKです。 → JavaScript 学習コース Ⅲ | プログラミングの入門なら基礎から学べるProg…

はにわまん

DAY16:Progate:jQuery 初級編

続いてjQueryです!jQueryはJavaScriptを扱いやすくしたライブラリです。 JavaScriptよりHTMLの要素を直感的に操作できるので、とても扱いやすいです。JavaScriptよ…

はにわまん

DAY17:Progate:jQuery 中級編

引き続きjQueryを進めてください。モーダルとアコーディオンはこの後のコーディングでも使います!(クラスの追加なども使いがち) → jQuery 学習コース 中級編 | プログラミングの入門なら基礎…

はにわまん

DAY18:Progate:jQuery 上級編

引き続き、jQueryを進めてください。※ ページ内を移動は後ほど使うので特に重点的に! jQueryはこれで最後です。明日からは、実践的にJavaScriptやjQueryを使ってサイトを作っていき…

はにわまん

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

スライダーを作っていきましょう。スライダーはカルーセルとも呼ばれたりします。 作ると言っても、ライブラリの使い方を覚えることと、そのライブラリをカスタマイズできればとりあえずはOKだと思います。 課題…

はにわまん

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

スクロールに応じて要素が「フワッ」と登場させるアニメーションもWebサイトで好まれがちな動きです。今回はこの動きを実装してもらいます。 課題:スクロールに応じて要素を「フワッ」と登場させる DAY11…

はにわまん

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

スマホ時のグローバルメニューをドロワーメニューで作っていきましょう。 スマホ時のドロワーメニューを作る 以下のようなドロワーメニューを作成してください。「drawer-open」の方が通常時、「dra…

はにわまん

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

内部リンクをクリックした時に「ぐいーん」と移動した方がページ内を移動していることが理解できて少し親切だと思います。この動きのことをスムーススクロールと呼んだりします(呼び方はスムーズスクロールの説もあ…

はにわまん

DAY23:ページ内リンクでクリックした要素に対して下線を引く(クリックイベントの処理)

個人的にjQueryでよく使うのが要素をクリックした時の処理です。 今回は、ページ内リンクでクリックした要素に対して下線を引くという処理を加えてください。 課題:ページ内リンクでクリックした要素に対し…

はにわまん

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

アコーディオンを使った実践的なコーディングをしてみます。アコーディオンがよく使われる代表的なアイテムが「Q and A」です。 課題:Q and Aをアコーディオンでコーディング アコーディオンについ…

はにわまん

DAY25:モーダルを作る

よくコーディングで登場するモーダルをデザインカンプを見ながら作って行きましょう! 課題:モーダルを作る Contactセクションの「プライバシーポリシー」のリンクをクリックした時にモーダルで内容が表示…

はにわまん

DAY26:Progate:Sass Ⅰ

CSSは管理がとても大変… その大変なCSSの管理を楽にすべく登場したのがSassという言語です。 使えるようになっておくと、コーディングが早く、ミスが少なく、管理が楽になります。 今回の…

はにわまん

DAY27:VSCodeに「Easy Sass」導入してSassで書いてみる

Webサイト(ブラウザ)はSassを読み取りことはできません。あくまでもHTMLやCSSだけです。 なので、Sassで記載した内容をCSSに変換してあげる処理が必要になります。変換する方法(ツール)は…

はにわまん

DAY28 ~ 30:実践コーディング

最終課題という感じで、もう一回LPのコーディングをしてみましょう!難易度は最初よりも高いと思います。ボリュームもあるので3日間の期間を設けました。 実際のお仕事でも(急ぎでなければ)3日から5日ほど期…

はにわまん