副業初心者が取り組みやすいWeb制作についてまとめてみました。Web制作ってどういうことをするのか分からないという人や、始めたいけどどう勉強すればいいか分からないという人に向けて書いています。
Web制作について
HTMLとCSSについて
HTML(Hyper Text Markup Language)とは、ウェブサイトのコンテンツの構造を作るために使うコードです。コンテンツは段落、箇条書きのリスト、画像の使用、データテーブルなどの組み合わせで構成されています。
MDN Web Docs
CSS(Cascading Style Sheets)とは文書のスタイルやレイアウトをどのように表現するか指定する言語です。
MDN Web Docs
詳しい説明は他のサイトの記事でどうぞ
HTMLとは？できることやタグの種類、勉強方法もわかりやすく解説
CSSとは？できることや書き方を初心者向けにわかりやすく解説
Webデザインとは違う
Webデザインとは、
デザインとは、デザイナーが担当し、そのデザインファイルをもとにコーディングを行います。人によっては、デザインとコーディング両方を担当する人にいます。
勉強してみた感想
僕自身、プログラミングにはすこし自信があったのですが、web制作は難しいなという印象です。独学では、少なくても1日1時間、2-3ヶ月勉強しただけでは副業するレベルにならないと思います。
おすすめの勉強法
本
僕がおすすめする本は以下になります。
この一冊があれば十分かなと思います。ただ、初めて読んだときは、タグの階層構造がすこし複雑で本の通りに進めるのができなかった思い出があります。なので、まずは手を動かさずに本を一度読むと良いと思います。
YouTube
おすすめのYouTubeチャンネルについて紹介します。
初心者にもわかりやすく丁寧に解説しています。また、後述する模写コーディングのやり方についても紹介してくれています。
コーディングの仕方以外でも、Figmaなどデザインツールに使用方法なども解説しています。またshortsでも紹介しているので、スキマ時間でも勉強することができます。
模写サイト
おすすめの模写サイトについて紹介します。
無料コーディング練習所の方が難しいと思うので、まずはCodejumpからやってみるといいでしょう。
模写コーディングにおいて、重要なことは30%の出来でも良いのでやってみることです。自分で考えながら、コーディングを行ってみることです。始めから全てのやり方を知っているわけではないので、自分で調べながらやるという練習にもなります。
副業するまでに準備していること
コーディングの勉強
言わずもがなですね。いろいろな模写サイトをコーディングするのがおすすめです。また、コーディング以外には、Google Chromeの拡張機能やVisual Studio Codeの使い方を知っておくとコーディングがやりやすくなったり、作業時間の短縮にもつながるので勉強しておくといいでしょう。
副業の準備
模写コーディングができるようになったら、副業を始めるスタートラインに立てるレベルになったと思います。副業をやったことがないという人は、まずはMENTAなどのサービスを使って、副業をやり方を教えてもらうと良いでしょう。
模写コーディングができるようになったら、今度は自分のポートフォリオサイトを作りCoconalaなどのサイトで仕事を受注するという流れになります。
まとめ
Web制作とは、どういうことなのか。副業するために必要なことは何なのかをまとめました。これから副業をするという人の役に立てばうれしいです。
