-
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
9 changed files
with
651 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <link rel="icon" href="./favicon.png" /> | ||
| <title> Web Dev Book 📚</title> | ||
| <link rel="stylesheet" type="text/css" href="index.css"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="header"> | ||
| <div class="logo"> | ||
| <img src="./favicon.png" /> | ||
| </div> | ||
| <h1> | ||
| Web Dev Book 📚 | ||
| </h1> | ||
| <h3> Here is a list of websites and resources to begin your developer journey! </h3> | ||
| </div> | ||
| <div class="topnav"> | ||
| <a href="./index.html">Home 🏡</a> | ||
| <a href="./codeequip.html"> Code equipment 💼 </a> | ||
| <a href="./links.html">Links and resources 🔗</a> | ||
| <a href="./js.html">JavaScript Links.</a> | ||
| <a href="./html.html">HTML Links.</a> | ||
| <a href="./css.html">CSS Links.</a> | ||
| </div> | ||
|
|
||
|
|
||
| <div class="row"> | ||
| <div class="leftcolumn"> | ||
| <div class="card"> | ||
| <h2> | ||
| What can you do if you are a software engineer? 🤷♀️🤷 | ||
| </h2> | ||
| <h3> | ||
| See the list below: | ||
| </h3> | ||
| <img src="./images/mindmap.jpg" width="950" height="480" /> | ||
| </h3> | ||
| <p> | ||
| <ul> | ||
| <li> Create websites! 🌐</li> | ||
| <li> Create life changing apps! 📱</li> | ||
| <li> Learn multiple languages! 👩💻👨💻</li> | ||
| <li> Create your own games! 🎮🕹️</li> | ||
| <li>Learn a new life skill...</li> | ||
| </ul> | ||
| </p> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <h2> | ||
| What mindset an aspiring software engineer needs to be equipped with 🧠: | ||
| </h2> | ||
| <h3> | ||
| <i>It's not just code you need to get your head around 💫 ...</i> | ||
| </h3> | ||
| <img src="./images/software-engineer-skills.png" style="height:500px;" /> | ||
| <p> | ||
| <ul> | ||
| <li> You need the endurance to complete a task. ✔️</li> | ||
| <li> You need the time to complete a code task. ⌚ </li> | ||
| <li> You need to be able to work well with others. 👊</li> | ||
| <li> You need to be able to set reasonable targets. 🎯</li> | ||
| <li> You should have a love and passion for the modern world of technology! ⚙️</li> | ||
| <li> Be confident with mathematics! ➗➖</li> | ||
| </ul> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="rightcolumn"> | ||
| <div class="card"> | ||
| <h2> | ||
| Our personal Favourite resource... 🤩 | ||
| </h2> | ||
| <img src="./images/w3.jpg" style="height: 200px; width: 275px;" /> | ||
| <h3>With all the code examples, and docs, see here:</h3> | ||
| <a href="https://www.w3schools.com/" class="button">W3 Schools</a> | ||
| </div> | ||
| <div class="card"> | ||
| <h3> | ||
| See the official documentation: | ||
| </h3> | ||
| <p>Want to see the latest releases in documentation? Click the image below for mozilla web docs!</p> | ||
| <a href="https://developer.mozilla.org/en-US/"><img src="./images/mozilla.jpg" /></a> | ||
| <h3> | ||
| See frequently asked code questions... | ||
| </h3> | ||
| <p>Stackoverflow, the home of code questions!</p> | ||
| <a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png" /></a> | ||
| <h3>Welcome to your coding journey! 🎒</h3> | ||
| <p>Enjoy learning to code!</p> | ||
|
|
||
| <img src="./images/enjoy.png" /> | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="footer"> | ||
| <img src="./favicon.png" style="height: 100px; width: 100px; float: left;" /> | ||
| <h2> | ||
| Web Dev Book! | ||
| </h2> | ||
| </div> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } | ||
| } |
Oops, something went wrong.