asabeneh
4 years ago
parent
51142d953e
commit
df44b57228
@ -0,0 +1,7 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30 Days Of HTML</title>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>30 Days Of HTML</title>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span style="color: #e34c26">H</span>
|
||||
<span style="color: #264de4">T</span>
|
||||
<span style="color: #f0db4f">M</span>
|
||||
<span style="color: #61dbfb">L</span>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h1 id="first-title">The Building Blocks of the web</h1>
|
||||
<p>
|
||||
There is not website without HTML. Learn HTML and build websites and
|
||||
web applications
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<small>Copyright 2021 | Asabeneh Yetayeh</small>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,67 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<!-- character encoding for the HTML document -->
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<!-- the following meta tags for Search engine optimization(SEO)-->
|
||||
<meta name="description" content="30 Days of HTML Challenge" />
|
||||
<meta name="keywords" content="HTML, CSS, Web Development" />
|
||||
<meta name="author" content="Asabeneh Yetayeh" />
|
||||
<!-- base url https://www.30daysofreact.com -->
|
||||
<base href=" https://www.30daysofreact.com" target="_blank" />
|
||||
<!-- Goes to the task bar on the browser-->
|
||||
<title>30 Days Of HTML</title>
|
||||
<!-- to lik external css -->
|
||||
|
||||
<link rel="stylesheet" href="" />
|
||||
<!-- inline styling is very tideous, we can also use internal style
|
||||
we can use tag name, id or class to select an element. Id is unique and class is for a single or group of elements
|
||||
|
||||
When we select by id we use # followed by the id name and if we select by class name we use . followed by a class name.
|
||||
|
||||
-->
|
||||
<style>
|
||||
.letter {
|
||||
font-size: 68px;
|
||||
}
|
||||
#letter-h {
|
||||
color: #e34c26;
|
||||
}
|
||||
#letter-t {
|
||||
color: #264de4;
|
||||
}
|
||||
#letter-m {
|
||||
color: #f0db4f;
|
||||
}
|
||||
#letter-l {
|
||||
color: #61dbfb;
|
||||
}
|
||||
</style>
|
||||
<!-- The script tag allows to write JS code -->
|
||||
<script>
|
||||
console.log('Welcome to 30 Days of JavaScript')
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<span class="letter" id="letter-h">H</span>
|
||||
<span class="letter" id="letter-t">T</span>
|
||||
<span class="letter" id="letter-m">M</span>
|
||||
<span class="letter" id="letter-l">L</span>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h1 id="first-title">The Building Blocks of the web</h1>
|
||||
<p>
|
||||
There is not website without HTML. Learn HTML and build websites and
|
||||
web applications
|
||||
</p>
|
||||
<a href="/course/30-days-of-htm.html">30 Days Of HTML</a>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<small>Copyright 2021 | Asabeneh Yetayeh</small>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,114 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>30 Days Of HTML: Table</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 class="section-title">Application Form</h1>
|
||||
<article class="form-article">
|
||||
<form class="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="firstname">First Name</label>
|
||||
<input type="text" id="firstname" placeholder="Your name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="lastname">Last Name</label>
|
||||
<input id="lastname" type="text" placeholder="Your last name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" placeholder="Your email" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="company">company</label>
|
||||
<input id="company" type="text" placeholder="Your company name" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="age">You age: </label>
|
||||
<input type = "number" id="age" name="age' placeholder="Age" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="date">Date of Birth</label>
|
||||
<input id="date" type="datetime-local" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p>What are your skills</p>
|
||||
<input type="checkbox" id="html" />
|
||||
<label for="html">HTML</label>
|
||||
<br />
|
||||
<input type="checkbox" id="css" />
|
||||
<label for="css">CSS</label>
|
||||
<br />
|
||||
<input type="checkbox" id="js" />
|
||||
<label for="js">JavaScript</label>
|
||||
<br />
|
||||
<input type="checkbox" id="react" />
|
||||
<label for="js">React</label>
|
||||
<br />
|
||||
<input type="checkbox" id="redux" />
|
||||
<label for="redux">Redux</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="color">Your favorite</label>
|
||||
<input id="color" type="color" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<p>Gender</p>
|
||||
<input type="radio" id="female" name="gender" />
|
||||
<label for="female">Female</label>
|
||||
<br />
|
||||
<input type="radio" id="male" name="gender" />
|
||||
<label for="male">Male</label>
|
||||
<br />
|
||||
<input type="radio" id="other" name="gender" />
|
||||
<label for="other">Other</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<p>Select your country</p>
|
||||
<select name="country" id="country">
|
||||
<option value="">-Country-</option>
|
||||
<option value="Finland">Finland</option>
|
||||
<option value="Estonia">Estonia</option>
|
||||
<option value="Sweden">Sweden</option>
|
||||
<option value="Norway">Norway</option>
|
||||
<option value="Denmark">Denmark</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<p>Select your country</p>
|
||||
<select name="course" id="course">
|
||||
<option value="">-Select Course-</option>
|
||||
<option value="html-css">Basis of HTML and CSS</option>
|
||||
<option value="js">Modern JavaScript</option>
|
||||
<option value="pyhton">Python</option>
|
||||
<option value="react">React</option>
|
||||
<option value="data-analysis">Data Analysis with Python</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">Leave your message here</label> <br />
|
||||
<textarea
|
||||
cols="120"
|
||||
rows="10"
|
||||
id="message"
|
||||
placeholder="Write your message here..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="file" id="file-input" />
|
||||
<label for="file-input"><i class="fas fa-upload"></i>Upload File</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="checkbox" id="agree" />
|
||||
<label for="agree"
|
||||
>Be sure that all the information is yours and true.</label
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<input type="submit" value="Submit" />
|
||||
</div>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,77 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>30 Days Of HTML: Table</title>
|
||||
<style>
|
||||
/* Table CSS */
|
||||
table,
|
||||
td,
|
||||
th {
|
||||
border: 2px solid gray;
|
||||
border-collapse: collapse;
|
||||
border: 1px solid #a785df;
|
||||
}
|
||||
table {
|
||||
margin-top: 15px;
|
||||
width: 75%;
|
||||
}
|
||||
td {
|
||||
padding-left: 10px;
|
||||
}
|
||||
th {
|
||||
background-color: #7433df;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Challenge</th>
|
||||
<th>Days</th>
|
||||
<th>Time</th>
|
||||
<th>Stars(K)</th>
|
||||
<th>URL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>30 Days of Python</td>
|
||||
<td>30</td>
|
||||
<td>November 2019</td>
|
||||
<td>4.6K</td>
|
||||
<td>
|
||||
<a href="https://github.com/Asabeneh/30-Days-Of-Python">Link</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30 Days of JavaScript</td>
|
||||
<td>30</td>
|
||||
<td>January 2020</td>
|
||||
<td>6.8K</td>
|
||||
<td>
|
||||
<a href="https://github.com/Asabeneh/30-Days-Of-JavaScript">Link</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30 Days of React</td>
|
||||
<td>30</td>
|
||||
<td>October 2020</td>
|
||||
<td>5.6K</td>
|
||||
<td>
|
||||
<a href="https://github.com/Asabeneh/30-Days-Of-React">Link</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>30 Days of HTML</td>
|
||||
<td>30</td>
|
||||
<td>February 2011</td>
|
||||
<td>33</td>
|
||||
<td>
|
||||
<a href="https://github.com/Asabeneh/30-Days-Of-HTML">Link</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,44 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>30 Days Of HTML: Table</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Learn the following technologies according to their order:</p>
|
||||
<ol>
|
||||
<li>HTML</li>
|
||||
<li>CSS</li>
|
||||
<li>JavaScript</li>
|
||||
<li>React</li>
|
||||
<li>Redux</li>
|
||||
<li>Node</li>
|
||||
<li>MongoDB</li>
|
||||
<li>GatsBy</li>
|
||||
</ol>
|
||||
<p>List of Scandinavian Countries</p>
|
||||
<ul>
|
||||
<li>Finland</li>
|
||||
<li>Sweden</li>
|
||||
<li>Norway</li>
|
||||
<li>Denmark</li>
|
||||
<li>Iceland</li>
|
||||
</ul>
|
||||
<p>Core frontend technologies</p>
|
||||
<dl>
|
||||
<dt>HTML</dt>
|
||||
<dd>HTML(HyperText Markup Language) is the build block the web.</dd>
|
||||
<dt>CSS</dt>
|
||||
<dd>CSS(Cascading Style Sheet) that make HTML page look beautiful.</dd>
|
||||
<dd></dd>
|
||||
<dt>JavaScript</dt>
|
||||
<dd>
|
||||
JavaScript is a programming language that can add interactivity to
|
||||
websites
|
||||
</dd>
|
||||
<dt>React</dt>
|
||||
<dd>
|
||||
React is a modern JavaScript library that was initial released on May
|
||||
29, 2013.
|
||||
</dd>
|
||||
</dl>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue