簡単な模写すらできなかったボクが写経から1週間で、めちゃくちゃ模写できるようになった話。
本業に集中したくなってしまったので、途中で挫折した形になっていますが
本業でも軽くコードは書いてるんで、どうにかなると信じています。
ちなみに、本業はまだ研修3か月目のITエンジニア。
研修で扱った言語はC#, Java, PythonとHTML, CSSを少々です。
また、エンジニアは2年ほど前から目指していて
独学でまじめにやったり、やる気を失って全部投げたりが続いています。
そんな感じのボクなので、本当に継続は力なりだと思っています。
直近だと、今の会社に内定をもらえる直前の2月初旬には、こんな模写をしていました。
ようやくデザインカンプからのコーディング終了しました。
項目が増えれば増えるほど、難しい。タイトルの左上、右下に▼表示させるのは分からなかったので
サンプルコードを参考にしました。#Web制作 #HTML5 #CSS3 https://t.co/YkAEsCLfDI pic.twitter.com/iVB3NM4Coh— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) February 11, 2021
しかし、今月に入って、Web制作エンジニアを何度目か忘れるレベルで
また目指し始めたとき、こんな絶望的な状態でした(´・ω・｀)
どうしてもヘッダーがうまく行かないですが
なんとなく形にはなってきました。
あとはコンテンツ全体を中央寄せするくらいでしょうか。
あと10分ほどで家を出るので、離脱。
有意義な朝でした。
結構サボったけど。。。#WEB制作 #コーディング#模写 https://t.co/MsKcndBKYG pic.twitter.com/QiKQo9dnRj— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 8, 2021
自分のコードと照らし合わせて、修正してみたけど
どうも綺麗にならない。心折れた。
もう知らねー。
このまま次に進もう。
修正は未来の成長した自分に託す！#Web制作#模写 #コーディング#codestep pic.twitter.com/nua4CsdsY6— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 9, 2021
簡単なサイトですら模写できないレベルに。。。
マジで勉強は途中で投げ出してはいけません。
身をもって、感じています。
また中断してしまったんですが……JavaScript勉強してるんで、Web制作にも役立つはず！
と肯定的に考えていきます。
さて、それはさておき模写で詰んでしまったボクは
模写できないなら写経だなと開き直り、黙々と写経をやっていきました。
途中になってしまいましたが、写経をすると
CSSに書いて動かす前に、どう動くか分かるもの、分からないもの
自分の理解度が分かるのでいいです。
あとは集中力を上げるのが課題です。#Web制作#写経#codestep #朝活 pic.twitter.com/YQ7pEzAjXU— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 9, 2021
朝の続き、ようやく終わりました。
1度コードを見ながらやると、分かりやすくていいですね。
意外だったのがBicycleエリアがリストで書かれていること。
ボクはdivaでclass=box使ってたので、目からうろこでした。#Web制作#写経 #夜活#コーディング#codestep pic.twitter.com/EIrbrsRj9h— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 10, 2021
写経だとサクッと数時間で終わります。
まぁ写経とはいっても、ただ写しただけってことではなくて
CSSを変更したときに、どういう風に変化しているのかを逐一、見ながら進めていきました。
その分、時間はかかってますが、理解力は上がっています。
#codestep 2問目 今日はHTMLだけ終わりました。
写真はいいの見つからなかったので、好きなの使ってます。#Web制作 #コーディング#模写 pic.twitter.com/6UhV9avvVu— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 10, 2021
>
CSS実装ほぼ終わりました。
昨日、写経したおかげで中央寄せバッチリでした。
あとはindex項目の白枠内にmargin入れたいのですが
ちょっと難航しております。
paddingに変更したり、divで囲ったりしてますが
どうにもならないので、カンニングします。#Web制作#コーディング#模写 #朝活 pic.twitter.com/8nIujXnbMz— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 10, 2021
レスポンシブ完成しました。
昨日、悩んでいたINDEXの上下の空白が反映されない問題も
INDEX自体にpadding入れることで解決しました。
この調子でガンガン行きます。
行き詰ったら、読書時間にします。
曇り空ですが涼しくて、快適な朝です。#Web制作#模写#codestep#コーディング#朝活 pic.twitter.com/IlMnrMpbpf— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 11, 2021
コンディション不良や今でも課題の集中できない、注意力散漫はありつつも
比較的サクサクと進めていけるようになりました。
個人的には、すごい進歩です。
週末も買い物に行ったり、図書館に行ったりしながらも進めていってます。
形になってはきましたが
一番下のDETAILの左側が改行しないようにしたかったり
色々細かいところが気になって、ちょっと行き詰り気味。
ちょっと図書館に行ってきます。
帰ってきたら、とりあえず本読みながら、Twitterにつぶやいてきます。#Web制作#codestep#読書#コーディング#模写 pic.twitter.com/u0duOpcOTA— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 12, 2021
ようやく完成しました。
今からレスポンシブします。
マジで集中してなさすぎ。
ダメダメだなぁ。
気合い入れていきます。#Web制作#codestep #コーディング#模写 pic.twitter.com/JsxENx0LQD— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 12, 2021
レスポンシブ完成しました。
どんどん分かってきている感じがします。
ただpaddingとかmarginを書きまくってるので
もう少しコードが短くならないかなぁと悩んでいます。
今はとりあえず形ができれば、よしとしましょう。#Web制作#codestep #コーディング#模写 #レスポンシブ pic.twitter.com/cUvntHNMyk— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 12, 2021
できるようになると、楽しくなるのでどんどん進めていっています。
まぁ休みの日なので、実質どれくらいやっているかは謎ですが。
スクショ載せていなかったので、載せておきます。#Web制作#コーディング#模写#プログラミング初心者 #朝活 pic.twitter.com/VZ3aUvPB0j
— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 13, 2021
#codestep 2本目終了。
1本目のレシピサイトの詳細ページ作成です。
材料の項目を左右に振り分けるのに手間取りましたが
spanタグをdisplay:flex;でjustify-content:space-betweenしました。#Web制作#コーディング#模写#プログラミング初心者 pic.twitter.com/56RzEzhPMv— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 13, 2021
最後の課題に関してはなんだかんだ言いながら
18時くらいに始めて、22時前には終わらせています。
#codestep 入門編の最終問題できました！
調べたら意外と簡単にできるものだなと思いました。
とはいえ3時間くらいは掛かってるんですが。
次は初級編へ！ と行きたいところですが、めちゃ眠い。。。#Web制作#コーディング#模写 #プログラミング初心者 #夜活 pic.twitter.com/r6u2bzyAfC— 日下部まめ@IT組み込み系会社員＆Web制作フリーランス (@MameMrm) June 13, 2021
たかだか入門編のサイト6本ですが、それが1週間でできるようになっているし
どんどんレベルアップしています。
マジで継続は力なり、です。
Web制作を始めたばかりの皆さん、辛いときもあるかもしれませんが
一緒にがんばっていきましょう。
研修は今月末で終わるので、来月以降の本業の仕事がどうなるか分かりませんが
もし余裕があれば、続けてcodestepさんでサイト模写していこうと考えています。
最近はJavaScriptの基礎の基礎を勉強しています。
