-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblogContent.html
More file actions
171 lines (152 loc) · 10.8 KB
/
blogContent.html
File metadata and controls
171 lines (152 loc) · 10.8 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>justinhasda</title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
</head>
<body>
<div class="mainContainer">
<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html">Justin Hasda</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="blogContent.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container my-5">
<div class="row">
<!-- left side for profile -->
<div class="col-lg-3 col-md-12 col-sm-12 order-2 order-lg-1">
<div class="profileSection">
<div class="card mx-auto p-4 shadow mb-2 leftCard">
<img src="assets/images/justin.png" class="rounded-circle mx-auto mb-3" alt="Profile" width="100" height="100">
<h2 class="card-title text-center mb-1">Justin Hasda</h2>
<p class="text-muted text-center mb-3">Frontend Designer & Django Learner. Passionate about building real-world web solutions.</p>
<div class="d-flex justify-content-center gap-3 fs-5">
<a href="https://facebook.com" target="_blank" class="text-secondary"><i class="bi bi-facebook"></i></a>
<a href="https://linkedin.com" target="_blank" class="text-secondary"><i class="bi bi-linkedin"></i></a>
<a href="https://twitter.com" target="_blank" class="text-secondary"><i class="bi bi-twitter"></i></a>
<a href="https://twitter.com" target="_blank" class="text-secondary"><i class="bi bi-instagram"></i></a>
</div>
<hr>
<div class="recentBlog">
<h4 class="card-title">Recent Blog</h4>
<ul class="list-unstyled">
<li><a href="#" class="text-decoration-none text-muted d-block py-1"><strong># Recent Blog Lorem ipsum dolor sit amet.</strong></a></li>
<li><a href="#" class="text-decoration-none text-muted d-block py-1"><strong># Recent Blog Lorem ipsum dolor sit amet.</strong></a></li>
<li><a href="#" class="text-decoration-none text-muted d-block py-1"><strong># Recent Blog Lorem ipsum dolor sit amet.</strong></a></li>
</ul>
</div>
<hr>
<footer">
<div class="text-center">
<p class="mb-1 text-muted">© 2025 Justin Hasda.</p>
</div>
</footer>
</div>
</div>
</div>
<!-- right side for blog -->
<div class="col-lg-9 col-md-12 col-sm-12 order-1 order-lg-2">
<div class="container myContent">
<div class="card">
<img src="assets/images/justinhasdablog.jpg" class="img-fluid rounded w-75 my-1"alt="Blog Thumbnail" />
<div class="card-body">
<h1 class="card-title">Fun Front-End Development Tricks for Beginners</h1>
<small class="text-muted">June 14, 2025 • 5 min read</small>
<div class="my-2">
<span class="btn badge bg-primary me-1">#frontend</span>
<span class="btn badge bg-secondary me-1">#html</span>
<span class="btn badge bg-success">#css</span>
<span class="btn badge bg-danger">#webdev</span>
</div>
<p>Front-end development is all about building the parts of websites and apps that users see and interact with. If you’re just starting out, here are some cool tricks and tips that will make your learning journey easier and more enjoyable!</p>
<h3>Use Browser DevTools Like a Pro</h3>
<p>Your browser’s developer tools (DevTools) are your best friends as a front-end developer. Here’s what you can do:</p>
<ul>
<li>Inspect elements: Right-click any part of a webpage and select “Inspect” to see the HTML and CSS behind it.</li>
<li>Live editing: Change CSS styles directly in DevTools and see the effect instantly.</li>
<li>Debug JavaScript: Use the Console tab to test snippets of JS code or find errors.</li>
</ul>
<p><b>Try this:</b> Open DevTools on your favorite website and play around with the styles!</p>
<h3>Master the Power of CSS Flexbox</h3>
<p>Flexbox helps you create flexible, responsive layouts easily without using complicated floats or positioning.</p>
<ul>
<li>Use display: flex on a container.</li>
<li>Align items horizontally or vertically.</li>
<li>Easily create menus, grids, or center content.</li>
</ul>
<p><b>Tip:</b> Use <a href="https://flexboxfroggy.com/" target="_blank">Flexbox Froggy</a> — a fun game to learn flexbox.</p>
<h3>Use CSS Variables for Easy Theming</h3>
<p>Instead of hardcoding colors and sizes everywhere, use CSS variables:</p>
<code>
:root { <br>
--main-color: #3498db; <br>
--padding: 16px; <br>
}
<br>
button { <br>
background-color: var(--main-color); <br>
padding: var(--padding); <br>
} <br>
</code>
<p>This makes it easy to change your whole site’s theme by just tweaking variables!</p>
<h3>Responsive Design with Media Queries</h3>
<p>Your site should look great on phones, tablets, and desktops. Use media queries:</p>
<pre class="bg-dark text-light rounded">
<code>
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
</code>
</pre>
<p>This changes styles when the screen is smaller than 600px.</p>
<h3>Use Placeholder Content While Loading</h3>
<p>To improve user experience, show placeholder boxes or loading animations before content loads. This helps users know something is happening.</p>
<p><b>Example:</b> Use CSS animations with @keyframes to create shimmering placeholders.</p>
<h3>Use Online Tools to Speed Up Your Work</h3>
<ul>
<li>CodePen or JSFiddle: Quickly test HTML/CSS/JS snippets online.</li>
<li>Can I use: Check browser support for CSS or JS features.</li>
<li>Google Fonts: Add beautiful fonts easily.</li>
</ul>
<p><b>Example:</b> Use CSS animations with @keyframes to create shimmering placeholders.</p>
<h3>Bonus Tip: Keep Your Code Clean and Commented</h3>
<p>Write neat code and add comments to explain tricky parts. It helps you and others understand your work later!</p>
<h3>Final Words</h3>
<p>Front-end development is super fun and creative. Try these tricks one by one and watch your skills grow. Happy coding!</p>
</div>
</div>
<a href="index.html" class="btn btn-dark my-4"><i class="bi bi-arrow-left pe-2"></i> All Posts</a>
</div>
</div>
</div>
</div>
</div>
<script src="assets/js/script.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
</html>