lesson 7
This commit is contained in:
69
nodeJS/Learning/05/public/html/index.html
Normal file
69
nodeJS/Learning/05/public/html/index.html
Normal file
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Tiffy's to-do list website</title>
|
||||
|
||||
<meta name="description" content="Tiffy's todo list website" />
|
||||
<meta name="keywords" content="list, todo" />
|
||||
<meta name="author" content="Tiffany" />
|
||||
|
||||
<link rel="icon" href="images/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="css/main.css" />
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
||||
integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer"
|
||||
/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section>
|
||||
<div class="container">
|
||||
<h1 class="title-text">Tiffy's to-do list website</h1>
|
||||
|
||||
<img src="images/image.jpg" alt="Image not found" />
|
||||
|
||||
<p><i>Add something cute to my to-do list!</i></p>
|
||||
<form action="/form-action" method="post">
|
||||
<label for="to-do"></label>
|
||||
<input
|
||||
name="todo"
|
||||
type="text"
|
||||
placeholder="Enter a to-do"
|
||||
required
|
||||
class="todo-input"
|
||||
/>
|
||||
<button type="submit" class="form-submit">Add</button>
|
||||
</form>
|
||||
|
||||
<!-- List -->
|
||||
<!-- ordered list -->
|
||||
|
||||
<div class="todo-container">
|
||||
<div class="inner-todo">
|
||||
<h1>To do list</h1>
|
||||
<ol>
|
||||
<!-- <li>Learn from Ronald</li>
|
||||
<li>Watch movies</li>
|
||||
<li>Sleep</li> -->
|
||||
</ol>
|
||||
<div class="decor">
|
||||
<img src="images/cryinggirl.gif" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- unordered list -->
|
||||
<!-- <ul></ul> -->
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
||||
<script src="js/todo.js"></script>
|
||||
</html>
|
||||
79
nodeJS/Learning/05/public/html/lesson.html
Normal file
79
nodeJS/Learning/05/public/html/lesson.html
Normal file
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<!-- document type is html, templating language -->
|
||||
<html lang="en">
|
||||
<!-- english -->
|
||||
<!-- Header section, things that dont show in the webpage, e.g. meta-data: wt language ur website is using, website designed for mobile or actual computers, SEO, title, accessibility issues write it here too-->
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- Title: the top part of the webpage thingy -->
|
||||
<title>Document</title>
|
||||
|
||||
<!-- Website description -->
|
||||
<meta name="description" content="Ronald's website" />
|
||||
<!-- Website keywords -->
|
||||
<meta name="keywords" content="Ronald, Website:" />
|
||||
<!-- website author -->
|
||||
<meta name="author" content="Ronald" />
|
||||
|
||||
<!-- Favicon, rel: what type of link, href: where to find the icon -->
|
||||
<!-- icon: image to icon generator, some pixel restrictions, for the top website icon -->
|
||||
<link rel="icon" href="images/favicon.ico" />
|
||||
|
||||
<!-- CSS styles: called stylesheet, if u type "link: (list of types of link)" then press tab-->
|
||||
<link rel="stylesheet" href="css/main.css"/>
|
||||
</head>
|
||||
|
||||
|
||||
<!-- Body: everything in the webpage -->
|
||||
<body>
|
||||
<!-- navigation bar -->
|
||||
<!-- <nav></nav> -->
|
||||
|
||||
<!-- sections -->
|
||||
<section>
|
||||
<!-- dividers, e.g. left and right side of website -->
|
||||
<div class="container">
|
||||
<!-- headers, based on size h1 h2 -->
|
||||
<h1 class="title-text">Tiffany's to-do list website</h1>
|
||||
<h2>second header</h2>
|
||||
<!-- paragraph -->
|
||||
<p>Welcome to my to-do list</p>
|
||||
<!-- subtitles -->
|
||||
<sub></sub>
|
||||
<!-- bold -->
|
||||
<b></b>
|
||||
<!-- italics -->
|
||||
<i></i>
|
||||
<!-- underline -->
|
||||
<u></u>
|
||||
|
||||
<!-- image, people usually use avif, webp -->
|
||||
<!-- alt is alternative -->
|
||||
<img src="images/image.png" alt="Image not found">
|
||||
|
||||
<!-- form, what you want the form to do, usually lead into javascript, login.js -->
|
||||
<form action="/form-action" method="post">
|
||||
<label for="to-do">What do you want to do?</label>
|
||||
<!-- theres different types of input, which is what u fill in for form -->
|
||||
<!-- type required make it required, placeholders: the invisible list -->
|
||||
<!-- usually control through javascript -->
|
||||
<input name="todo" type="text" placeholder="Enter your to-do" required class="todo-input"/>
|
||||
|
||||
<!-- button, if it's a submit button then it will end the form and submit it, other than that the button doesnt do anything -->
|
||||
<button type="submit" class="form-submit">Add to form</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
<!-- Footer: the bottom part of the webpage -->
|
||||
<!-- <footer></footer> -->
|
||||
|
||||
<!-- Scripts, where you link javascript files -->
|
||||
<!-- <scripts src="index.js"> </scripts> -->
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user