勉強 思ったこと

2019/6/2

【実録】「ウェブカツ!!」を6か月やってみた感想

少し遅れましたが、ウェブカツでの報告ブログがとうとう6回目になりました。 2018年11月から学び始め、5月で半年経過。 とにかく目まぐるしく過ぎていった半年でした。 そして今現在(7か月目)、おかげさまでフルリモートで仕事を頂けるようになり、先週開業届を出してきました。形だけ見れば今流行りのフリーランスというやつですが、当の本人が一番驚いています。   6か月の軌跡 ウェブカツに入った当時の私の状態はこんな感じ。 ・HTML/CSSは一応読めば理解はできる(ページ制作経験なし) ・JS、PHP ...

勉強 その他

2019/4/29

自己アピールページ作成のすすめ

先日ツイッターで「自己アピールページを作った方がいいよ」的な内容を書いたのですが、反響が大きめだったことと、リプ欄で繋ぎ忘れてテキストがバラバラになったのでまとめ直しました。ついでに追記もしておきました。 ※スマホだと画像の文字が小さくて読みづらいです、すみません。   ツイッターでのテキスト全文 この1週間、営業に使えるデザイン作品とそのテンプレページを作っていました。 (簡易版) https://raradi.com/wkmin/appeal.html 実際には序文などもっと丁寧に文章を書い ...

勉強 プログラミング

2019/3/21

【実録】「ウェブカツ!!」を5か月やってみた感想

ウェブカツでの報告ブログ5回目です。 5か月目まであと1週間ほどありますが、ポートフォリオサイトが完成し勉強的にもキリが良かったためこの時点で報告ブログを書くことにしました。 最近多くの方が受講されていて、「このままウェブカツを進めたら数か月後にはどんな感じになるのだろう」「Winのまま進めて大丈夫?」と感じている方が多いと思うので(実際に質問を受けました)、今回はそこをメインに書いてみたいと思います。   現在の状況について 勉強時間と進捗はだいたい以下の通り。 平日:0-1時間(ウェブカツ) ...

勉強

2019/3/9

デザインが苦手な方が注意するとよさげな点

先日「KMYさんのようにデザインを作るにはどうしたらいいですか」と質問をいただきました。 また、ここしばらくウェブカツのTL上でも、今フリーランスでWEBエンジニアを始めたばかりの方のNoteでも「デザインが苦手」というのを見たので、私がデザイン上で気を付けているちょっとした点について書くことにしました。   といっても私はデザインのプロではありません。 実はデザインを勉強した経験も一切ありません。 そういう点で私が実践していることは、他の方にも実践しやすいのではと思います。   デザ ...

勉強 プログラミング

2019/2/28

【実録】「ウェブカツ!!」を4か月やってみた感想

ウェブカツで勉強を初めて4か月が経ちました。 そして折り返しをとうに過ぎ、いよいよ半年が見えてきました。   現在の状況について 勉強時間と進捗はだいたい以下の通り。 平日:1-2時間(ウェブカツ) / その他2時間 休日:ほぼ勉強時間なし (制作物ちょいちょい程度) 進捗:現在JS上級部/L3 (1か月でJS中級、HTML/CSS中級~上級、JS上級途中まで。その他WEBサービス部やJS入門を繰り返す) 勉強時間を取れるのはほぼ平日のみです。 なお、4か月目はウェブカツ講座を新しく進める時間よ ...

勉強 プログラミング

2019/1/31

【実録】「ウェブカツ!!」を3か月やってみた感想

  ウェブカツで勉強を初めてあっという間に3か月経ちました。   現在の状況について 勉強時間と進捗はだいたい以下の通り。 平日:1-2時間(ウェブカツ)/ その他2時間 休日:ほぼ勉強時間なし 進捗:現在JS中級部/L15 (1か月でWEBサービス部(2回目)、PHPオブジェクト部、WP部、JS中級途中まで) 勉強時間を取れるのはほぼ平日のみです。 講座を復習しつつ自分のサンプル作成などに時間を割いていたりして、正直進み方で言えばかなり遅い方だと思います。   3か月目、自 ...

