こんにちは。ご質問ありがとうございました。

ソースコードや開発者ツールを使って解決しようとしましたが、どうしてもレイアウトが崩れてしまい、原因を調べるのに何時間もかかってしまいます。

最初はどうしてもそうなったりしますね・・・（プロでも問題の解決に時間がかかるのはよくあることです）。

その場合、すべてを模写することを目的とするのではなくて、「このサイトのここの部分だけを模写しよう」と小さくすすめていくのがおすすめです。

そうした小さなUI部品の模写を繰り返していけば段々と実力がついていくかと思います。また学習のゴールの定め方については以下も参考にしてみてください。

・学習のゴールはどのように決めればいいですか？ - プログラミングならドットインストール
https://dotinstall.com/questions/pvglkdp

以上、ご確認いただければ幸いです。

ご回答ありがとうございます。

>>>プロでも問題の解決に時間がかかるのはよくあることです
コーディングやプログラムが思った通りにできず、自分で調べてもどうしても解決できない時に、
ソースコードを他の開発者に見せてうまくいかない原因を教えてもらいたいと思うことが多いです。

プログラムがうまく作動しない時、どのような人（職場の人なのか、web上なのか）に相談して解決することが多いですか？

プログラムがうまく作動しない時、どのような人（職場の人なのか、web上なのか）に相談して解決することが多いですか？

職場に詳しい人がいればその人に聞くのが良いですね。またそうした手段がとれない場合、個人的には以下のようなことを試します。

• まず、エラーメッセージで検索してみる。
• それでもうまくいかなかった場合は、思いつくキーワードで検索して関連する技術をもう一度復習してみる。
• うまくいかなかったコードはいったん置いておいて、問題を再現するようなすごく小さなコードを書いてみる。そこで特定のパターンについての理解を深める。
• 書店にいって関連する書籍をぱらぱらと見てヒントがないか探る。
• Q&Aサイトを使い、質問をしてみる。
• Twitterなどで質問してみる。
• ブログ記事を書いてみて他の人の意見を求める。
• 職場の人や友人に詳しそうな人がいれば聞いてみる。もしくは友人の友人でエンジニアに近そうな人がいれば相談してみる。
• いったんそのコードのことは忘れて距離を置く（運動したり、昼寝したり...）。そうして2, 3日たったあとにもう一度考えてみるとうまくいくこともあります。

個人的には、長いコードを書いていると原因の特定が難しくなるので、上記の「うまくいかなかったコードはいったん置いておいて、問題を再現するようなすごく小さなコードを書いてみる」をよく使います。

以上、参考にしてみてください。

丁寧なご回答ありがとうございます。
大変参考になりました！

「問題を再現するようなすごく小さなコードを書いてみる」という考えはなかったので、
次にプログラミングでつまずいたときに、是非使ってみようと思います。

良かったです！ぜひ参考にしてみてください。