tocotoco@模写ゼロからのLP作成

30DAYSトラ1st【コーディング基礎学習〜環境設定編】終了

C言語プログラマ→失敗しない医師の国内外出張同行秘書→アメリカのカレッジでマーケティングコース受講中に帰国→HTML&CSS勉強中

・HTML&CSS習得→デザインの勉強をしたい

♪趣味
EDMを聴く。今はPUBGモバイルに夢中。ツイッター初心者♪

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

【２週間チャレンジ--模写ゼロからのLP作成7P】
（現状）
Progate：学習コース、初級道場数回、中級・上級道場１回。動画でFlexbox、Bootstrap視聴。
（LP案件)
コーディングのみ。アニメーションなし。
納期未定、素材をもらい、3月末位。
追い込みツイートします🤣
#デイトラ #駆け出しエンジニア

[Yahoo!ニュース @YahooNewsTopics]

【感染者多い愛知 なぜ対象外?】
https://t.co/aDwBBeAobd

新型コロナウイルスの感染拡大を受け、東京や大阪など7つの都府県を対象に緊急事態宣言が出された。感染者数が全国5番目、死者は東京都に次いで多い愛知県。なぜ対象外となったのか。

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

HTML,CSSで、これをしたいから、こ��設定すればよいのね！と、コーディングをすればいいと思ってました。
でも、結局、理屈を理解しないと無駄に試行錯誤し、同じ様なキーワードで検索している。ソースも汚くなってしまった。
根本を理解し、エクセルに頻出用語をまとめてます📖
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

LP…一枚のぺらサイトだけど、大体7Pぐらいのボリュームだった→デザイナーさん「簡単な作りにします」…からの20P近くになってる…ワァ…😱これは泣きたくなる #HTML #CSS　私に、かなりきつい。コーディング嫌いになりそう。でも、できないって言いたくない…ブレイクポイントなど確認しなきゃ😰😰

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

したいことができそうで実現できない、もやもやっとした状態です😰
ネットの良いところは、疑問をピンポイントで検索🧐かけて探せるところ。
今みている書籍📖の良いところは、まず完成形があり、それを実現するために順序立てて、することが書かれているところ。
両方併用です👐
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

ナビゲーション固定、ナビゲーション内左側にロゴ、右側にボタン２つ作りたい。

1⃣ナビゲーション固定ＯＫ、ロゴ：ＯＫ．ボタン：ナビゲーション（ヘッダー）の下へ…
2⃣ナビゲーション固定ＯＫ、 ロゴ、ボタン：ナビゲーション（ヘッダー）の下へ…
HTML何かが違う…HTMLクイズを解いてます😂
#HTML

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

こんにちは😊
気が付いたら時がめちゃくちゃ経っている😱
案件〆切は、３月末→４月中旬～下旬に変更。まだ、正式にデザインカンプきてないです。確定部分を進めます。
これから、Adobe XDで計測しコーディング。合ってるかな…https://t.co/d6Pyk71Epe 参考にさせて頂いてます。#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

作成したいチェックボックスは、選択不可で既に印がついているもの。チェック✔️はピンクで背景が白
checkboxでは、形状やサイズをCSSで変更不可。#Progate　で　border-radiusでテキストを乗せたレッスンは、どこだったかな。これで実現できるかな..🤔
#駆け出しエンジニアと繋がりたい #コーディング

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

☑を作りたい！
四���部分（背景？）は、白で✔️がピンク。
うーん🤔背景は自作で✔️は、アイコンを使用？！
#progate　で学習したFont Awesomeでは、しっくりくる✔️が有料😓アイコン総合検索サイト https://t.co/a9EMLu77vZ を見つけたので探してみます❣️
作れるかな..
#駆け出しエンジニアと繋がりたい

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

ヒーローに重ねた画像のレスポンシブ、対応できました🙌試行錯誤なので、言葉足らずですが、ヒーローは、「<div class="jumbotron jumbotron-fluid">」としていたので、同じ様にfluid対応で「<img class="hdr-logo img-fluid" src="..>」＋css対応でいけました🥰おやすみなさい🌃
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

