アッキー@プログラミング勉強中🖥

36歳既婚。岡山在住🏯普段はWebと無関係の仕事をしています。Web制作の仕事を目指してProgateで勉強中✍️副業で5万稼ぐことが目標です。HTML,CSS,Javascript(jQuery),WordPressを学びたい🖥学んだこと、わからないことを言語化するためにツイートします📣

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅デザインカンプからのコーディング
・タブレット画面とりあえず完成

⭕️学んだこと
・Chrome デベロッパーツールでiPadやiPhoneの枠を表示させて確認できる。
　メニュー → Hide device frame
(参考サイト)
https://t.co/r42oMH1lNy

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

こうや��てフェイクニュースを見破れるのか🤔

「RevEye Reverse Image Search」というツールが使えそう✍️

https://t.co/OP0zTIcOqu

#真実
#ニュース

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅ハンバーガーメニューを作る時
⚪️HTML/CSSで作る
⭕️高速で読み込める

⚪️HTML/CSS/jQueryで作る
⭕️メニューの切り替え時にアニメーションをつけられる

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ
✅デザインカンプからのコーディング
⭕️学んだこと
・jQueryを使ってハンバーガーメニューの実装
jQueryを使うとハンバーガーメニューのアニメーションがてきる

😰難しいとこ
メニューではない部分をクリックした時もメニューを閉じるところ

#プログラミング初心者

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ
✅デザインカンプからのコーディング
・jQueryを使ってハンバーガーメニューの実装

⭕️学んだこと
・jQueryの読み込み方法
ーbodyタグの一番下に所定のコードを記載
(参考サイト)
https://t.co/DnsTkXpu9P

😰難しいところ
クリックしてもなぜかメニューが出てこない💦

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ
✅デザインカンプからのコーディング

・ハンバーガーメニ���ーの作り方の調査

CSSだけで作ろうとしてたけど、jQueryを使った方がいいのかも。

このサイトが参考になりそう。

https://t.co/xIyx5oKcna

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ
✅デザインカンプからのコーディング
⭕️学んだこと
・ハンバーガーメニュー実装

😰難しいところ
・ハンバーガーメニュー以外の部分をグレーに変えるところ
・ハンバーガーメニューを表示した時にスクロールできないようにするところ…

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

@junpei_sugiyama 私は今36歳で、Progateを終わってデザインカンプからコーディングしてみたらレスポンシブ対応で大苦戦してます💦

このツイートで元気をもらいました😊引き続き勉強頑張ります💪

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ
✅ハンバーガーメニューの作り方調査
ここでツイートされてるサイトは参考になりそう。

マウス操作しない人のことまで考えてハンバーガーメニューを作るという親切さに感心しました🤔

#プログラミング初心者
#プログラミング勉強中

[Saki*＊WEBデザイン勉強中！！ @web_saki]

まずは
ハンバーガーボタン作成 ≡

私は、この方のブログがすご��分かりやすかったです！
https://t.co/c2jb4sb7O2

自分のコードに当てはめていくには、ちゃんと内容を理解していないといけませんが、私にも出来ました！

[アッキー@プログラミング勉強中🖥 @wasabi68real]

確かに独学だとあれもこれも手を出してしまいそうになりますね…💦

しっかり目標を決めて、目標から逆算して必要な勉強をしていきます🙇‍♂️

今後、スクールやプログラミング講座を選ぶ時も自分の目標にちゃんと合ったものを選びたいと思いました😌

[とっくん | 著書「セミナーの始め方」(日本橋出版) @tokkun_9]

【YouTube更新】

今回は独学でプログラミングを勉強する人に向けて

「方向性の大切さ」を話しました。

「エンジニア」と言っても分野がたくさんあるので、

「どの領域をやりたいのか」自分の中で決めておかないととんでもなく遠回りしてしまいます！🙏

https://t.co/Sdg6dag1xu

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ
✅デザインカンプからのコーディング
・タブレット用画面にレスポンシブ対応
✔︎フッター部分完成

😰難しいところ
ブログ部分の画像がレスポンシブ化させようとすると枠と画像の間に隙間ができてしまう…

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

過去の自分と比べるのいいですね😌

このスタンスでこれからも勉強頑張ります😌

[とっくん | 著書「セミナーの始め方」(日本橋出版) @tokkun_9]

【YouTube更新】

プログラミング初心者が「他人と比較すると成長速度が落ちる」という話をしました

僕自身が他の人と比較してめっちゃ成長速度が落ちてたので、自分の体験を踏まえて話してます！

特にTwitterをよく見る人はあるあるだと思うので参考にしてみてください👌

https://t.co/0NEnxb3L5h

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅デザインカンプからのコーディング
・タブレット用画面にレスポンシブ対応

なぜか横揺れしてしまうので、横揺れの修正の途中まで…

参考になりそうなサイト
https://t.co/zwnrqBB97I

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅デザインカンプからのコーディング
・タブレット用画面にレスポンシブ対応の途中まで
⭕️学んだこと
heightを固定値にしてしまうとレスポンシブ化のときに苦労する

😰難しいところ
なぜか横揺れしてしまう…

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅デザインカンプからのコーディング
・タブレット用画面にレスポンシブ対応の途中まで

続きはまた明日。

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

@mild_heaven_6mg 確かに次何するかわからないときは辛いですよね…

キーボーさんはこれまでプログラミングの勉強続けてこれてるからプログラミングの才能ありますよ❗️だからどうかこの壁も乗り越えて、目標の実務に就くのを達成してほしいな😌

[アッキー@プログラミング勉強中🖥 @wasabi68real]

ちょうどプログラミング勉強始めて3ヶ月目だったので、この動画にすごい元気をもらいました🙇‍♂️

勉強を継続できてることを誇りに思いたいと思います😊

自分の学習記録をツイートしてて、辛くなったときに過去ツイートを見ると、前よりちょっと成長してるのを実感できてます😊

これからも頑張ります💪

[とっくん | 著書「セミナーの始め方」(日本橋出版) @tokkun_9]

YouTube更新！

「3ヶ月勉強を継続できてるなら、プログラミングの才能あるよ」という話。

動画の中で着ている服は#挫折乗り越えサロン のフリーランスデザイナーさんが作ったTシャツです！笑

僕自身がしんどい時期の話もしたので、今しんどい方は覗いてみてください！

https://t.co/xtT0x1sdLt

[アッキー@プログラミング勉強中🖥 @wasabi68real]

@web_saki リプの説明通りにしたらうまくいきました😊

transform: translateY(-〇〇);
↓ レスポンシブ時
transform: translateY(0);

transformを使えば、簡単でした😌

アドバイスありがとうございました😊

これからも頑張りま��💪

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅デザインカンプからのコーディング
⭕️学んだこと
・PC用では画像の上にあった文字をタブレット用では画像の外に配置。
position: absolute;
bottom: 〇〇;
でしか解決できず…💦

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

#今日の積み上げ

✅デザインカンプからのコーディング
⭕️学んだこと
・PC用では画像の上にあった文字をタブレット用では画像の外に配置。

transform: translateY(-〇〇);

↓ レスポンシブ時

transform: translateY(0);

を使うこともできる。

#プログラミング初心者
#プログラミング勉強中

[アッキー@プログラミング勉強中🖥 @wasabi68real]

@web_saki ありがとうございます😭

今日本業の仕事しながらここはどうすればいいのかずっと考えてました😅

ネガティブマージンは初めて聞きました！教えてくださってありがとうございます😊

今までinformationの部分を背景画像のdivに入れていたので、帰ったらすぐに直してみます💦

本当に感謝します🙌