IT業界に未経験から入って早1年程。。。
未だにマークアップくらいしかまともに出来ないぺーぺーぱーぱーが、おすすめするツールやサイトをまとめました。
使ってみると喉にささった魚の小骨が取れるくらい、スッキリしながら作業進められますよ！(??)

参考にしているサイト

ツール

ピクセルパーフェクトを目指すために
XDやAiデータを元におおよその値でマークアップした後、ブラウザ拡張ツール「PerfectPixel」を使うようにしたところマークアップする速度も上がりました！
素早くスタイルを記述するために
Sassを使ってCSSを書くのがメチャクチャ効率的に感じます。純粋なCSSしか知らなかった自分的にはSCSS記法のがすんなり馴染めました。※具体的な導入方法や使い方はググってみてください;;
頑張らなくてもいい事は頑張らない
エディタの入力補完機能(Emmet)を使う、プラグインを使う。参考までに私が使っているエディタ「VS Code」のプラグインを紹介します、他にも色々あるのでぜひ調べてみてください。
英語読めない：Japanese Language Pack for Visual Studio Code
文字やコードが見づらい:Bracket Pair Colorizer2 や Indent Rainbow
どのファイルが何のファイルかわかりづらい:Material Icon Theme

筆者の拙い投稿をご覧頂きありがとうございます。この情報でアウトプット力ついていくのか不安を感じてますので、少しでも気になるところや改善できそうなところがあれば優しくご指摘頂けると助かります。理解が深まるたびにこちらの投稿を更新する予定です。