コーディング初学者は読んでおくべき記事まとめ｜Blog｜株式会社トライム

こんにちわこんばんわ、ちばです。

最近弊社にも私を含め3人が入社しました。

内二人は実務未経験ということで右も左もわからない状態だと思います。

弊社にはベテランのエンジニアが多いですが未経験の採用は今回が初めて、ということで以前の会社でも後輩に少し教えて経験から私が教育を一部担当することになりました。

自分自身も1年前までは未経験だったので、当時の経験も活かしつつ読んでほしい記事をピックアップしてまとめてみましたので、勉強中の方は是非目を通してみてください。

最初に読んでほしい記事

あまりに多くても困ると思うので最低限で行きますね。

http://webdesignrecipes.com/css-blocklevel-elements/
まずはブロックレベル要素の特長等
これは最初に覚えておかないとマージンが効かない等でハマりますね、なので最初にしっかり覚えておきたいです。

よく使うCSSで要素を横並びにする方法と使い分け

HTMLの特長を憶えたらCSSでレイアウトを組みましょう。
よくあるレイアウトで多様するのは横並びですよね、適切な場所使い方も最初はわからないと思うので読みつつ触って特長を把握しておくと今後が楽ですね。

position:「static」「absolute」「relative」「fixed」の使い方

ボックスアイコンとかリボンつけたり、最近よくあるブログの一覧にタグつけたりでよく使いますよね。
ただ使い方をしっかり覚えておかないと崩れにつながるので基本から覚えておくと良いでしょう。

[CSS] 擬似要素「before」「after」の基本から使い方までを徹底紹介!!

覚えるのは大変だけど使わないことはまず無いレベルの疑似要素！
これを覚えておくだけでHTMLを汚さずにすんだり一步上のレイアウトを再現出来ます。

【CSS】のショートハンドまとめてみた【プロパティを一括で指定しよう！】

一行にまとめれるやつですね、margin等だけでも良いのでショートハンドで書いていくとCSSのみやすさが格段に上がります、また弊社のレギュレーションにも含まれていますので必読です。

新人コーダーに知っておいて欲しい命名規則の考え方[画像・ID・class名]

今まで後輩に教えて来た中で、クラスの命名は個人差がありました。
仕事となるとクラス名は自分だけがわかれば良いというものではなく、引き継ぎのときは更新のときにみて役割を想定し易いもので無くてはならないですよね。
とは言うもののどういう風に命名していいのかわからないという方が多いのも事実、この記事を参考に自分の命名を見直してみてください。

HTMLを効率よく書く！Emmetの書き方・使い方まとめ

Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫

簡単なコーディングが出来るようになれば次は効率化です。
emmetを使うと最初にありがちなタグの閉じ忘れやミスタイプも減るので食わず嫌いせず少しずつ慣れていきましょう。
私はこれがないと生きていけない体になりました。

http://webdesignrecipes.com/web-design-for-mobile-with-css3-media-queries/
PCのコーディングできれば次はスマホですよね。
Media Queriesは最初難しく感じるかもしれませんが、理屈が分かってしまえば簡単です。
スマホ対応が当たり前の昨今、覚えない手は無いですね。

まとめ

いかがでしたか？

わからないことがわかるようになったり参考になるような記事はありましたでしょうか。

私見で選びましたが、どれも仕事をする上で大事なことだと思うので、しっかり覚えていきたいですね。

また先輩には理解できるまで何度も聞いてください、聞かずにわからないまま放置するより、一瞬の勇気で今後を有利にしていきましょう。