勤務先のHP制作の担当になりWeb制作にハマる｜日々学習継続中｜Web制作・コーダー｜一児の父｜#デイトラ｜シナカフェ HTML｜CSS(Sass)｜JavaScript(jQuery)｜XD｜Photoshop｜Git(GitHub)｜Shopify Partner｜WordPress学習中
▼CodePenでアウトプット掲載中
Joined October 2020
- Tweets151
- Following28
- Followers27
- Likes429
#今日の積み上げ
おはようございます！
今日も仕事休みにしたので
集中して学んでいきます！
朝活5:30-8:00
└ デイトラ上級DAY5・6
午前・午後
└ デイトラ中級最終課題コーディング
└ 実提案WFのチェック
#駆け出しエンジニアとつながりたい
#デイトラ
デイトラでPHPの基本講座あるけど
JavaScript勉強していた時期もあり
ちょっと楽しいですね！
ここが本質では無いと思うので
サクサク進めながら学んでいきたいと思います。
このあとはデザイナーさんとのミーティング。
新しいことへの挑戦はワクワクしますね！
#駆け出しエンジニアと繋がりたい
おはようございます！
＃今日の積み上げ
・デイトラ上級編Day4-6
・デイトラ中級最終課題のHTML設計
・Zoomミーティング1件
日中は家族と過ごしますが、
朝と夜、隙間時間でしっかり学んでいきます！
#デイトラ
#プログラミング初心者と繋がりたい
祐介＠Web制作 retweeted
【🔥特大報告🔥】
皆様のおかげで忍者CODE 1周年❗️
と言うことで特大プレゼント✨
最新版13インチMacBook Pro：1名様
アマギフ1万円：3名様
■参加方法
①RT＆フォロー
② ninjacode.work にログイン後
トップページにある応募formから応募
■応募期間 3/5 23:59
参加資格はコチラ↓
デザインカンプがPCしかない時は
悩む部分もあるのでこのサイトで
たくさんの実例に触れて引き出し増やすと
時短になりそう！
Responsivelyというアプリと併用すると
デバイス別での見比べも出来て
より勉強になりそうです。
良いサイトをありがとうございます！
#Web制作
レスポンシブでのよしなになコーディングってどうすればいいんやって人は、例えばこちらのサイトとか私はもう2年ほど追ってますがいいですよ！
実例を見て引き出しを増やしておくといいと思います。
responsive-jp.com/
📝XDカンプからコーディング
@cresta_designさん初級編
▼ 実施したこと
☑︎ 自作テンプレ利用
☑︎ BEM利用
☑︎ font周りをfunctionで管理
☑︎ Sassの分割管理
☑︎ CSS animation追加
☑︎ SP・TABレスポンシブ
☑︎ 主要ブラウザでチェック
→約5.5時間
#クリスタチャレンジ
#Web制作
📝画像形式ごとの特徴
こちらのサイトが分かりやすかった。
それぞれの特徴を理解して
適切な画像形式で利用出来るようにする。
☑︎ ベクター画像とラスター画像
☑︎ PNG8、24、32と種類がある
☑︎ SVGはCSS・JSでの操作が可能
#プログラミング学習
#Web制作
d-fount.com/types-of-images-…
これ嬉しい！
今まさに色々と調べていたところなので
しっかり読み込んで勉強させていただきます。
今年最後のZennの記事を投稿しました。自分がよく使っているSassのmixinとfunctionのスニペットをまとめたものです。Sass利用者の方は是非参考にしていただければ嬉しいなと。
よく使うSassのmixinとfunctionのスニペットをまとめてみた｜TAK zenn.dev/tak_dcxi/articles/2… #zenn
📝BEM命名規則チートシート
こんなチートシート発見！
1ブロックで1ファイルを意識して
すんなりクラス名つけるべく
エレメントの表現方法増やす。
#プログラミング学習
#Web制作
9elements.com/bem-cheat-shee…
さっさとコーディング始めてしまえば
それなりにレイアウトは作れていくけど
コーディング前のこういう時間が
今後の自分を助けてくれる気がする。
しかし…意外と時間が掛かる😂
経験ない中で考えすぎても始まらないので
まずはざっくり整理して一度進めてみる！
#デイトラ
#プログラミング学習
📝SCSSファイル分割
デイトラの練習課題の最後は
長いSCSSファイルを
いったりきたりスクロール…
総復習課題に入る前に
これまでの内容含めてテンプレ作成中。
これでだいぶ分かりやすく整理出来そう！
#デイトラ
#Web制作
tsudoi.org/guide/detail/8.ht…
📝SCSSファイル分割
デイトラの練習課題の最後は
長いSCSSファイルを
いったりきたりスクロール…
総復習課題に入る前に
これまでの内容含めてテンプレ作成中。
これでだいぶ分かりやすく整理出来そう！
#デイトラ
#Web制作
tsudoi.org/guide/detail/8.ht…
📝保守性を考える
デイトラ総復習編に入る前に
この記事を読んで良かった！
まだ理解が追いつかないところもあるけど
サンプルや表現が分かりやすかった〜
これまでコード書いてて
モヤっと書いてたところは意識する。
zenn.dev/haniwaman/articles/…
☑︎ コンポーネント
└ 外側に余白付けない
└ 幅や高さを持たせない
└ 要素タグに影響されない
☑︎ BEM
└ Elementが入れ子に
なりそうならBlock化する
└ コンポーネント目的のBlock
レイアウト目的のBlockを意識する
└ modifierは見栄えを変える時使う
📝モーダル表示
デイトラ2nd -DAY26-
モーダル表示自体は出来たので
見本から変更した点
☑︎ ダミーテキストではなく雛形を入れて
line-heightや箇条書きのindentを調整する
☑︎ モーダルOPEN時に周りの黒い部分を
クリックしても戻れるようにする
#デイトラ
#プログラミング学習