Skip to content

Commit 6d251be

Browse files
NS007-devNS007-dev
committed
add
1 parent 0e56d7a commit 6d251be

File tree

8 files changed

+364
-76
lines changed

8 files changed

+364
-76
lines changed

‎codeeequip.css‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
2+
3+
*{
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
font-family: Arial, Helvetica, sans-serif;
9+
padding: 10px;
10+
background-image: linear-gradient(rgb(16, 78, 78), rgb(121, 121, 5));
11+
}
12+
13+
.header{
14+
padding: 30px;
15+
background-image: linear-gradient(rgb(8, 196, 196), yellow);
16+
text-align: center;
17+
font-family: 'Bebas Neue', cursive;
18+
border-top-left-radius: 25px;
19+
border-top-right-radius: 25px;
20+
}
21+
22+
.header h1{
23+
font-size: 50px;
24+
}
25+
26+
.topnav{
27+
overflow: hidden;
28+
background-color: #333;
29+
border-bottom-left-radius: 25px;
30+
border-bottom-right-radius: 25px;
31+
}
32+
33+
.topnav a{
34+
float: left;
35+
display: block;
36+
color: #f2f2f2;
37+
text-align: center;
38+
padding: 14px 16px;
39+
text-decoration: none;
40+
}
41+
42+
.topnav a:hover{
43+
background-color: #ddd;
44+
color: black;
45+
}
46+
47+
48+
.logo img{
49+
width: 130px;
50+
height:130px;
51+
float: left;
52+
}
53+
54+
.leftcolumn{
55+
float:left;
56+
width: 75%;
57+
border-radius: 25px;
58+
}
59+
60+
.rightcolumn{
61+
float: left;
62+
width:25%;
63+
padding-left: 20px;
64+
border-radius: 25px;
65+
}
66+
67+
img{
68+
width: 100%;
69+
padding: 20px;
70+
}
71+
72+
.card{
73+
background-color: white;
74+
padding: 20px;
75+
margin-top: 20px;
76+
border-radius: 25px;
77+
}
78+
79+
.row:after{
80+
content: "";
81+
display: table;
82+
clear: both;
83+
}
84+
85+
.footer{
86+
padding: 20px;
87+
text-align: center;
88+
background-color: #ddd;
89+
margin-top: 20px;
90+
border-radius: 25px;
91+
}
92+
93+
@media screen and (max-width: 800px){
94+
.leftcolumn, .rightcolumn{
95+
width: 100%;
96+
padding: 0;
97+
}
98+
}
99+
100+
@media screen and (max-width: 400px){
101+
.topnav a{
102+
float: none;
103+
width: 100%;
104+
}
105+
}

