-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathBlogPageFinal.html
More file actions
307 lines (263 loc) · 15.6 KB
/
Copy pathBlogPageFinal.html
File metadata and controls
307 lines (263 loc) · 15.6 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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Five tips for front-end Development</title>
<link rel="stylesheet" href="../cssFiles/BlogPageFinal.css">
</head>
<body>
<header id="main-header">
<a href="http://blog.codingninjas.in/" id="logo"><img
src="https://ninjasfiles.s3.amazonaws.com/0000000000001394.png" alt="coding ninjas logo"></a>
<div>
<p id="site-title"><a href="http://blog.codingninjas.in/">blog.codingninjas.in</a></p>
<p id="about-site">Coding Ninjas Official Blog</p>
</div>
<div id="header-image-container">
<img src="https://ninjasfiles.s3.amazonaws.com/0000000000001395.png" alt="coding ninjas love coding">
</div>
</header>
<div id="content">
<main>
<header id="blog-header">
<h1> Five tips for front-end web development </h1>
</header>
<div id="author-container">
<img id="author-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000011_1549316247_author-pic.png"
alt="author">
<span id="author-name"><a href="http://blog.codingninjas.in/author/kannumittal/">kannumittal</a></span>
<span class="slash"> / </span>
<span id="author-topic"><a href="http://blog.codingninjas.in/category/web-development/">Web
Development</a></span>
</div>
<article id="blog-content">
<div id="blog-image-container">
<div id="views">
<img src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000012_1549316267_signal.png"
alt="views">
<span><b>Views:</b></span>
<span><b>1,137</b></span>
</div>
<img src="https://ninjasfiles.s3.amazonaws.com/0000000000001540.jpg" alt="best coding practices">
</div>
<p>
Don’t you just love exploring beautiful and neat sites with a clean user interface? While most of us
would reply with an assertive ‘YES,’ little, do we know the kind of effort and skill that goes into
making a website attractive and user-friendly. The secret to creating an impressive site is to
master the art of front-end development, and no, it is not as easy as it seems!
</p>
<p>
However, it is not impossible either. Here are five tips that’ll help you get better in front-end
design and web development
</p>
<ol>
<li>
<h4 class="h-style"> Commenting </h4>
<p>
Commenting is one such practice that is often ignored by programmers, especially for codes
that are written by multiple programmers. But remember, commenting is an important part of
project you create. With proper comments and organised files its always easier for you or
others to jump in and understand where things are at and how they work.
</p>
</li>
<li>
<h4 class="h-style"> Invest In Productive Tools. </h4>
<p>
The Internet is teeming with a host of web development tools, from browser add-ons to smart
plugins, the amount of choices available now is massive! So, why not invest in some really
productive web tools that’ll help you improve your front-end designing skills? Tools like
Sublime Text, jQuery, Emmet, GitHub, Bootstrap, and Sass are nothing short of a godsend for
web developers.
</p>
</li>
<li>
<h4 class="h-style"> Always Be Curious. </h4>
<p>
A front-end developer has to keep himself/herself updated continuously with the latest news
and innovations in the field. You need to take a proactive stand and learn new things about
front-end development from informative blogs and videos. Following are some of the most
informative and useful learning sources for front-end developers -
</p>
<ul class="sources">
<li> <a href="https://frontendfoc.us/" target="_blank"> Frontend Focus </a> </li>
<li> <a href="https://css-weekly.com/" target="_blank"> CSS Weekly </a> </li>
<li> <a href="https://javascriptweekly.com/" target="_blank"> JavaScript Weekly </a> </li>
<li> <a href="https://web-design-weekly.com/" target="_blank"> Web Design Weekly </a> </li>
<li> <a href="https://tympanus.net/codrops/" target="_blank"> Codrops </a> </li>
<li> <a href="https://shoptalkshow.com/" target="_blank"> ShopTalk Podcast </a> </li>
</ul>
<p>
Also, make it a point to attend conferences and webinars. These meet-ups provide excellent
opportunities to expand your network and get acquainted with talented people.
</p>
</li>
<li>
<h4 class="h-style"> Refactor Your Code From Time To Time. </h4>
<p>
By “refactoring” your code, you’re only enhancing the code without tampering with its
functionality. This will improve the quality and readability quotient of your code and the
more often you do it, your code will continually be updated into a cleaner and fresher
version of what it was before. Apart from that, one of the most significant advantages that
refactoring offers is that it ensures your code remains free from plagiarism.
</p>
</li>
<li>
<h4 class="h-style"> Automate! </h4>
<p>
As a front-end developer, you already have to take care of minute little details that can
get overwhelming at times. You have to invest your time on things like Boilerplate, testing,
workflow, dependency management, performance, optimization, build, deployment, and so on.
Doesn’t sound easy, right?
</p>
<p>
Take some steam off yourself and incorporate automation into your workflow. While automation
can take care of things such as optimization, testing, etc., you can focus on the core areas
of front-end development such as HTML, CSS, creating the client-side software, enhancing the
user-experience, and so on. By doing so, not only will your productivity increase, but you
will also learn to use your time to focus on the areas that’ll improve the overall
functionality of your site. Grunt, Gulp, and Broccoli are some very efficient automation
tools.
</p>
</li>
</ol>
<p>
While these tips will surely help you become a better front-end designer, in the long run, you must
always remember two things while designing your platform – keep it simple and neat, and don’t forget
to create your signature style. And for all you peeps interested in making it big in front-end
development.
</p>
</article>
</main>
<aside>
<section id="subscription" class="widget">
<h4 class="widget-title">Subscribe now to stay updated with new technology trends</h4>
<div id="subscribe-form">
<form action="">
<label for="input-name">Name</label>
<input id="input-name" name="name" type="text">
<label for="input-email">Email *</label>
<input id="input-email" name="input-email" type="text" required>
<button class="sub-btn" type="submit">SUBSCRIBE</button>
</form>
</div>
</section>
<section id="search" class="widget">
<form action="">
<input type="text" placeholder="Search..." />
<button type="submit"><img
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000013_1549319004_search-icon.png"></button>
</form>
</section>
<section id="recent-posts" class="widget">
<h4 class="widget-title">Recent Posts</h4>
<ul>
<li>
<p><a href="">Guiding path for a fresher to start their career in software
programming/development</a></p>
</li>
<li>
<p><a href="">The undisputed truth about emotional support animal rhode island that the experts
don't want you to hear</a></p>
</li>
<li>
<p><a href="">The Best Plan to use for Emotional Support Animal Oregon</a></p>
</li>
<li>
<p><a href="">How to find Emotional Support Animal Illiios Online</a></p>
</li>
<li>
<p><a href="">Career opportunities after mastering Python</a></p>
</li>
</ul>
</section>
<section id="recent-comments" class="widget">
<h4 class="widget-title">Recent Comments</h4>
<ul>
<li>
<p>
<a class="name" href="">A V Yogesh Rao</a>
<span>on</span>
<a href="">Get ready for the ultimate summer scholarship test!</a>
</p>
</li>
<li>
<p>
<a class="name" href="">Strony Internetowe</a>
<span>on</span>
<a href="">Recursion(The good, the bad and the not so ugly)</a>
</p>
</li>
<li>
<p id="hii" class="lolo">
<a class="name" href="">Philip Herb</a>
<span id="on-text">on</span>
<a href="">Recursion(The good, the bad and the not so ugly)</a>
</p>
</li>
<li>
<p>
<a class="name" href="">Pascher Vigra</a>
<span>on</span>
<a href="">Recursion(The good, the bad and the not so ugly)</a>
</p>
</li>
<li>
<p>
<a class="name" href="">Ananya Burman</a>
<span>on</span>
<a href="">Code your way through Competitive programming!</a>
</p>
</li>
</ul>
</section>
<section id="categories" class="widget">
<h4 class="widget-title">Categories</h4>
<ul>
<li><a href="">Android</a></li>
<li><a href="">General</a></li>
<li><a href="">Interview Experiences</a></li>
<li><a href="">Machine Learning</a></li>
<li><a href="">Ruby</a></li>
<li><a href="">Uncategorized</a></li>
<li><a href="">Web Development</a></li>
</ul>
</section>
</aside>
<div id="social">
<a id="facebook" class="social-btn" target="_blank"
href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.codingninjas.in%2F2018%2F03%2F13%2Fa-step-by-step-walk-through-of-your-first-html-page%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000014_1549330414_facebook-logo.png"
alt="fb"></a>
<a id="linkedin" class="social-btn" target="_blank"
href="https://www.linkedin.com/shareArticle?mini=true&title=Best+Coding+Practices+for+Hassle-free+Programming&url=http%3A%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-programming%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000015_1549330433_linkedin-logo.png"
alt="in"></a>
<a id="twitter" class="social-btn" target="_blank"
href="https://twitter.com/share?url=http%3A%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-programming%2F&text=Best+Coding+Practices+for+Hassle-free+Programming"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000016_1549330452_twitter-logo.png"
alt="twi"></a>
<a id="gmail" class="social-btn" target="_blank"
href="https://plus.google.com/share?url=http%3A%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-programming%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000017_1549330467_google-logo.png"
alt="g+"></a>
<a id="whatsapp" class="social-btn" target="_blank"
href="whatsapp://send?text=http%3A%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-programming%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000018_1549330485_whatsapp-logo.png"
alt="w-app"></a>
<a id="mail" class="social-btn" target="_blank"
href="mailto:adresse@example.com?subject=7%20best%20coding%20practices%20to%20follow%20%7C%20blog.codingninjas.in&body=http%3A%2F%2Fblog.codingninjas.in%2F2018%2F04%2F02%2Fbest-coding-practices-for-hassle-free-programming%2F"><img
class="social-img"
src="https://ninjasfiles.s3.amazonaws.com/asset_0000000000000019_1549330510_mail-logo.png"
alt="mail"></a>
</div>
</div>
</body>
</html>