勉強メモ：ProgateのHTML&CSS中級編

プログラミング メモ 勉強

 

ProgateのHTML&CSS中級編を修了しました！

前回の初級編から..いやぁ..終わるのが遅かった。時間かかった。反省です。

年度末の忙しさで毎日帰宅後気絶したように寝てしまっていました。

本当に、いつ寝たのかわからないようなそんな毎日。

なかなか勉強と日々の仕事との両立は難しいですがなるべく隙間時間を見つけて

コツコツやっていき、なんとか終わりました(*´∀｀*)！

 

さて、今回も「★お気に入り」したところを振り返っていきたいと思います。

①インラインブロック、display

これは、前回の初級編でもチェックをつけたところです。

ikura-don.hatenadiary.jp

 

インラインブロック要素を頭に入れておくのって大事だなーとおもっていながらも、

複雑に考えてしまい頭が混乱していましたが、

今回、シンプルな図解で解説しているページが出てきたのでわかりやすかったです！

今後も混乱したら、図解見て頭整理しよーっとおもったので、お気に入りチェックです。

 

②hover、transition、active

これって、全くプログラミングを知らない未経験者的には、

感動するプロパティではないでしょうか！

少なくとも、私は初めて知った時「おおーっ！」と感動しました。

「あの、いつもホームページとかでクリックする時になるやつね！はいはいはい！（興奮）」みたいな。笑

自分がもしウェブページなどを作成する時に、これ使いたいだろうなーとおもって、

チェックしました。（単純）

 

③<a>タグをクリックできる範囲

これもですね、

「あーあるーーなんか、会社でマッハで仕事している時とかに、クリックする丸の近くら辺をポチって押してても、ぜんぜん動かなくて、ちっっっっちゃい丸をちゃんとクリックしないと次に飛ばないってことあるーーーーあれやだーーでもあれって変えれるんだーーー」と思い、ファボ。

 

あとは、ボタンをへこますのとかも楽しかった(*ﾟ▽ﾟ*)！笑

今までユーザーとしてただ見るだけだった、ウェブページのデザインや機能の裏側がどんどんわかっていくこの感じが今は楽しいです！

学べば学ぶほどプログラミングってすごいなーって思います。

それと同時に、まだまだ知らない機能もあるし、もし自分ができることが増えたら、

これを作りたい！って思った時にすぐに作れるようになるんだろうなぁ。。

なんて妄想もしています。笑　だから、どんどん色んなことを覚えて出来ることを増やしたいなぁ。

 

 

さぁ、忙しい3月も終わったしどんどんいくぞーヽ（  ´3｀）ノ！

恋人について

まる氏 恋人

今回は私のこころ強い相棒であり、

プログラミングの先生でもあり、

恋人でもある彼氏（通称：まる）について書こうと思います。

 

まるは、こんな人

f:id:yutttt31:20180318160819p:plain

（似顔絵です笑）（ゆるい）

 

・20代前半

・広告代理店勤務

・主にデジタルマーケティングに特化している

・HTML,CSS,Javascript,Python,C++

 

普通のOLで普段営業にでている私とは正反対のことをしています。

私は、今までwebサービスビジネスやプログラミングに興味があるものの、

どうやってやればいいのやら。と思いつつ、何もしないまま時が過ぎていました。

そんな時に彼とちょうど出会って、まさに私の知らないこと・持ってない武器を持ってる！と羨ましさと憧れを抱いたのを覚えています。

「プログラミングを教えて！」と急に言ったにも関わらず、

「オッケー！」とHTML、CSSについての勉強ツールまで作ってくれ、

そこから彼は私にとって一番こころ強くて信頼できるプログラミングの先生になりました。

 

彼と出会ってなかったら、私は今もまだ「プログラミングやってみたいな〜うにゃうにゃ」とぼけぼけしていたと思います。本当に感謝ですね。救世主です。

プログラミングできる彼氏、最高だと思います！（誰）

 

彼はこのブログも見ていてくれて、時々フィードバックもしてくれます笑

今後は、そんなまる氏も登場させちゃおうかヽ(･ω･)ゞなんておもってます！

 

 

 

 

勉強メモ：ProgateのHTML&CSS初級編

プログラミング メモ 勉強

 

ProgateのHTML&CSS初級編をやっと修了しました。

 

最初は初級編ってどんな内容なのかなぁ。と思っていましたが、

内容は充実しており、今までにHTMLとCSSについてインプットしていたため、

個人的にはとても良い復習の場になりました。

 

Progateは各単元ごとに「お気に入り」をつけられる機能がついてます。（すごく便利！）

左上の旗？の星を押すだけ★

f:id:yutttt31:20180311145936j:plain

なので、自分が苦手だと思っているところや、今後忘れないようにしたいなと

思う項目に「お気に入り」をその都度つけていきました。

 

初級編でお気に入りをつけたところは以下の部分です。

①「ブロック要素・インライン要素」

これは、独学で彼からプログラミングを教えてもらっている時に最初に

教わったものですが、なかなか覚えられず、、

<div>はブロック要素？インライン要素？どっち？

と聞かれて、「う〜ん(´*ω*｀)」となることが多かったです...

なので、今回改めてprogateで復習することでイメージがつけたかな。と思います。

 

②「paddingとmargin」「ボックスモデル」

これも独学時代に悩まされました、、

独学の時はあるLPデザインをコーディングしながら勉強していたのですが、

デザインを見て、

「ここは...paddingか？いや、marginか？ん？どうやってこの幅を作ればいいかな(-ω-;)ｳｰﾝ？」

と頭の中がはてなだらけになっていました。

このpaddingとmarginの考え方は今後実践の場でその都度振り返ることがあると思ったので、即お気に入りボタンを押しました（笑）

 

③「お問い合わせフォームを作ろう」

これは、独学の時にやらなかった項目だったので、お気に入りに入れました。（そんだけ）

 

④「全体のレイアウト」

全体のレイアウトって、基本中の基本ですが、

とっっても大事だと思うんです！（誰さま）

例えば、LPデザインをコーディングしていくにあたって、

まずは全体像や構造をパッと考えることからスタートするのではないかと思っていて、（というか、某彼氏に言われました）

全体の構造と、それぞれの中身の構造まで考えた上でコーディングしていくと早いし綺麗にかけるとのこと。

なので、この「全体のレイアウト」が頭に入っていることは大事だなと思います。

このProgateの全体レイアウトのイラストはわかりやすかったので、お気に入り登録しました★

 

以上がProgate　HTML&CSS初級編の振り返りです。

中級編もさささっと終わらせたいな！

 

引き続き頑張ります(●ゝω・)ゞ

 

 

 

 

 

 

はじめます。

f:id:yutttt31:20180126195059j:image

 

自分の記録用にブログをはじめようと思います。

 

現在のわたし...

普通のOL/地方配属/営業中/7:30出社19時退社/身についたスキルは若干の税務知識と運転技術

 

今年挑戦したいこと...

プログラミング勉強/プログラミングでプチ副業/フリーランスエンジニアとして独立/

 

場所や時間にとらわれず生きていきたいと思うようになりました。

最初は転職も考えたけど、大切な人の側にいたい気持ちや、なりたい姿を考えた時に、転職という考えは消えて、今はフリーランスエンジニアとして働きたいと思ってます。

そのために、プログラミング勉強中です。

 

現状を打破することや挑戦は、常にリスクを伴うのですごく苦しいこともあるけど、でも今は新しい世界に飛び込む楽しさやワクワク感も味わいながら取りくめてます。

 

ゆる〜く、でもしっかりとやるべきことはやって、夢が叶うといいなあ。