From ac42b13788474e33114c8f618bcd0aafba4c9b7b Mon Sep 17 00:00:00 2001 From: CodingSpecies Date: Fri, 21 Jan 2022 21:04:32 +0000 Subject: [PATCH] changes --- codeeequip.css | 2 +- codeequip.html | 10 ++--- css.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++ css.html | 109 +++++++++++++++++++++++++++++++++++++++++++++++++ html.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++ html.html | 109 +++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 10 ++--- js.css | 105 +++++++++++++++++++++++++++++++++++++++++++++++ js.html | 109 +++++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 651 insertions(+), 13 deletions(-) create mode 100644 css.css create mode 100644 css.html create mode 100644 html.css create mode 100644 html.html create mode 100644 js.css create mode 100644 js.html diff --git a/codeeequip.css b/codeeequip.css index f45bced..74bce9a 100644 --- a/codeeequip.css +++ b/codeeequip.css @@ -7,7 +7,7 @@ body{ font-family: Arial, Helvetica, sans-serif; padding: 10px; - background-image: linear-gradient(rgb(16, 78, 78), rgb(121, 121, 5)); + background-image: linear-gradient(rgb(231, 133, 5), rgb(61, 155, 37)); } .header{ diff --git a/codeequip.html b/codeequip.html index 0928727..7fa9b70 100644 --- a/codeequip.html +++ b/codeequip.html @@ -4,7 +4,7 @@ Web Dev Book 📚 - + @@ -22,11 +22,9 @@

Here is a list of websites and resources to begin your developer journey! < Home 🏡 Code equipment đŸ’ŧ Links and resources 🔗 - Quick start to basic code! - GitHub - Intro to JavaScript! - Intro to HTML! - Intro to CSS! + JavaScript Links. + HTML Links. + CSS Links. diff --git a/css.css b/css.css new file mode 100644 index 0000000..74bce9a --- /dev/null +++ b/css.css @@ -0,0 +1,105 @@ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); + +*{ + box-sizing: border-box; +} + +body{ + font-family: Arial, Helvetica, sans-serif; + padding: 10px; + background-image: linear-gradient(rgb(231, 133, 5), rgb(61, 155, 37)); +} + +.header{ + padding: 30px; + background-image: linear-gradient(rgb(8, 196, 196), yellow); + text-align: center; + font-family: 'Bebas Neue', cursive; + border-top-left-radius: 25px; + border-top-right-radius: 25px; +} + +.header h1{ + font-size: 50px; +} + +.topnav{ + overflow: hidden; + background-color: #333; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; +} + +.topnav a{ + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.topnav a:hover{ + background-color: #ddd; + color: black; +} + + +.logo img{ + width: 130px; + height:130px; + float: left; + } + +.leftcolumn{ + float:left; + width: 75%; + border-radius: 25px; +} + +.rightcolumn{ + float: left; + width:25%; + padding-left: 20px; + border-radius: 25px; +} + +img{ + width: 100%; + padding: 20px; +} + +.card{ + background-color: white; + padding: 20px; + margin-top: 20px; + border-radius: 25px; +} + +.row:after{ + content: ""; + display: table; + clear: both; +} + +.footer{ + padding: 20px; + text-align: center; + background-color: #ddd; + margin-top: 20px; + border-radius: 25px; +} + +@media screen and (max-width: 800px){ + .leftcolumn, .rightcolumn{ + width: 100%; + padding: 0; + } +} + +@media screen and (max-width: 400px){ + .topnav a{ + float: none; + width: 100%; + } +} diff --git a/css.html b/css.html new file mode 100644 index 0000000..00d1274 --- /dev/null +++ b/css.html @@ -0,0 +1,109 @@ + + + + + + Web Dev Book 📚 + + + + + +
+ +

+ Web Dev Book 📚 +

+

Here is a list of websites and resources to begin your developer journey!

+
+
+ Home 🏡 + Code equipment đŸ’ŧ + Links and resources 🔗 + JavaScript Links. + HTML Links. + CSS Links. +
+ + +
+
+
+

+ What can you do if you are a software engineer? 🤷‍♀ī¸đŸ¤ˇ +

+

+ See the list below: +

+ +

+

+

+

+ + +
+

+ What mindset an aspiring software engineer needs to be equipped with 🧠: +

+

+ It's not just code you need to get your head around đŸ’Ģ ... +

+ +

+

+

+
+ +
+
+

+ Our personal Favourite resource... 🤩 +

+ +

With all the code examples, and docs, see here:

+ W3 Schools +
+
+

+ See the official documentation: +

+

Want to see the latest releases in documentation? Click the image below for mozilla web docs!

+ +

+ See frequently asked code questions... +

+

Stackoverflow, the home of code questions!

+ +

Welcome to your coding journey! 🎒

+

Enjoy learning to code!

+ + + +
+
+ +
+ +

+ Web Dev Book! +

+
+ + + \ No newline at end of file diff --git a/html.css b/html.css new file mode 100644 index 0000000..74bce9a --- /dev/null +++ b/html.css @@ -0,0 +1,105 @@ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); + +*{ + box-sizing: border-box; +} + +body{ + font-family: Arial, Helvetica, sans-serif; + padding: 10px; + background-image: linear-gradient(rgb(231, 133, 5), rgb(61, 155, 37)); +} + +.header{ + padding: 30px; + background-image: linear-gradient(rgb(8, 196, 196), yellow); + text-align: center; + font-family: 'Bebas Neue', cursive; + border-top-left-radius: 25px; + border-top-right-radius: 25px; +} + +.header h1{ + font-size: 50px; +} + +.topnav{ + overflow: hidden; + background-color: #333; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; +} + +.topnav a{ + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.topnav a:hover{ + background-color: #ddd; + color: black; +} + + +.logo img{ + width: 130px; + height:130px; + float: left; + } + +.leftcolumn{ + float:left; + width: 75%; + border-radius: 25px; +} + +.rightcolumn{ + float: left; + width:25%; + padding-left: 20px; + border-radius: 25px; +} + +img{ + width: 100%; + padding: 20px; +} + +.card{ + background-color: white; + padding: 20px; + margin-top: 20px; + border-radius: 25px; +} + +.row:after{ + content: ""; + display: table; + clear: both; +} + +.footer{ + padding: 20px; + text-align: center; + background-color: #ddd; + margin-top: 20px; + border-radius: 25px; +} + +@media screen and (max-width: 800px){ + .leftcolumn, .rightcolumn{ + width: 100%; + padding: 0; + } +} + +@media screen and (max-width: 400px){ + .topnav a{ + float: none; + width: 100%; + } +} diff --git a/html.html b/html.html new file mode 100644 index 0000000..00d1274 --- /dev/null +++ b/html.html @@ -0,0 +1,109 @@ + + + + + + Web Dev Book 📚 + + + + + +
+ +

+ Web Dev Book 📚 +

+

Here is a list of websites and resources to begin your developer journey!

+
+
+ Home 🏡 + Code equipment đŸ’ŧ + Links and resources 🔗 + JavaScript Links. + HTML Links. + CSS Links. +
+ + +
+
+
+

+ What can you do if you are a software engineer? 🤷‍♀ī¸đŸ¤ˇ +

+

+ See the list below: +

+ + +

+

    +
  • Create websites! 🌐
    • +
  • Create life changing apps! 📱
    • +
  • Learn multiple languages! 👩‍đŸ’ģ👨‍đŸ’ģ
    • +
  • Create your own games! 🎮🕹ī¸
    • +
  • Learn a new life skill...
    • +
+

+
+ +
+

+ What mindset an aspiring software engineer needs to be equipped with 🧠: +

+

+ It's not just code you need to get your head around đŸ’Ģ ... +

+ +

+

    +
  • You need the endurance to complete a task. ✔ī¸
    • +
  • You need the time to complete a code task. ⌚
    • +
  • You need to be able to work well with others. 👊
    • +
  • You need to be able to set reasonable targets. đŸŽ¯
    • +
  • You should have a love and passion for the modern world of technology! ⚙ī¸
    • +
  • Be confident with mathematics! ➗➖
    • +
+

+
+
+
+
+

+ Our personal Favourite resource... 🤩 +

+ +

With all the code examples, and docs, see here:

+ W3 Schools +
+
+

+ See the official documentation: +

+

Want to see the latest releases in documentation? Click the image below for mozilla web docs!

+ +

+ See frequently asked code questions... +

+

Stackoverflow, the home of code questions!

+ +

Welcome to your coding journey! 🎒

+

Enjoy learning to code!

+ + + +
+
+
+
+ +

+ Web Dev Book! +

+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index fc52d03..d9d54c9 100644 --- a/index.html +++ b/index.html @@ -20,13 +20,11 @@

Here is a list of websites and resources to begin your developer journey! <
Home 🏡 - Code equipment đŸ’ŧ + Code equipment đŸ’ŧ Links and resources 🔗 - Quick start to basic code! - GitHub - Intro to JavaScript! - Intro to HTML! - Intro to CSS! + JavaScript Links. + HTML Links. + CSS Links.
diff --git a/js.css b/js.css new file mode 100644 index 0000000..74bce9a --- /dev/null +++ b/js.css @@ -0,0 +1,105 @@ +@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); + +*{ + box-sizing: border-box; +} + +body{ + font-family: Arial, Helvetica, sans-serif; + padding: 10px; + background-image: linear-gradient(rgb(231, 133, 5), rgb(61, 155, 37)); +} + +.header{ + padding: 30px; + background-image: linear-gradient(rgb(8, 196, 196), yellow); + text-align: center; + font-family: 'Bebas Neue', cursive; + border-top-left-radius: 25px; + border-top-right-radius: 25px; +} + +.header h1{ + font-size: 50px; +} + +.topnav{ + overflow: hidden; + background-color: #333; + border-bottom-left-radius: 25px; + border-bottom-right-radius: 25px; +} + +.topnav a{ + float: left; + display: block; + color: #f2f2f2; + text-align: center; + padding: 14px 16px; + text-decoration: none; +} + +.topnav a:hover{ + background-color: #ddd; + color: black; +} + + +.logo img{ + width: 130px; + height:130px; + float: left; + } + +.leftcolumn{ + float:left; + width: 75%; + border-radius: 25px; +} + +.rightcolumn{ + float: left; + width:25%; + padding-left: 20px; + border-radius: 25px; +} + +img{ + width: 100%; + padding: 20px; +} + +.card{ + background-color: white; + padding: 20px; + margin-top: 20px; + border-radius: 25px; +} + +.row:after{ + content: ""; + display: table; + clear: both; +} + +.footer{ + padding: 20px; + text-align: center; + background-color: #ddd; + margin-top: 20px; + border-radius: 25px; +} + +@media screen and (max-width: 800px){ + .leftcolumn, .rightcolumn{ + width: 100%; + padding: 0; + } +} + +@media screen and (max-width: 400px){ + .topnav a{ + float: none; + width: 100%; + } +} diff --git a/js.html b/js.html new file mode 100644 index 0000000..96c28be --- /dev/null +++ b/js.html @@ -0,0 +1,109 @@ + + + + + + Web Dev Book 📚 + + + + + +
+ +

+ Web Dev Book 📚 +

+

JavaScript resources!

+
+
+ Home 🏡 + Code equipment đŸ’ŧ + Links and resources 🔗 + JavaScript Links. + HTML Links. + CSS Links. +
+ + +
+
+
+

+ What can you do if you are a software engineer? 🤷‍♀ī¸đŸ¤ˇ +

+

+ See the list below: +

+ +

+

+

+

+ + +
+

+ What mindset an aspiring software engineer needs to be equipped with 🧠: +

+

+ It's not just code you need to get your head around đŸ’Ģ ... +

+ +

+

+

+
+ +
+
+

+ Our personal Favourite resource... 🤩 +

+ +

With all the code examples, and docs, see here:

+ W3 Schools +
+
+

+ See the official documentation: +

+

Want to see the latest releases in documentation? Click the image below for mozilla web docs!

+ +

+ See frequently asked code questions... +

+

Stackoverflow, the home of code questions!

+ +

Welcome to your coding journey! 🎒

+

Enjoy learning to code!

+ + + +
+
+ +
+ +

+ Web Dev Book! +

+
+ + + \ No newline at end of file