勉強 プログラミング

2019/1/18

「Progateとウェブカツどっちがいいの?」

ちょうど昨日ブログに書いたのですが、コンスタントに「Skillhacks」と「ウェブカツ1か月目」の記事がよく読まれています。 「ああ、皆どこで学べばいいのか悩んでいるんだなー」と思っていたのですが、ツイッターのハッシュタグ「#ウェブカツ」を見ていると、ここしばらく毎日のように   「最近よく聞くけどウェブカツっていいのかなあ(チラッ」 「Progateとウェブカツ、悩んでいるんだけど…」   というツイートをよく見るようになりました。   そこで、一応どちらでも勉強している ...

勉強 プログラミング

2018/12/27

【実録】「ウェブカツ!!」を2か月やってみた感想

  ウェブカツで勉強を初めて約2か月経ちました。 現在の状況ですが、勉強時間はだいたい以下の通り。 1日平均 : 2-3時間(ウェブカツ)/ その他2時間 総合計 :約120時間 平日はウェブカツで大体2-3時間+その他2時間。 休日はPC前に座る時間がほぼ時間が取れないため、本を持ち歩き目と脳ができるだけコードを忘れないようにしています。 ・現在の状況について ・各科目について   1)HTML/CSS   2)JS/JQuery   3)PHP   4)WEBサービス部   5)PHPオブジ ...

勉強 雑記

2018/12/4

最初からウェブカツにしておけば

※追記: 知り合いから「興味を持った人のためにウェブカツの内容もある程度書いておいた方がいい」との指摘を頂いたので、記事の最後にリンクと内容を貼っておきます。   ----------------------- 以前私はSkillhacksというサービスを購入し勉強しようと思っていたのですが、結果的には大失敗でした。   その時、たまたまタイミングよく「侍エンジニア塾、SkillHacksで被害に遭われた方は無料にします」という趣旨のウェブカツ主催者様のツイートを見つけ、ご好意で今ウェ ...

勉強 思ったこと プログラミング

2019/1/10

【実録】SkillHacksを2週間で止めてしまった理由

※ここではSkillHacksを購入し、実際に使った個人の感想を率直に述べています。SkillHacks主催者を誹謗中傷する意図は全くございません、予めご了承ください。   現在、プログラミングの勉強をウェブカツ!!で毎日猛勉強中ですが、実はその2週間前には「SkillHacks」というプログラミング学習サービスを購入していました。2018年10月の事です。   その時の私は、このような状態でした。 「HTML/CSSは読み書きできるが、もっと高度な部分まで学びたい」 「WEB系のプロ ...

プログラミング

【HTML/CSS】Progateを終わった後に読む本

更新日:

私がHTMLを覚えたのは20年ほど前のことです。

まだCSSもなく、背景がデフォルト灰色のままの文字だけ並んだホームページがまだ普通だった時代。HTMLの初心者用本というのは殆どなくて、HTML/JSリファレンス(単語集)を一生懸命見て自分でページをどんどん書いていって覚えました。

 

じゃあ今はどうしたらいいか。
色々と教材が手に入る今、そういう非効率的なことをする必要は一切ないと思います。

個人的にHTML/CSSなら、一番最初の教材として「Progate」一択で問題ないと考えています。
環境設定などといった初心者の壁をとっぱらい、純粋に「基本の言語がどんなものか」を覚えることに注力できるからです。

 

しかし問題はそのあとです。

 

progateは基本穴埋めである上(自分でコードを全て打たないので全体を把握しづらい)、デバッグも環境設定もシステムが行ってくれるため、「知識はついたけど実際に1から作るとなると分からない」という中途半端な状態ではないでしょうか。

 

実は出産復帰後、私がまさにその状態でした(私は一応、最低限の基礎知識はあったのでprogateでなく本での独学でした)。

 

そこから「実際のコーディング」を覚えるために使った3冊の本を紹介しようと思います。なお、アフィリエイトではない、純粋に写真直貼りの記事なので見づらいですがご容赦ください。

 

 

html&cssとwebデザインが 1冊できちんと身につく本

