トラジ@プログラミング勉強中

プログラミング歴8ヶ月の一児の父/ HTML/CSS/JavaScript/jquery/マナブさんの動画を見たのをキッカケにプログラミング開始/現在は、ポートフォリオ製作中/web製作月10万を目標に日々プログラミングに奮闘中

[経塚翼 -Tsubasa Kyoduka - @tbs_dn]

【コーディングを頑張る方へ送るnote】

現役Webコーダー20人に聞いた！

ドンゾコと現役コーダー達がオススメする
Chrome拡張機能10選

ぼくは初学者の頃、拡張機能を
使えてなかったですが使って当たり前。

当然無料です
参考にして頂けると幸いです🙇‍♂️
https://t.co/IryQOW8TdW

[くりのすけ｜WEBクリエイター @kurinosuke32]

✅最近のWebサイトで使われているレイアウト・コンポーネント全102種類が揃ったデザイン素材

これは、ありがたいですね❗

https://t.co/uApfToCNS4

[これすけ / 𝘄𝗲𝗯 𝗰𝗿𝗲𝗮𝘁𝗼𝗿. @koresuke1010]

プログラミングもTwitterも
疲れる時って必ずくる…

そんな時は少し離れてみるのもあり。

無理して続けてもよくない🤢
逆に疲弊するだけです。

少し離れることで、
気付けることもたくさん☺️

だから離れるのは悪いことじゃない。

継続が途切れても
また戻ってくればいいんです。

[こばやす🍟Webデザイナー｜HTML＆CSS本出版 @kobayas_s]

Webサイト制作をする時は工数表を作ってるよ。
1本のサイトをデザインからコーディングまで全て自分が作る場合はこんな感じ。
ここまで細分化すると「今の進捗は何％」などタスク管理がしやすくなるし、もし分業化する事になっても「ここまで進んでるから、これをお願い」と説明しやすい。
続く→

[池田 泰延 @clockmaker]

記事を書きました！

調査と検証を繰り返して選定した2020年に最適なfont-familyの書き方を紹介します。

かなり力を入れて書いたので、HTMLコーダーの方はぜひ参照くださいませ。
https://t.co/eGEm6ZFDI1

[HI-ROKI @hiroki_web]

<img>タグは頻繁に使用されるタグということもあり、その分間違った使い方をよく見ます。
長いので、お時間がある時にご覧ください。

正しいイメージタグの扱い方をレクチャーhttps://t.co/laBoVCpSG0

#プログラミング初心者
#プログラミング初学者
#駆け出しエンジニアと繋がりたい

[Naoki Kameyama @atukan0930]

【拡散超超超チョー希望】
皆様！！！
ご好評頂いておりましたJS特化型オンライン学習サービスJS-Proですがついに正式リリースしました！皆様にお届け出来ることを大変うれしく思います。基本文法からVueまでをサポートしており今後も継続的にコンテンツは拡充していきます！
https://t.co/dUY3ZUnFP5

[しゅん @shun_webdesign]

『#codevember』
codepenを使用したスニペット集。
日付毎にキーワードが並んでおり、関連したコードを見れます。

元々はサイト開発者が創造性を磨き、スキルを向上させるためのサイトですが
インスピレーションを得るために使ってみると面白そうです🤔

https://t.co/bKzolCI7CK

[しゅん @shun_webdesign]

『https://t.co/ejX8Ul68xF』
HTML/CSSのスニペット集。全1500種類以上。
hover,button,menu等各パーツでカテゴライズされてます。
コード表示があるのでコピペも可能。

各パーツを作成するのに便利です
個人的にスタイリッシュなhoverが多い印象でした🤔

https://t.co/GSqemPisNs

[ヒデ（web兄さん）@webliker運営 @webliker_adm]

◆空の要素をセレクタにできる「:empty」セレクタが便利😲

.element:empty {
〜〜〜
}

で中身が空の時のスタイルを指定できます。

✅スペースは空とみなさない
✅コメントアウトは空とみなされる
✅類似セレクタに「:blank」がある

https://t.co/yx8er5Dqfu

画像で使い方をチェックしてね👇

