[デイトラ 2nd]参加レポート DAY1 ~ DAY16

プログラミング
スポンサーリンク

こんにちは、フレッシュマンSRです。

現在、東京フリーランスさんが提供している学習プログラム「30DAYSトライアル 2nd」に挑戦中で、DAY16まで完遂しました。

この記事では、僕が実際に30DAYSトライアル 2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。

30DAYSトライアルの始め方!|東京フリーランス

※2020/4/4 追記

この記事で僕が取り組んだ「メディア版デイトラ」は非公開となりました。

現在は有料のオンラインスクール形式で、デイトラはリニューアル公開されています。

有料とはいえ、それだけの価値がある情報だったのでやむ無しかな、と思っています。

90日分のコースが59,800円(税別)とありますが、買い切り形式かつ購入から1年間のサポートがあるため、自分のペースで進めることが出来るようになっているようです。

全体的な難易度

やる内容は多いですが、あくまでも内容はWEBページ制作の基礎なので、HTMLとCSSをある程度使える人ならばめちゃくちゃ難しいわけではないです。

基礎編となる1stはLPサイトの制作までやりますが、Bootstrapへの依存が強い内容であるため、1stしかやったことない人がいきなり2ndに挑戦すると苦しむんじゃないかなと思っています。

Progateを繰り返し復習したり、自分で既存のWEBページの模写に挑戦するなどして実力をつけたから2ndに挑むのもありだと思います。

そして重要なのは、30DAYSトライアルだからと言って、30日で終わらせるのにこだわりすぎないことです。

難易度の高い課題はよほど実力のある人でもない限り、2~3日はないと終えるのは難しいです。

DAY1~DAY8

ProgateでJavaScript, jQuery, Sassの基礎について学習する期間。

僕はやったことがあるので飛ばしましたが、自身のない人はもう一周するのもありだと思います。

プログラミングは結局自分で書いて覚えるしかないので。

Sassについては、まず入れ子形式で書けるようにしましょう。 その後で変数、&記号も使えるようにしましょう。

この3つが使えれば、とりあえず今回のデイトラ部分の課題に関しては問題なくクリアできます。

そしてもう一つ、実際に制作課題に入る前にBoostnoteをインストールしておくとよいです

一度使ったコードを後で使えるのはやはり便利なので。

使い方に関しては、こちらのサイトが分かりやすくておすすめです。

「Boostnote」がプログラミングの勉強にかなりおすすめ【コードスニペットとか】

※2020/1/29 追記

デイトラではProgate、およびドットインストールといった外部の学習コンテンツ掲載をストップし、オリジナルの学習コンテンツに差し替えるそうです。

現在、Webアプリ版のデイトラは使えないので、東京フリーランスのサイトでこれ以降の学習をするようにしましょう。

Progate部分はオリジナルの学習プログラムに変わるようですが、3月まで待てないという人は、自主的に動画サイトや入門書でJavaScript及びjQueryを学んでおきましょう。

DAY9 ヘッダーとメインビジュアルのコーディング

難易度:★☆☆

ヘッダーとメインビジュアルの作成はそこまで難しくありませんでした。

レスポンシブ対応まで含めてもそこまで時間はかからないので(2~3時間ぐらい?)、ここでXDのデザインカンプの見方に慣れておくといいかもです。

DAY10 横並びカードのコーディング

難易度:★☆☆

カードはflexboxで横並びにしました。

カード要素を包む親要素のSassは以下のように書きました。

#card_container {
        width: 1086px;
        margin: 104px auto 0 auto;
        // flexboxの設定
        display: flex;
        // 子要素を折り返す
        flex-wrap: wrap;
        // 最初と最後の子要素を両端に配置し、残りの要素は均等に間隔をあけて配置
        justify-content: space-between;
        .card {
            width: 342px;
            height: 355px;
            background-color: $color-white; // 変数で色を指定
            border-radius: 4px;
            box-sizing: border-box;
            padding: 16px;
            margin-bottom: 20px;
            .card_image {
                width: 310px;
                height: 161px;
                background-color: $color-midlegray; // 変数で色を指定
            }
            h5 {
                font-size: 20px;
                color: $color-lightblack; // 変数で色を指定
                line-height: 24px;
                font-weight: bold;
                margin-top: 22px;
            }
            p {
                font-size: 16px;
                color: $color-lightblack; // 変数で色を指定
                line-height: 24px;
                font-weight: bold;
                margin-top: 16px;
            }
        }
}

