From 6e436a5b3ac14449816ca7bac907634735dba2c4 Mon Sep 17 00:00:00 2001 From: Ken Schaefer Date: Thu, 20 Apr 2023 06:46:25 -0500 Subject: [PATCH] css complete --- css-complete/sec2/index.html | 33 +++++++++++++++++++ css-complete/sec2/instructions.txt | 7 ++++ css-complete/sec2/main.css | 12 +++++++ css-complete/sec3/favicon.png | Bin 0 -> 1118 bytes css-complete/sec3/index.html | 26 +++++++++++++++ css-complete/sec3/main.css | 20 +++++++++++ php/getting-started/favicon.ico | Bin 0 -> 15406 bytes php/getting-started/form.php | 1 + react-complete-guide/react-complete-notes.md | 8 +++++ 9 files changed, 107 insertions(+) create mode 100644 css-complete/sec2/index.html create mode 100644 css-complete/sec2/instructions.txt create mode 100644 css-complete/sec2/main.css create mode 100644 css-complete/sec3/favicon.png create mode 100644 css-complete/sec3/index.html create mode 100644 css-complete/sec3/main.css create mode 100644 php/getting-started/favicon.ico diff --git a/css-complete/sec2/index.html b/css-complete/sec2/index.html new file mode 100644 index 0000000..c5c2f3a --- /dev/null +++ b/css-complete/sec2/index.html @@ -0,0 +1,33 @@ + + + + + + + CSS Course + + + +

Assignment - Selectors & Properties