‎codeequip.html‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<link rel="icon" href="./favicon.png" />
6+
<title> Web Dev Book 📚</title>
7+
<link rel="stylesheet" type="text/css" href="index.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
</head>
10+
11+
<body>
12+
<div class="header">
13+
<div class="logo">
14+
<img src="./favicon.png" />
15+
</div>
16+
<h1>
17+
Web Dev Book 📚
18+
</h1>
19+
<h3> Here is a list of websites and resources to begin your developer journey! </h3>
20+
</div>
21+
<div class="topnav">
22+
<a href="./index.html">Home 🏡</a>
23+
<a href="./codeequip.html"> Code equipment 💼 </a>
24+
<a href="./links.html">Links and resources 🔗</a>
25+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Quick start to basic code!</a>
26+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">GitHub</a>
27+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to JavaScript!</a>
28+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to HTML!</a>
29+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to CSS!</a>
30+
</div>
31+
32+
33+
<div class="row">
34+
<div class="leftcolumn">
35+
<div class="card">
36+
<h2>
37+
To begin code, you need to have somewhere to play and write...
38+
</h2>
39+
<h3>
40+
The code canvas!
41+
</h3>
42+
<img src="./images/vscode.png" width="950" height="480" />
43+
</h3>
44+
<p>
45+
<b> 🤔 What is VScode? 🤔</b>
46+
</p>
47+
<p>
48+
VScode, made by the <i>Microsoft Cooperation, </i> is a code editor, where developers build and write their desired code, in all the different code languages!
49+
</p>
50+
<h3>
51+
See below for a walk through on how to set up you own VScode.
52+
</h3>
53+
</div>
54+
55+
<div class="card">
56+
<h2>
57+
Download VScode 🔽:
58+
</h2>
59+
<h3>
60+
<i>Click the button below to go to the official VScode website, to download!</i>
61+
</h3>
62+
<a href="https://code.visualstudio.com/download">Download the official VScode!</a>
63+
<p>
64+
Choose the correct computer software, whether you are a linux/ apple/ windows user, then download.
65+
</p>
66+
67+
</div>
68+
69+
<div class="card">
70+
<h2>
71+
The process:
72+
</h2>
73+
<h3>
74+
<i> The downloading and what to do after:</i>
75+
</h3>
76+
<a href="https://code.visualstudio.com/docs/setup/windows">See the official VScode after download details.</a>
77+
78+
</div>
79+
80+
<div class="card">
81+
<h2> Extra VScode resources:</h2>
82+
<table>
83+
<tr>
84+
<th>Resource 📚: </th>
85+
<th>Description 🖊️</th>
86+
</tr>
87+
<tr>
88+
<td> 🎯 <a href="https://code.visualstudio.com/docs/introvideos/basics"> VScode videos and shortcuts.</a></td>
89+
<td> See the videos on how to use VScode, see keyboard shortcuts.</td>
90+
</tr>
91+
<tr>
92+
<td> 🎯 <a href="https://adamtheautomator.com/visual-studio-code-tutorial/">All you need about VScode</a></td>
93+
<td> Here is an article about all things VScode. From the command pallette to the settings.</td>
94+
</tr>
95+
<tr>
96+
<td> 🎯 <a href="https://github.com/microsoft/vscode">VScode GitHub repository.</a></td>
97+
<td> The code of VScode, where others ask questions, and contribute to their codes.</td>
98+
</tr>
99+
100+
</table>
101+
102+
</div>
103+
</div>
104+
<div class="rightcolumn">
105+
<div class="card">
106+
<h2>
107+
Our personal Favourite resource... 🤩
108+
</h2>
109+
<img src="./images/w3.jpg" style="height: 200px; width: 275px;" />
110+
<h3>With all the code examples, and docs, see here:</h3>
111+
<a href="https://www.w3schools.com/" class="button">W3 Schools</a>
112+
</div>
113+
<div class="card">
114+
<h3>
115+
See the official documentation:
116+
</h3>
117+
<p>Want to see the latest releases in documentation? Click the image below for mozilla web docs!</p>
118+
<a href="https://developer.mozilla.org/en-US/"><img src="./images/mozilla.jpg" /></a>
119+
<h3>
120+
See frequently asked code questions...
121+
</h3>
122+
<p>Stackoverflow, the home of code questions!</p>
123+
<a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png" /></a>
124+
<h3>Welcome to your coding journey! 🎒</h3>
125+
<p>Enjoy learning to code!</p>
126+
127+
<img src="./images/enjoy.png" />
128+
129+
</div>
130+
</div>
131+
</div>
132+
<div class="footer">
133+
<img src="./favicon.png" style="height: 100px; width: 100px; float: left;" />
134+
<h2>
135+
Web Dev Book!
136+
</h2>
137+
</div>
138+
</body>
139+
140+
</html>
141+
142+
</html>

‎images/GitHub-logo.png‎

22.7 KB
Loading

‎images/codepen.webp‎

4.15 KB
Loading

‎images/vscode.png‎

126 KB
Loading

‎images/vscode1.png‎

16.3 KB
Loading

‎index.html‎

Lines changed: 36 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,74 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<link rel="icon" href="./favicon.png" />
56
<title> Web Dev Book 📚</title>
6-
<link rel="stylesheet" type = "text/css" href="index.css">
7+
<link rel="stylesheet" type="text/css" href="index.css">
78
<meta name="viewport" content="width=device-width, initial-scale=1">
89
</head>
10+
911
<body>
1012
<div class="header">
1113
<div class="logo">
12-
<img src="./favicon.png"/>
14+
<img src="./favicon.png" />
1315
</div>
1416
<h1>
1517
Web Dev Book 📚
1618
</h1>
17-
<h3> Here is a list of websites and resources to begin your developer journey! </h3>
19+
<h3> Here is a list of websites and resources to begin your developer journey! </h3>
1820
</div>
1921
<div class="topnav">
2022
<a href="./index.html">Home 🏡</a>
2123
<a href="https://noorinsakhi.github.io/duties.html"> Code equipment 💼 </a>
2224
<a href="./links.html">Links and resources 🔗</a>
23-
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Quick start to basic code!</a>
25+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Quick start to basic code!</a>
26+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">GitHub</a>
27+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to JavaScript!</a>
28+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to HTML!</a>
29+
<a href="https://noorinsakhi.github.io/itsupportslideshow.html">Intro to CSS!</a>
2430
</div>
2531

