3日間のCSS挑戦

5339 ワード
javascript css webdev beginners テキストリンク
今週初めに、私は30日間のCSS挑戦をすることに決めました.長い間、CSSを書くことで私の難しさを認識していたので、今週、私は最終的にこれについて何かをしたかった点に達しました.

背景
どのようにコード化するかを学習しているので、CSSを1つの理由で軽蔑しました.
  • いつも長すぎた
  • 私のCSSは、それがどうだったかについて、決して働きませんでした
  • 決して開始する場所は全く新しい
  • それは意味がない
  • 私さえウェブキットから始めさせないでください
  • 私はそれが悪かった
    • しかし、数週間前に、YouTubeアルゴリズムは最終的に私の好意で働いて、ビデオを推薦しました、そして、何かがクリックしました.
    ケビンは、これが私のOddball脳に意味があると説明しました.閉じるこの動画はお気に入りから削除されています.彼のビデオは、私がCSSをするより良い「正しい」方法があると理解させました.例えば、CSSプロパティがどのように意図されているかを理解することに対して、開発者が個人的な使用においてどのようにして開発したかは、CSSが意図的に混乱させられなかったことを意味していた.
    さらに重要なことに、これらの混乱に対処するために、CSS(JavaScriptと同様の)の新しい標準が開発されていました.最も重要なことは、私の好奇心は増加した.
    次の数週間、私はランダムにCSSで遊んで始めました.私は重要なCSSのプロパティについての読み取りを開始し、自分自身がケビンのビデオに戻って、彼は頻繁に使用されるプロパティをノートを取って発見し、codepenとそれぞれの私の理解をテストし始めた.

    これは私を今すぐもたらします
    最終的に、今週、私はバニラCSSで一貫した進歩で公式試みをすることに決めました.私の毎日のalgo課題とJavaScriptの練習に加えて、私は30日間まっすぐCSSの1つの新しいビットを学ぶために自分自身に挑戦したい
    驚くべきことに、30日のCSSの課題がたくさんありません.私の検索では、3 :

  • freeCodeCamp - これは、YouTubeの動画に沿って続くシリーズです.私はまだこれを行うことがありますが、誰かが私はすぐにそれを説明するよりも、CSSと一緒に再生することを強制する何かを望んだ.

  • 100 DAYS CSS CHALLENGE - これは涼しかったです、しかし、100日は私が現在作ることを探しているより大きい約束のようでした.私もその時まで雇われることを望みます.ウェブサイトも、ガイダンスを提供しません.

  • 30 Days of CSS Girls - オプションの間に.短いと十分な手順+リソースを各チャレンジを解決するためにコミットします.

    • だからここにある:私は、あなたのコーディング女の子
    今日はシンプルなハートを描きましょう.
    十分簡単です.正しい?
    悪い!
    今日の課題を解決するには、次のCSSプロパティを調べます.
  • position: absolute
  • transform: rotate
  • 擬似要素
  • CSSの位置
    • しかし、最終的に、解決策を検討して、これらの4つのものを深く見た後に、私は昨日、そして、今日、解決を再現することができました.
    <style>
.heart {
  background-color: red;
  height: 300px;
  width: 300px;
  position: absolute;
  transform: rotate(135deg);
  margin: 100px;
}

.heart::before {
  content:"";
  background-color: red;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: absolute;
  top: 0px;
  right: 140px;
}

.heart::after {
  content:"";
  background-color: red;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  position: absolute;
  top: 140px;
  right: 0px;
}
</style>

...

<body>
<div class="heart"></div>
</body>
    Mysql GTID
    関数の抹消