-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
237 lines (197 loc) · 13.9 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title> Five tips for front-end web development </title>
<link rel="stylesheet" type="text/css" href="style.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>
<a class="name" href="">Philip Herb</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="">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:[email protected]?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>