Bootstrapを使用したヒーロー���メージで、レスポンシブにならない原因が判明

・ヒーローイメージ上に画像を重ねていた
・ヘッダーにも、同じ画像を設定

両者をコメントアウトしてみると、レスポンシブされました。ヒーローイメージにのせたテキストは、問題なし。
対応頑張る🧐
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

最近、LPを仕上げるために調べ、試し、結構夜中まで起きています😑
やっていることに意味があるのかなとか、心が少し闇になる。既に活躍されている方は、きっと違う世界が見えている訳で。けど、今できることをするしかないと自分に言い聞かせてます。睡眠は大事ですね🌛
#睡眠 #HTML5 #css #Bootstrap

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

これからの❣️ #積み上げ ❣️
💍レスポンシブ対応

昨日の積み上げ予定のLP案件 1,2Pそんな簡単に進まなかったです。今日は、レスポンシブに集中。
素材・ワイヤーフレーム頂く予定が、まだなので、できるだけ、多くのわかることを増やす..学習しながら実現するのは、綱渡りです😭
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

わぁ💕🥰💕嬉しい🤣
LP案件の1ページ目のヒーローイメージできました！些細なことですが、目で見てわかるとテンション上がる😭
#HTML にスタイル記載もあったけど、装飾���ので #CSS に書きました。よいかな..
ただ、レスポンシブにはなっていません😭
#駆け出しエンジニアと繋がりたい #レスポンシブ

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

こんばんは😊
これからの #積み上げ。

💍LP案件のbody部分 １～2Ｐ作成。

1Pの大部分は、ヒーローイメージなので、画面サイズによってレスポンシブが、きちんと変わっていたら、次の作業が進��かな🤔Bootstrapを使う��とに決めました！頑張ります🙌
#駆け出しエンジニアと繋がりたい #Bootstrap

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

#Progate の練習・道場の回数を重ねてやっていない私なので、コーディングの段階なると、もっと余裕があるときに練習を重ねるべきだったと、しみじみ思います😔
レイアウトをみて、これはこうしたらいいのね！となるには、やっぱり積み重ねだとやってないからこそ感じます��
#駆け出しエンジニア #CSS

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

昨日は、ラフ版を印刷▶️構造を書き込み。コーディングは、flexboxを使うか、bootstrapを使うか全く使わないか、悩みます🤔
３つとも、頭に入っているわけではないので、調べながらです。時間がないのでレスポンシブ対応でのレイアウト崩れを考えるなら、bootstrapがよいのかな..🤔
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

#２週間チャレンジ中

昨日は、宣言したHTML構造完了→コーディングまで、辿り着けませんでした😢集中します🧐

❣️#これからの積み上げ❣️
💍LP案件（７ページ）のHTMLマークアップ完成
💍コーディング着手

LP完成できるのか考えると、不安で心臓がどきどきします。頑張ります。
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

こんばんは☺️

日中、どこかのサイトをフック���HTML構造化について案が浮かびそう▶️他の用事で忘れました😢

隙間時間にできる作業とじっくり落とし込むためにまとまった時間が必要な作業がありますね　

気持ちだけ焦っても仕方ないので、限られた時間にできることを意識します！
#駆け出しエンジニア

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

HTMLのマークアップ？
#Progate は、タグ、属性の使い方学習が少ないかな？どれを使うか悩み中🤔 #airticle　#selection #div #id #class このあたりの整理です🧐

特に @webcreatorbox さんのサイトを参考にしています📚
構造が固まると一歩進むかな。頑張ります。
#駆け出しエンジニアと繋がりたい

[tocotoco@模写ゼロからのLP作成 @tocotocohpy]

こんにちは☺️
一昨日、昨日は、HTMLの構造について、コーディングするために、どういう風な構造にしたらよいのか...🧐
#Progate では、このあたりの学習ないので悩みます。
構造を理解するためにgoogle画像で「HTML構造」などと検索しました。それを紙に書いて理解。
#駆け出しエンジニアと繋がりたい