-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathtips.html
More file actions
157 lines (138 loc) · 7.07 KB
/
tips.html
File metadata and controls
157 lines (138 loc) · 7.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<!-- Link to external style libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css" />
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
<!-- Font Awesome 6 (for fa-solid fa-house) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<!-- Link to custom CSS file -->
<link rel="stylesheet" href="assets/css/style.css" />
<title>NewbieToNinja</title>
<!-- Favicon -->
<!-- SVG for modern browsers -->
<link rel="icon" href="assets/favicon/favicon-newbietoninja.svg" type="image/svg+xml" />
<!-- PNG fallbacks -->
<link rel="icon" href="assets/favicon/newbietoninja-32.png" sizes="32x32" />
<link rel="icon" href="assets/favicon/newbietoninja-16.png" sizes="16x16" />
<!-- Classic ICO fallback -->
<link rel="icon" href="assets/favicon/favicon-newbietoninja.ico" sizes="any" />
<!-- iOS home screen -->
<link rel="apple-touch-icon" href="assets/favicon/apple-touch-icon-n2n.png" />
<!-- Optional larger sizes -->
<link rel="icon" href="assets/favicon/newbietoninja-256.png" sizes="192x192" />
<link rel="icon" href="assets/favicon/newbietoninja-512.png" sizes="512x512" />
</head>
<body>
<!--Navbar using bootstrap-->
<nav id="navbar" class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="assets/images/domo-logo.png" alt="DOMo Logo">
NewbieToNinja</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="quiz.html">Quiz</a></li>
<li class="nav-item"><a class="nav-link" href="projects.html">Projects</a></li>
</ul>
</div>
</div>
</nav>
<!-- Main content -->
<main>
<!--Hero image w/ button and game start-->
<header id="header" class="hero py-5 text-center">
<div class="container">
<h1 class="display-3 fw-bold mb-3">Tips</h1>
<h2 class="hero-text">Practical tips to help you write cleaner code, collaborate better, and build accessible websites.</h2>
<a href="quiz.html" class="btn btn-outline-light btn-lg mt-3"
>Click to start game</a
>
<butto n
type="button"
class="btn btn-outline-light btn-lg mt-3"
data-bs-toggle="modal"
data-bs-target="#exampleModalCenter"
>
Instructions
</button>
</div>
</header>
<section class="container py-5">
<div class="row g-4">
<div class="col-md-12">
<article class="card h-100 text-center p-3">
<div class="card-body">
<h3 class="card-title">Tips</h3>
<p class="card-text">Get advice from the pros on improving your prospects.</p>
<ul class="text-start">
<li>Use semantic HTML tags like <code><main></code>, <code><section></code>, and <code><footer></code> to improve accessibility.</li>
<li>Keep your CSS tidy — group related styles and use comments to explain sections.</li>
<li>Test your site with keyboard navigation and screen readers to catch accessibility issues early.</li>
<li>Use Git branches for experiments — never push straight to main without testing.</li>
<li>Write clear commit messages that explain what changed and why.</li>
<li>Use Bootstrap’s built-in classes for layout before writing custom CSS — it’s faster and easier to maintain.</li>
<li>Check your site on mobile and desktop — responsive design matters.</li>
<li>Use alt text on images so screen readers can describe them properly.</li>
<li>Don’t rely on color alone to convey meaning — use icons or labels too.</li>
<li>Ask for feedback from teammates — fresh eyes catch things you might miss.</li>
</ul>
</div>
</article>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer" class="custom-footer mt-5">
<div class="container p-4">
<div class="row gy-4">
<!-- Center column: Team01 Hackathon + ❤️ -->
<div class="col-12 col-lg-6 text-center order-1 order-lg-2">
<h2>Made with ❤️ for the Hackathon</h2>
</div>
<!-- Left column: Follow Us -->
<div class="col-12 col-lg-3 text-center text-lg-start order-2 order-lg-1">
<h4 class="text-uppercase">Follow Us</h4>
<ul class="list-unstyled mb-0">
<li><a href="https://www.twitter.com" class="footer-link" target="_blank" rel="noopener"><i
class="fab fa-twitter me-2"></i> Twitter</a></li>
<li><a href="https://github.com/FollowRob/Team01_Hackathon" class="footer-link" target="_blank"
rel="noopener"><i class="fab fa-github me-2"></i> GitHub</a></li>
<li><a href="https://www.facebook.com" class="footer-link" target="_blank" rel="noopener"><i
class="fab fa-facebook me-2"></i> Facebook</a></li>
</ul>
</div>
<!-- Right column: Navigation Links -->
<div class="col-12 col-lg-3 text-center text-lg-end order-3">
<h5 class="text-uppercase">Links</h5>
<ul class="list-unstyled mb-0">
<li><a href="index.html" class="footer-link"><i class="fa-solid fa-house me-2"></i> Home</a></li>
<li><a href="projects.html" class="footer-link"><i class="fa-solid fa-code"></i> Projects</a></li>
<li><a href="quiz.html" class="footer-link"><i class="fa-solid fa-brain me-2"></i> Quiz</a></li>
</ul>
</div>
</div>
<!-- Footer bottom: copyright -->
<div class="text-center p-3 footer-bottom">
© 2025 Team01. All rights reserved.
</div>
</footer>
<!-- Pull external Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>
<script src="assets/js/script.js"></script>
</body>
</html>