26-
32+
2733
<div class="row">
2834
<div class="leftcolumn">
2935
<div class="card">
3036
<h2>
3137
What can you do if you are a software engineer? 🤷‍♀️🤷
3238
</h2>
3339
<h3>
34-
See the list below:
40+
See the list below:
3541
</h3>
3642
<img src="./images/mindmap.jpg" width="950" height="480" />
3743
</h3>
3844
<p>
39-
<ul>
40-
<li> Create websites! 🌐</li>
41-
<li> Create life changing apps! 📱</li>
42-
<li> Learn multiple languages! 👩‍💻👨‍💻</li>
43-
<li> Create your own games! 🎮🕹️</li>
44-
<li>Learn a new life skill...</li>
45-
</ul>
45+
<ul>
46+
<li> Create websites! 🌐</li>
47+
<li> Create life changing apps! 📱</li>
48+
<li> Learn multiple languages! 👩‍💻👨‍💻</li>
49+
<li> Create your own games! 🎮🕹️</li>
50+
<li>Learn a new life skill...</li>
51+
</ul>
4652
</p>
4753
</div>
4854

4955
<div class="card">
5056
<h2>
51-
What mindset an aspiring software engineer needs to be equipped with 🧠:
57+
What mindset an aspiring software engineer needs to be equipped with 🧠:
5258
</h2>
5359
<h3>
5460
<i>It's not just code you need to get your head around 💫 ...</i>
5561
</h3>
56-
<img src="./images/software-engineer-skills.png" style="height:500px;"/>
62+
<img src="./images/software-engineer-skills.png" style="height:500px;" />
5763
<p>
58-
<ul>
59-
<li> You need the endurance to complete a task. ✔️</li>
60-
<li> You need the time to complete a code task. ⌚ </li>
61-
<li> You need to be able to work well with others. 👊</li>
62-
<li> You need to be able to set reasonable targets. 🎯</li>
63-
<li> You should have a love and passion for the modern world of technology! ⚙️</li>
64-
<li> Be confident with mathematics! ➗➖</li>
65-
</ul>
64+
<ul>
65+
<li> You need the endurance to complete a task. ✔️</li>
66+
<li> You need the time to complete a code task. ⌚ </li>
67+
<li> You need to be able to work well with others. 👊</li>
68+
<li> You need to be able to set reasonable targets. 🎯</li>
69+
<li> You should have a love and passion for the modern world of technology! ⚙️</li>
70+
<li> Be confident with mathematics! ➗➖</li>
71+
</ul>
6672
</p>
6773
</div>
6874
</div>
@@ -71,36 +77,37 @@ <h3>
7177
<h2>
7278
Our personal Favourite resource... 🤩
7379
</h2>
74-
<img src="./images/w3.jpg" style="height: 200px; width: 275px;"/>
80+
<img src="./images/w3.jpg" style="height: 200px; width: 275px;" />
7581
<h3>With all the code examples, and docs, see here:</h3>
7682
<a href="https://www.w3schools.com/" class="button">W3 Schools</a>
7783
</div>
7884
<div class="card">
7985
<h3>
80-
See the official documentation:
86+
See the official documentation:
8187
</h3>
8288
<p>Want to see the latest releases in documentation? Click the image below for mozilla web docs!</p>
83-
<a href="https://developer.mozilla.org/en-US/"><img src ="./images/mozilla.jpg"/></a>
89+
<a href="https://developer.mozilla.org/en-US/"><img src="./images/mozilla.jpg" /></a>
8490
<h3>
8591
See frequently asked code questions...
8692
</h3>
8793
<p>Stackoverflow, the home of code questions!</p>
88-
<a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png"/></a>
94+
<a href="https://stackoverflow.com/"><img src="./images/stackoverflow.png" /></a>
8995
<h3>Welcome to your coding journey! 🎒</h3>
9096
<p>Enjoy learning to code!</p>
9197

92-
<img src="./images/enjoy.png"/>
98+
<img src="./images/enjoy.png" />
9399

94100
</div>
95101
</div>
96102
</div>
97103
<div class="footer">
98-
<img src="./favicon.png" style="height: 100px; width: 100px; float: left;"/>
104+
<img src="./favicon.png" style="height: 100px; width: 100px; float: left;" />
99105
<h2>
100106
Web Dev Book!
101107
</h2>
102108
</div>
103109
</body>
110+
104111
</html>
105112

106113
</html>

0 commit comments

Comments
 (0)