[いちくん @tips__web]

初note公開しました〜！！🎉

画像13枚くらい使って丁寧に解説しました😌

Figmaを使うと模写コーディングを効率的に進めることができるのでオススメです😉

リプ欄に具体的にどんなことができるのか概要貼っときます

#駆け出しエンジニアと繋がりたい

https://t.co/hfvCKqyZjZ

[株式会社PENGIN | BtoBマーケティングに強いWeb制作会社 @pengin_company]

コーディング勉強中の方へ

クリ★スタで提供している「コーディング課題中級編」をサッとコーティングできるレベルであれば、案件獲得は可能と思います！

次のステップは2つ

1️⃣さらなるスキルアップ
2️⃣案件獲得活動（営業）

下に続きます。

[株式会社PENGIN | BtoBマーケティングに強いWeb制作会社 @pengin_company]

1️⃣さらなるスキルアップ

✅Sassを勉強する
✅よく使うコードはスニペット化する
✅CSS設計を学ぶ
✅Webアクセシビリティを学ぶ
✅ピクセルパーフェクトでコーディングできているかチェックする

ポイントは3つです
①スピードアップ
②保守性・拡張性アップ
③サイトのクオリティアップ

[これすけ / 𝘄𝗲𝗯 𝗰𝗿𝗲𝗮𝘁𝗼𝗿. @koresuke1010]

プログラミング学習の進め方として、
☑️HTML/CSS
☑️レスポンシブ
☑️アウトプット模写

上記が終わった人は、
次にポートフォリオ作成がいいですね🙆‍♂️

ポートフォリオ制作で
必要になってくるスキルは、
✅サイト構成
✅デザイン
✅サーバー関連

いずれも重要なスキル🙆‍♂️

[しゅん @shun_webdesign]

『Izmir Hover Effects』
オシャレなホバーエフェクトのCSSライブラリー。
ホバーエフェクトも凝っていてどれも使用したいものばかり

写真や画像に使用すると良いかもしれません🤔
使用方法は「View Documentation」からご覧ください

https://t.co/bRzMtRNKRc

[TAK @tak_dcxi]

CSSの未使用のスタイルを削除する方法を紹介してる記事。個人的には4番目のChromeのディベロッパーツールを利用したやり方はマストで抑えとくといいと思う。Web制作の現場においてディベロッパーツールは必須なので、駆け出しの方は要チェック。

https://t.co/ZPuiLP4fLf

[くりのすけ｜WEBクリエイター @kurinosuke32]

【コーディングが早くなる6つの方法 】

✅デザインツールを使いこなすこと
✅コーディングの数をこなすこと
✅テンプレートを用意すること
✅画面を分割してコーディングする
✅Emmetを使う
✅Sassを使う

どれも大事ですが、数をこなすが一番ですね👍

https://t.co/iAxmWahCjK

[ヒデ（web兄さん）@webliker運営 @webliker_adm]

◆スマホの時だけ文章を改行させるテクニック！

改行タグである<br>にclass名を付与し、CSSのメディアクエリとdisplayプロパティを使い表示・非表示を切り替えます😲

このテクニックは改行に限った話ではないですが覚えておくと便利です。

もちろんmin-widthを使えば「PCの時だけ改行」も可能です👌

[へく @heku_777]

note公開しました！

ポートフォリオ制作に関しての
手順やおすすめサイトを
できるだけ細かく紹介してます✨

ポートフォリオ制作で
悩んでいる人の力になれればと
思って執筆したので
是非読んだ感想をツイートして
頂けると嬉しいです🙇‍♂️
https://t.co/qGqgLJABZ5

[これすけ / 𝘄𝗲𝗯 𝗰𝗿𝗲𝗮𝘁𝗼𝗿. @koresuke1010]

学習速度に焦ってる人いませんか？💦

速度は遅くても、少しずつ
前進することが大切です🙇‍♂️

毎日少しずつ知識を増やして
少しずつできることを増やす🙆‍♂️

1ヶ月、半年後は、
大きく成長しているはずです。

これはTwitterもプログラミングも一緒。

焦らずコツコツと積み上げましょう☺️