まず最初に始めるのならこちら。
「HTML/CSSタグは何となく知っている」レベルの初心者向けに書かれた、ちょうどいい本です。progateではやらなかった環境設定(ディレクトリ構成など)もこの本に書いてあります。

HTML&CSSとWebデザインが 1冊できちんと身につく本

 

内容は「フルスクリーン」「シングルカラム」「2カラム」「グリッド表示」+レスポンシブデザインといったおしゃれ目のページを作っていくという実践的なもの。ソースを1つ1つもとても丁寧に解説してくれており、「ああ、こうやって組んで行くんだ!」と理解することができます。

色々な基本パターンのサンプルがあります

 

どこをどのように記述するかという解説がとても丁寧

 

私は復帰後この1冊から始めて、今のHTML/CSSをようやく何とか把握することができました。

 

Webデザインとコーディングのきほんのきほん

上の本を終えたら、次はJSやJQueryも少し入れてみたこちらの本がよかったです。先ほどの本よりもう少し本格的なビジネスサイトをきちんと作っていく感じになります。

webデザインとコーディングのきほんのきほん

作るデザインはこんな感じ

 

この本のすごいところは「きほんのきほん」と書いてある通り、WEBページを提供するにあたって必要な、全ての事柄が書いてあるところ。

コーディング以外にもすごく大事な情報がたくさん

 

「色の組み合わせ」「フォント」といった基本的なデザインの説明から始まり、ページのコンセプト決め、ユーザビリティの考慮、カンプの作り方、そしてこのサンプルデザインを用いてPhotoshopでパーツを作成し、切りだし、それを実際にコーディングしていくところまで本当に広くカバーされています(もちろん素材は用意されているので、コーディングだけでも可能です)

コーディングのための本というより、WEBデザイナーとしてやっていくために必要な知識がわかりやすくギュッと詰まった本です。

 

HTML5/CSS3モダンコーディング

上の2冊が終わって、ある程度自信がついたならこの本もお勧めです。
私は「中級者向けならこれ」「これを何回か回せば力が付く」というのを見て購入しましたが、そりゃあもうめちゃくちゃ難しかったです…!

HTML5/CSS3モダンコーディング

 

デザインはコーディング用サンプルは3パターン。
企業でよくあるスタンダードレイアウト、写真多めのグリッドレイアウト、今流行りっぽいシングルページレイアウトです。

スタンダード、グリッドレイアウト

 

シングルページレイアウト

 

2015年初版の本なので、今となっては古い情報や組み方もあったりしますが、コーディングの基本が変わる訳ではないのでとにかくこれを回せば知識や実力はつくと思います。なかなか普通の本では詳しく説明がされていない細かい部分まで、よく解説されています。

 

というか難しくて理解するのが本当に大変。

 

私は、transform系のrotateといったベンダープレフィックス必須の新機能や、CSSのカウントアップ機能などはこの本で初めて知りました。

 

とにかく機能の解説が細かい!

 

この本はまだ2回しか回していませんが、すっかり忘れているのでまたチャレンジしなければ…。

 

今はウェブカツがメインの勉強になっていますが、CSSグリッド+Flexboxを勉強するため、2018年1月に出た「HTML5&CSS3ステップアップブック」を写本したいなあと思っています。

 

おすすめ記事

1

※ここではSkillHacksを購入し、実際に使った個人の感想を率直に述べています。SkillHacks主催者を誹謗中傷する意図は全くございません、予めご了承ください。   現在、プログラミ ...

2

ウェブカツで勉強を初めて約1か月経ちました。   私のツイートについているハッシュタグ「#skillhacks では実務レベルのスキルがつかなかったので #ウェブカツ で稼げる力を学び中」を ...

3

私がHTMLを覚えたのは20年ほど前のことです。 まだCSSもなく、背景がデフォルト灰色のままの文字だけ並んだホームページがまだ普通だった時代。HTMLの初心者用本というのは殆どなくて、HTML/JS ...

-プログラミング

Copyright© 40代主婦が、今から始めるプログラミング , 2019 All Rights Reserved Powered by AFFINGER5.