ウェブ制作に向けて【2021年12月振り返り】

◆このnoteの振り返りの目的

ウェブ制作のためにやったことを記録して、自分がどんな成長をしたのかを明確にし自信につなげていくこと。

◆3月末までのウェブ制作の目標・ゴール

・HTML、CSS、JSを使用することができて、いくらかのフレームワーク( jQuery、VueJS、Bootstrap)を使用できている状態
・ウェブサイトを見た時に、だいたいどのくらいの時間がかかるのかをイメージできる状態
・ウェブサイト制作においての適切な環境設計の確定(Vscode、その拡張機能、Figma、Github、Codepen、Wordpressなど)
・ウェブサイト制作の、自分なりの手順を明確にできている状態(デザインカンプを見てから、ワイヤーフレームを作成し、コーディングを行い、バージョン管理し、完全にファイルフォルダが完成するまで)
・CSSのclass属性の命名規則、ファイルのディレクトリを、文書として確定
・displayプロパティとpositionプロパティの使い方を丁寧にまとめる
・【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSを使用できる状態
・英数字や記号などもすべてブラインドタッチできる状態
・Githubを理解し、適切なバージョン管理ができている状態
・Google開発者ツールが使用できる状態
・ウェブ制作についての、重大なセキュリティ面について、お客さんに説明ができている状態(IT基本技術者をとらないといけない??)
・結婚式の招待状を作成する。

◆2021年12月までにやったこと、学んだこと

・できる日は毎日、英数字と記号をメインに、ブラインドタッチ練習
・ProgateのWeb制作系を、二ヶ月で一周した。(HTML,CSS,JS,MySQL,Nodejs,VSCode,Githubなど)
・DiveIntoCodeを契約したが、ほぼ使わなかった。自分にとって説明が回りくどくて、使っていてあまり楽しくなかったため。
・どこかのスクールで学ぼうとして侍エンジニア、TechCampなどの大手スクール面談を受け、デイトラが最も良さそうだったが、10万円がどうしても高く感じてしまい、ネット記事や書籍を用いて独学でやろうと決意した。
・ともすたさんのYoutube動画の見たいものを見た。(HTML,CSS,VSCode,Githubなど)
・HTML/CSSだけでVSCodeを使い、あるサイトを参考にしてソースコードを見ないで、無理やりシングルページの結婚式の招待状を作成した。(スパゲティコード、レスポンシブ非対応)

◆学んだこと

・コードが書けるようになることと、実務で仕事するということは全く違うということ。実際にウェブサイトを制作してほしいお客さん(例えば、飲食自営業オーナーが「サイトを作成してほしい」とお願いされたときのような実務レベル)を意識したうえで、プログラミングを勉強していかないといけない。なので、ウェブ制作業界のことだったり、Wordpressも勉強したり、コーディングスピードや効率化から、SEO、セキュリティ、サーバー知識などもちゃんと勉強していく。

・多くのことを確認しながらコーディングする必要があるので、モニターがない状態でのコーディングは非効率。(htmlとcssのコーディング画面、デザインカンプの画面、作成中のサイト画面、分からないときに調べる用の画面)

・コーディングをしている途中に、様々なことを並行して思考しないといけないので、事前にインプットをして、自分なりのコーディングルールを決めて、文書化しておいたほうがいい。(でないと迷いに迷いまくって、結果何も進まない時間が多くなってしまう。クラス名、タグ、VSCodeのショートカットエメット、構造など)

◆学びたいこと、やりたいこと

・Figmaを使って、仕様書の情報(高さ横幅の大きさ)を分解
 ←デザインカンプの構造情報やイラストを、プロパティやタグレベルで事前に情報分解しておくことがとても重要
・要素の大きさの使い分け方。px,em,vw!!
・FrexBoxについて
・プロパティ(display、position、transform)について
・クラス名、命名規則(BEM、FROCCSのふたつ)を学び、自分ルールを作成

◆勉強になった、サイト集



この記事が気に入ったらサポートをしてみませんか?