flexboxを使うメリットは、親要素(今回はid:card_container)の幅を変えるだけで、子要素の列数を変えられることです。

#card_container {
        width: 712px;
}

タブレットではこのように親要素の横幅を縮めるだけで、カードの並びを3列から2列にできます。

スマホ版も同様に、親要素の幅を子要素とおなじ値にするだけです。

分からないときは、以下のチートシートが便利です。

CSS Flexboxチートシート

DAY11 PerfectPixelを使ったチェック&修正を行う

難易度:★★☆

PerfectPixelでずれを修正。

自分では完璧だと思っていても、実はめっちゃズレています。

Google Chromeのデベロッパツールでコードを直接編集できるので、「margin」や「padding」の値を調整していきます。

1mm単位で合わせる必要はないと思うので、だいたい合っていればオッケーかと。

ちなみに、Google Chromeの拡張機能版は、デフォルトではローカルファイルに使えないので注意です。

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

難易度:★★★

見出しを作るのは本当に難しいです。

特に16と17はサルワカさんのサイトでも紹介されていなかったパターンなので、自力でクリアできた人は少なかったのではないでしょうか。

僕もデイトラに参加された方のブログ記事を見て、何とかクリアできました。

見出し17のSassは以下のように書きました。

// 見出しパターン17
.head_17 {
  position: relative;
  display: inline-block;
  width: 196px;
  padding: 5px 9px 5px 10px;
  margin-right: calc(100% - 215px); //画面の残り幅を右マージンで埋めて強制改行
  &:before {
      content: '';
      position: absolute;
      bottom: 3px;
      display: inline-block;
      width: 215px;
      height: 20px;
      left: 0;
      background-image: repeating-linear-gradient(
        -45deg,  /*傾き*/
        $color-lightblue-opacity , /*始点色 変数で色を指定*/
        $color-lightblue-opacity 15px, /*終点色 変数で色を指定 位置*/
        $color-blue-opacity 15px, /*始点色 変数で色を指定 位置*/
        $color-blue-opacity 30px /*終点色 変数で色を指定 位置*/
      );
      z-index: -1; // 背景が文字の下になるようにする
  }
}

ボタンはサルワカさんのサイトのサンプルを参考にすれば、比較的簡単に終わります。

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

難易度:★★

これもflexboxで要素を横に並べました。

ちなみにスマホ時はニュースタイトル部分を改行させて2行にしていますが、それ以外いじっていないので微妙です。

DAY14 テーブルとGoogleMap埋め込みのコーディング

難易度:★☆☆

体調が芳しくなく、2日かけてしまいましたが、テーブルに関してはそこまで難しくないですし、GoogleMapの埋め込みもはにわまんさんの記事を参考にすれば楽勝です。

ちゃんと時間をかければ、1日で終わらせられる内容です。

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

難易度:★★★

見出しに勝るとも劣らぬ鬼門です。

はにわまんさんの記事をもとに進めましたが、SCSSを250行ほど書くので、見た目以上にボリュームのある課題になっています。

また、input要素には疑似要素を適用できないという落とし穴もあります。

僕は以下のサイトを参考に対策しました。

input要素に擬似要素を適用させたい

DAY16 フッターのコーディング

難易度:★★☆

フッターはこれまでの課題に比べれば比較的簡単です。

個人的にはPerfectPixelでのレイアウト調整にてこずりましたが……

まとめ

誰かの参考にはあまりならないかもですが、DAY16までのレポートはここまでとなります。

今後もTwitterで学習進捗をアップするのはもちろん、DAY17以降の学習レポートも記事にしていく予定です。

デイトラに参加されている皆さん、これからもお互い頑張りましょう!

コメント

タイトルとURLをコピーしました