前回の記事では、30DAYSトライアル1stの学習内容を紹介しました。具体的には、動画を見ながらBootstrapでLPをコーディングしたり、HTMLテンプレートを使ってポートフォリオを作ったりと、「コーディングの楽しさ」を知ることができました。【30DAYSトライアル1st】はじめてのLPコーディング【学習内容】東京フリーランスさんの学習コンテンツ、30DAYSトライアルの2ndを終えたので、1st〜2ndまでの学習内容をまとめておきたいと思います。1stは、結論から言うと「サイトを作る楽しさ」を学べて、「もっと学びたい」という意欲をかき立てられる内容でした。...今回は、2ndのコーダーとして企業と仕事ができるレベルに挑戦したので、学習内容をまとめてみたいと思います。まとめ:自分の作品を作る2nd.コーダーとして企業と仕事ができる2ndでは、ちづみさんやはにわまんさんのnoteで学習していたような、デザインカンプデータからのコーディングがメインになります。僕が個人的に衝撃だったのがコーディングに正解はありません。いう言葉w結局はデザインされたものをWebサイトとして再現できれば、なんでもいい。要するにデザインを作るための正解を自分の中に持っておいて、ストックをたくさん作ることが大切なんだなーと思いました。企業と仕事ができるレベルのスキルを身に着けることができます。Aをアコーディオンでコーディング』モーダルを作る最終課題:実践コーディングボリュームたっぷり!!LPコーディングするのに必要な知識を学習することができました。よって、最終課題をクリアした時の達成感は半端ないです。学習内容は都度ツイートしたりブログにまとめていましたので、一部を抜粋してご紹介します。Sassの基礎学習Sass(Scss)の書き方セレクターをネスト(入れ子)する。2019年6月29日ProgateのSass学習コースでSassについての理解を深めつつ、実際にSassを使ってコーディングをしていきました。参考にしたのが、HPcodeさんのSassを使うメリットとよく使う機能の記事です。→Sassを使うメリットとよく使う機能を5つだけ紹介デイトラの課題ではありませんが、Sassの教科書を購入して、さらに理解を深めていきました。楽天ブックスAmazonKindleこれはすごい。BEM+Sassだとコーディングが捗りそう。導入しない手はありませんね。BEMの基本に慣れていかないと。2019年7月1日BEM+Sassだとコードがすっきりするという記事を見て、早速導入しています。✅ヘッダーと横並びカードのコーディング(day9-day10)細かい数字のことは気にせず、とりあえずデザインカンプに近づけてコーディングしてみた。PerfectPixelかけたら、かなーりずれてる😅めげずに少しずつ修正加えていきます。2019年7月1日シンプルなヘッダーと、1stで学んだ横並びカードのデザインコーディングなので、そkまで時間もかからず、サクッとコーディングできました。パーフェクトピクセルのチェックをかけるとかなりずれています。昨日コーディングした段階では、めちゃくちゃずれてましたが、綺麗に修正できました。✅横並びカードのmargin-bottomの数値間違いデベロッパーツールは神です。2019年7月2日デベロッパーツールでチェックしてみると、細かいミスが目立っていたのが印象的です。メインビジュアルは、背景画像にテキストが中央表示というよくあるデザインですが、中央表示する方法についてもまとめました。http://keibloglife.com/2019/07/08/css-center/【flexbox】position要らず?要素の中央にテキストを配置する方法よく見るレイアウトで、背景画像の中央にテキストが配置されているデザインってありますよね。✅position✅transform使いまくったらだんだん慣れてきた!見出しのパターンは保存して使えるようにしておきます。)のnoteで苦戦したニュース系コーディング。今回はサクッと作れました!💡ちょっとずつSassのコーディングが楽しくなってきたので、どんどん効率化できるように日々考えていこう。2019年7月3日ニュース系コーディングにもいろんなコーディング方法がありました。以前にちづみさんのnoteでニュース系デザインに触れていたので、手が止まることなく進めることができました。→コーディングの模写ならこれやってみて!(初級編)【dlかul】ニュース系(新着情報)デザインのコーディングパターン今回は、ニュース系のデザインコーディングの方法についてまとめてみました。ニュース系デザインとは、Webサイトでよく見かける「新着情報」とかを掲載しているデザインです。そもそも、どのコードで書けばいいのかわからないというかたもいるかと思います。他のサイトのデザインを参考に、色々なデザインパターンをコーディングしてみました。お問い合わせフォームのコーディングデザインはサクッと模写できましたが、綺麗に横並びにならなくて苦戦。flexbox、inline-block試してみましたがう〜んって感じ。なんだか「必須」のアイコンもあって、newsの形と似ているので、dlで作れるかも、、試してみます。問い合わせフォームのコーディングなんとか形は完成して、ちょっと達成感!ラジオボタン、チェックボックス、、フォームのデザインを整えるのに時間がかかりました。詰まった点は、まとめつつ復習していきます。✅横並びレイアウト✅ラジオボタン、チェックボックスのコーディング✅:checkedを使ったコーディング振り返りつつ、自分のものにできるよう、理解を深めていこう。paddingで頭を揃える。問い合わせフォームについては、正直手こずりました。レイアウトを整えながら、横並び+レスポンシブ対応する。paddingで頭を揃える。【お問い合わせフォーム】formをコーディングするときのCSS初期化30DAYSトライアルの課題で、「お問い合わせフォームの実装」を実践してました。結論から言うと、めちゃくちゃ苦戦。#30...【横並び】お問い合わせフォームの作り方【レスポンシブ対応】お問い合わせフォームの作り方を解説していきます。以前に、フォームCSSのリセットについて解説しましたが、今回は具体的に横並びレイアウトにしつつデザインを整えていきたいと思います。#2nd「Swiper」使ったカルーセルの実装が完了bxsliderはうまくいったのに、なぜかswiperにすると動かない・・・と思ったら、単純なhtmlの記述ミスでした。デベロッパーツールで見まくったら解決して、動くようになったのは嬉しい。2019年7月8日メインビジュアルをスライドできるようにするプラグイン「swiper」を使ったカルーセルの実装です。簡単に設定できて楽しい!これも、jQueryを使わないんですね。動きをつけながら遊んでみます。2019年7月8日jQueryといえば、アニメーション!というイメージですwwow.jsを使うと、簡単にアニメーションをつけることができます。#2ndドロワーメニューの実装jQueryプラグイン「hiraku.js」を使いました。デベロッパーツールをみながら調整して、なんとか完成!Drawer.jsでもできるように次回試してみようと思います。2019年7月9日ドロワーメニューを実装するには、jQueryのプラグインhiraku.jsを使いました。ドロワーメニューをデザインに合わせて実装するには、デベロッパーツールを使いつつ、プラグインが指定しているクラスに上書きしてスタイルを当てていきます。http://keibloglife.com/2019/07/11/jquery-hirakujs/スムーススクロールとフローティングアイテムを作るフローティングアイテムを作るため、もう一度Progateから復習です。2019年7月10日Progateで復習しつつ、スムーススクロールの実装に取り組みました。やりつつ自分のブログにもまとめていたので、復習しつつ取り組みます。2019年7月11日アコーディオンの実装です。Progateで学習した内容をツイートしたり、ブログに残したりしていたので、過去ツイートを見返して実装できました。アコーディオン実装しました!そういえば、Progateの学習内容をツイートしてたな、、と自分の過去ツイートを見返し、復習しつつコーディング。ツイッターやブログにまとめておくと、助かるなあと実感。完成しました!z-indexの指定がおかしくて、ちょっと時間取られましたが、すぐに解決できました。次は最終課題なので、作業時間を図りつつ挑戦したい。学習した通り、ポイントは、表示するモーダル背景を暗くするwrapperを分けてマークアップし、wrapperをposition:fixed;とすること。全体は薄暗くなりつつ、モーダルが前面に浮かんで表示される。2019年7月12日モーダルが表示される仕組みを理解することが大切だなーと感じました。最終課題に取り掛かりました!ここまで約1時間くらい。2019年7月13日とにかく最終課題は凝ったデザインだったので、かなり苦戦。positionを使いすぎてわけがわからなくなったり、背景画像がうまく表示できなかったりと、基礎を学びなおさないとなーと感じさせられました。#最終課題フッターデザインまでコーディング完了しました。レスポンシブは完璧じゃないけど、とにかくガンガン進めてきたので、ここからはjQueryで動きをつけつつ、スマホ対応していきます。#最終課題レスポンシブ対応まで終了しました。これで2nd完走です!デザインカンプからコーディングするのは、手が止まらずに進められるようになった。一からサイトをコーディングしたという事実は、大きな自信につながりました。まとめ:自分の作品を作る30DAYSトライアル1stと2ndを通して、未経験からスタートラインに立つことができたと感じています。コーディングの基礎コーディングの楽しさデザインカンプからピクセルパーフェクトコーディング方法jQueryを使った動きの付け方1からサイトを作ることで自信がついた最終課題をしている間にも、模写をやったり、wordpressテーマのコーディングをしたり、手を止めずに作業を続けています。#30DAYSトライアルデイトラ2ndの最終課題をやりつつ、PAS-POLの模写をやっています。進むので、少しずつ成長しているんだなと実感!楽しい!!ここまでで1時間半くらい。いろんなデザインに触れつつ、たくさんコーディングする。新しい技術を学べそうな模写対象を選ぶことも大事かも。僕の目標は、Web制作会社に転職することです。模写や書籍の練習をしていても、実績として評価されないと思っていまして、自分の作品を一から作るということが次のステップです。次の目標としては、以下のように掲げておきます。こんな質問に答えたいと思います。BlogスポンサーリンクスポンサーリンクSearchWebコーダーKohei8年勤めた職場を退職し、完全未経験からWebコーダーに転職しました。