2020.01.19こんにちは、フレッシュマンSRです。2nd」に挑戦中で、DAY16まで完遂しました。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。フッターのコーディングまとめ全体的な難易度やる内容は多いですが、あくまでも内容はWEBページ制作の基礎なので、HTMLとCSSをある程度使える人ならばめちゃくちゃ難しいわけではないです。基礎編となる1stはLPサイトの制作までやりますが、Bootstrapへの依存が強い内容であるため、1stしかやったことない人がいきなり2ndに挑戦すると苦しむんじゃないかなと思っています。Progateを繰り返し復習したり、自分で既存のWEBページの模写に挑戦するなどして実力をつけたから2ndに挑むのもありだと思います。重要なのは、30DAYSトライアルだからと言って、30日で終わらせるのにこだわりすぎないことです。難易度の高い課題はよほど実力のある人でもない限り、2~3日はないと終えるのは難しいです。Sassの基礎について学習する期間。僕はやったことがあるので飛ばしましたが、自身のない人はもう一周するのもありだと思います。プログラミングは結局自分で書いて覚えるしかないので。Sassについては、まず入れ子形式で書けるようにしましょう。その後で変数、&記号も使えるようにしましょう。この3つが使えれば、とりあえず今回のデイトラ部分の課題に関しては問題なくクリアできます。一つ、実際に制作課題に入る前にBoostnoteをインストールしておくとよいです。一度使ったコードを後で使えるのはやはり便利なので。使い方に関しては、こちらのサイトが分かりやすくておすすめです。追記デイトラではProgate、およびドットインストールといった外部の学習コンテンツ掲載をストップし、オリジナルの学習コンテンツに差し替えるそうです。紹介元に迷惑をかけるのは本意ではないので、今後の展望を考えて、全てのコンテンツを内製化したいと思います。2020現在、Webアプリ版のデイトラは使えないので、東京フリーランスのサイトでこれ以降の学習をするようにしましょう。Progate部分はオリジナルの学習プログラムに変わるようですが、3月まで待てないという人は、自主的に動画サイトや入門書でJavaScript及びjQueryを学んでおきましょう。2020ヘッダーとメインビジュアルの作成はそこまで難しくありませんでした。レスポンシブ対応まで含めてもそこまで時間はかからないので(2~3時間ぐらい?)、ここでXDのデザインカンプの見方に慣れておくといいかもです。2020カードはflexboxで横並びにしました。カード要素を包む親要素のSassは以下のように書きました。}}flexboxを使うメリットは、親要素(今回はid:card_container)の幅を変えるだけで、子要素の列数を変えられることです。712px;}タブレットではこのように親要素の横幅を縮めるだけで、カードの並びを3列から2列にできます。スマホ版も同様に、親要素の幅を子要素とおなじ値にするだけです。分からないときは、以下のチートシートが便利です。2020PerfectPixelでずれを修正。自分では完璧だと思っていても、実はめっちゃズレています。Chromeのデベロッパツールでコードを直接編集できるので、「margin」や「padding」の値を調整していきます。1mm単位で合わせる必要はないと思うので、だいたい合っていればオッケーかと。Chromeの拡張機能版は、デフォルトではローカルファイルに使えないので注意です。見出しを作るのは本当に難しいです。16と17はサルワカさんのサイトでも紹介されていなかったパターンなので、自力でクリアできた人は少なかったのではないでしょうか。僕もデイトラに参加された方のブログ記事を見て、何とかクリアできました。見出し17のSassは以下のように書きました。}}ボタンはサルワカさんのサイトのサンプルを参考にすれば、比較的簡単に終わります。2020これもflexboxで要素を横に並べました。ちなみにスマホ時はニュースタイトル部分を改行させて2行にしていますが、それ以外いじっていないので微妙です。体調が芳しくなく、2日かけてしまいましたが、テーブルに関してはそこまで難しくないですし、GoogleMapの埋め込みもはにわまんさんの記事を参考にすれば楽勝です。時間をかければ、1日で終わらせられる内容です。見出しに勝るとも劣らぬ鬼門です。はにわまんさんの記事をもとに進めましたが、SCSSを250行ほど書くので、見た目以上にボリュームのある課題になっています。2020また、input要素には疑似要素を適用できないという落とし穴もあります。僕は以下のサイトを参考に対策しました。2020フッターはこれまでの課題に比べれば比較的簡単です。個人的にはPerfectPixelでのレイアウト調整にてこずりましたが......まとめ誰かの参考にはあまりならないかもですが、DAY16までのレポートはここまでとなります。今後もTwitterで学習進捗をアップするのはもちろん、DAY17以降の学習レポートも記事にしていく予定です。2nd」に挑戦していましたが、ついに完遂することができました。トータルで完成までに17時間弱かかりました。完成までに10時間以上はかかると思うので、休日に取り組むのが良いと思います。プログラミング[Udemy]Web開発入門完全攻略コースの紹介こんにちは、フレッシュマンSRです。今日はUdemyのWeb開発入門完全攻略コースの紹介をします。プログラミングをはじめて学び創れる人へ!未経験から現場で使える開発スキルを習得!」です。プログラミングプログラミング学習の成果をTwitterで公開ー今後の目標こんにちは、フレッシュマンSRです。1週間前から、Webプログラミングの学習成果をTwitterでアップするようにしました。するようにした経緯と、今後の目標について書いていきます。卒業研究でプログラミングに触れないとなると、もうプログラミングをする機会がないんですよね。そのため、インターネット上の動画教材でプログラミングの勉強をしていました。プログラミング僕がPHPを学ぶことを決めた3つの理由こんにちは、フレッシュマンSRです。JavaScript等、主にWeb開発系の言語を学んできました。これからはPHPを学ぼうと決心しました。以下に、その理由を記していきます。2nd」に挑戦中で、DAY26まで完遂しました。2nd(以下デイトラ)に挑戦してみた簡単な感想、そして難易度について書いていきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。成功の母」2019年4月からニッチな内容中心の当ブログの運営を開始。成功の母」2019年4月からニッチな内容中心の当ブログの運営を開始。@freshman_srタイトルとURLをコピーしました。