+
    +
  1. Style the above <h1> tag to use any color of your choice and a sans-serif font.
    2. +
  2. Style all <code> tags to use the monospace font-family and have red text.
    3. +
  3. Use a class selector to ensure that the <code> elements in the second <li> element have a different color (e.g. green).
    4. +
  4. Switch the order of the rules you created and use the dev tools of your browser to understand how specifity resolves conflicts (for the <code> elements).
    5. +
  5. Set a default font (e.g. sans-serif) for the entire content of your page and use "Inheritance" to change the font of the <li> items, too.
    6. +
  6. Use a combinator to give all <li> elements but the first one (!) a black background and white text color (don't worry if the numbers disappear).
    7. +
  7. Use another combinator to now give all <li> inside an <ol> element a black background and white text color.
    8. +
+ + + + + + + + + + + + + diff --git a/css-complete/sec2/instructions.txt b/css-complete/sec2/instructions.txt new file mode 100644 index 0000000..6cc3aae --- /dev/null +++ b/css-complete/sec2/instructions.txt @@ -0,0 +1,7 @@ +1. Style the above

tag to use any color of your choice and a sans-serif font. +2. Style all tags to use the monospace font-family and have red text. +3. Use a class selector to ensure that the elements in the second
  • element have a different color (e.g. green). +4. Switch the order of the rules you created and use the dev tools of your browser to understand how specifity resolves conflicts (for the elements). +5. Set a default font (e.g. sans-serif) for the entire content of your page and use "Inheritance" to change the font of the
  • items, too. +6. Use a combinator to give all
  • elements but the first one (!) a black background and white text color (don't worry if the numbers disappear). +7. Use another combinator to now give all
  • inside an
      element a black background and white text color. \ No newline at end of file diff --git a/css-complete/sec2/main.css b/css-complete/sec2/main.css new file mode 100644 index 0000000..d43021b --- /dev/null +++ b/css-complete/sec2/main.css @@ -0,0 +1,12 @@ +h1 { + color: blue; + font-family: sans-serif; +} +code { + color: red; + font-family: monospace; +} +li + code { + color: green; + font-family: monospace; +} \ No newline at end of file diff --git a/css-complete/sec3/favicon.png b/css-complete/sec3/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..fc10fbad37ab1ad1062070f6ebbe898e05e5bcd2 GIT binary patch literal 1118 zcmbtQ?N3uz9DWMeks{-rR^7|x0uF)Ods}ErZzxzOlxDO7?EpoT(q3zWeX%X0W63o8 z1S1QKIo_sm1khwI3`iy<#w^=1lwmdpSrl{vqkPy{_M)498DY1M_z&!toO6D^bDliU zd7jQHlRj3oR|Fu|P@${g&-n0)j^y_&D$WcDUUgdP1NFvA*5+|Zt#(f{Ck?v1{5w!s z9Q0akEnI+T<{VD9hW!27=Op2@YsflCo)8i(>oYrPfYd}MibXbJmQQ_^; z&;0SjvxGP|AB&IoPnGJX`Rt+`TB8=2?2h@zx{IF${u+G=#=m{xXTI;Qs_$l_D()-xT8G7=*M~mwJ{4F{6d&MbL2& zMq*5ctXSkF;JsXYr$JFN=2dW$7?ERMii!R3rQp9?C?7ic!4>Q<-=- z2Olx$O~gh8WJy>R;x4e7j*uD~EWR%&d(eSN5k8E^XXQhWuj2u*o{f7B4707v=ffFX zRbV9%vxWGg7$wPA6XVl#j2dvS5te;>=e#ff*3q{#+it%Y~5&UH=J8*JTeJX_@a4L<(?&!KHi*E0MbEP-`Rh2x*!=wKO1z zjx2fWa1tpIMhju)wV^rmA%Ns}t&xd^f8rL2oa{n7ighNJg;_kHR3iAff#Ca)&eZ8Qn5 zsA^Nh)85z2c`EsBhn-vXw@sLz{IR>|(G#CJ{>~z|8u!?;+SN1Hv)7=@d{526zjSr6=7^E+MFmzt>%J?lp5|f(MH{W}%a?Ua?T<$&BxI`R2 zHk5N9>&l6)=X;fNf8kIgw zMcU^|qmna6lgAe9_R)-b$wKDY2#QFlNjzBg5TT6R%G~SEpXTkuP-fDNmo&ZoFW}8l A-2eap literal 0 HcmV?d00001 diff --git a/css-complete/sec3/index.html b/css-complete/sec3/index.html new file mode 100644 index 0000000..1897ea2 --- /dev/null +++ b/css-complete/sec3/index.html @@ -0,0 +1,26 @@ + + + + + + + uHost + + + + + + + +
      +
      +

      Get the freedom you deserve.

      +
      +
      +

      Choose Your Plan

      +

      Make sure you get the most for your money!

      +
      +
      + + + \ No newline at end of file diff --git a/css-complete/sec3/main.css b/css-complete/sec3/main.css new file mode 100644 index 0000000..70498ae --- /dev/null +++ b/css-complete/sec3/main.css @@ -0,0 +1,20 @@ +body { + font-family: 'Montserrat', sans-serif; +} + +#product-overview { + background: #ff1b68; +} + +.section-title { + color: #2ddf5c; +} + +#product-overview h1 { + color: white; + font-family: 'Anton', sans-serif; +} + +/* h1 { + font-family: sans-serif; +} */ \ No newline at end of file diff --git a/php/getting-started/favicon.ico b/php/getting-started/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..540b33ece6e82e8dd4d44c64f02b833d95bc53c1 GIT binary patch literal 15406 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 literal 0 HcmV?d00001 diff --git a/php/getting-started/form.php b/php/getting-started/form.php index 0a6621d..c5bed3e 100644 --- a/php/getting-started/form.php +++ b/php/getting-started/form.php @@ -45,6 +45,7 @@ if (isset($_POST['submit'])) { Document + diff --git a/react-complete-guide/react-complete-notes.md b/react-complete-guide/react-complete-notes.md index fd30f36..755abed 100644 --- a/react-complete-guide/react-complete-notes.md +++ b/react-complete-guide/react-complete-notes.md @@ -65,3 +65,11 @@ Note: JSX uses className in place of class Are how to pass data into a component +## Events and State + +### Events + +React adds its own event attribute to use in JSX elements + +Each event starts with "on" and pops in Intellisense +