Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,143,498 members, 7,781,501 topics. Date: Friday, 29 March 2024 at 03:36 PM

Front-end Web Development Guidelines For Beginners - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Front-end Web Development Guidelines For Beginners (1775 Views)

Become A Front-end Web Designer With Nairaland 100days Of Code / Front-end Web Developer Needed / Front End Web Designing Training Courses In Lagos (2) (3) (4)

(1) (Reply) (Go Down)

Front-end Web Development Guidelines For Beginners by Abiolaseyi(m): 1:42pm On May 22, 2017
The scope of front-end development is huge. To be a good front-end web developer, you need to learn a few scripts from the scratch. Yes, I am talking about HTML, CSS and JavaScript. You can start with HTML basic tags and then go with detailed HTML and CSS. Here is an extensive front-end web development checklist for a beginner.



1. HTML
Most of the modern browsers support HTML5. That's why a fresher should start with HTML5 basic tags. Study and practice all the HTML5 elements. For development work, you may not have sufficient time to Google any tag or attribute. Use sticky notes or printed materials to memorize the critical tags and attributes.



2. CSS
Once you acquire a good knowledge of HTML5, start learning CSS3. Note that, CSS is harder than HTML. Most of the smooth animations and effects are now made using CSS. Explore Codepen and Tympanus. There are many HTML/CSS tips, tricks and examples. After learning CSS, let’s walk to the real world. Yes, now you need to try to convert PSD files to HTML templates. It must be responsive, remember!



3. JavaScript and jQuery
It’s time to play with JavaScript, JS library and jQuery. You can find tons of resources online. The best resource for jQuery is its documentation. Develop a few little plugins using jQuery. Learning jQuery is full of fun.



4. Front-end Frameworks
Front-end frameworks are very popular these days. Almost all of the websites are now using front-end frameworks for faster development process. Twitter’s Bootstrap and Skeleton are two of the most popular front-end frameworks. Both are almost similar but Bootstrap is considered to be the best for its rapid development time and huge functionalities. After completing HTML, CSS and JavaScript steps, front-end frameworks would take a few days to be at your fingertips.



5. Templating Engine
Templating engine is new a trend and the future of web development. The rapid growth of web applications has created a field for templating engines. In the near future, a big number of websites and web applications will run on a backend language and a front-end JSON-based template. The backend system will only provide the data via JSON or XML and the front-end will have a template engine to put the data inside the HTML structure. AngularJS and React are the future big web technologies. So study them.



6. Tools
i) Editor

Sublime text, WebStrom, and Atom are three of the most popular text editors. These editors have a range of shortcuts for faster development. Learn and practice them. I personally use Sublime Text 3. It has some awesome packages. The tool is very lightweight.



ii) Version Control

Use this element for version control purposes. Github and Bitbucket both have private repository service. Github private repository is paid and Bitbucket offers this service free for 5 users.



iii) Browser & Extension

In my opinion, Google Chrome browser is a nice choice for front-end web development. It has a ton of useful extensions like Firebug, ColorPick, JSONView, Page Ruler, Web Developer etc.



iv) Task Runner

Task runner is a must have element for any front-end developer. Most of my known developers use Grunt. It helps you do the minification, compilation, unit testing, linting etc.



Web development technology trend is always changing, so stay in touch with the trend. Also follow my handle to get the latest updates
Twitter:@Adeyefabiola

2 Likes

Re: Front-end Web Development Guidelines For Beginners by Nobody: 8:28am On May 23, 2017
Abiolaseyi:
The scope of front-end development is huge. To be a good front-end web developer, you need to learn a few scripts from the scratch. Yes, I am talking about HTML, CSS and JavaScript. You can start with HTML basic tags and then go with detailed HTML and CSS. Here is an extensive front-end web development checklist for a beginner.



1. HTML
Most of the modern browsers support HTML5. That's why a fresher should start with HTML5 basic tags. Study and practice all the HTML5 elements. For development work, you may not have sufficient time to Google any tag or attribute. Use sticky notes or printed materials to memorize the critical tags and attributes.



2. CSS
Once you acquire a good knowledge of HTML5, start learning CSS3. Note that, CSS is harder than HTML. Most of the smooth animations and effects are now made using CSS. Explore Codepen and Tympanus. There are many HTML/CSS tips, tricks and examples. After learning CSS, let’s walk to the real world. Yes, now you need to try to convert PSD files to HTML templates. It must be responsive, remember!



3. JavaScript and jQuery
It’s time to play with JavaScript, JS library and jQuery. You can find tons of resources online. The best resource for jQuery is its documentation. Develop a few little plugins using jQuery. Learning jQuery is full of fun.



4. Front-end Frameworks
Front-end frameworks are very popular these days. Almost all of the websites are now using front-end frameworks for faster development process. Twitter’s Bootstrap and Skeleton are two of the most popular front-end frameworks. Both are almost similar but Bootstrap is considered to be the best for its rapid development time and huge functionalities. After completing HTML, CSS and JavaScript steps, front-end frameworks would take a few days to be at your fingertips.



5. Templating Engine
Templating engine is new a trend and the future of web development. The rapid growth of web applications has created a field for templating engines. In the near future, a big number of websites and web applications will run on a backend language and a front-end JSON-based template. The backend system will only provide the data via JSON or XML and the front-end will have a template engine to put the data inside the HTML structure. AngularJS and React are the future big web technologies. So study them.



6. Tools
i) Editor

Sublime text, WebStrom, and Atom are three of the most popular text editors. These editors have a range of shortcuts for faster development. Learn and practice them. I personally use Sublime Text 3. It has some awesome packages. The tool is very lightweight.



ii) Version Control

Use this element for version control purposes. Github and Bitbucket both have private repository service. Github private repository is paid and Bitbucket offers this service free for 5 users.



iii) Browser & Extension

In my opinion, Google Chrome browser is a nice choice for front-end web development. It has a ton of useful extensions like Firebug, ColorPick, JSONView, Page Ruler, Web Developer etc.



iv) Task Runner

Task runner is a must have element for any front-end developer. Most of my known developers use Grunt. It helps you do the minification, compilation, unit testing, linting etc.



Web development technology trend is always changing, so stay in touch with the trend. Also follow my handle to get the latest updates
Twitter:@Adeyefabiola

Thanks for sharing this
Re: Front-end Web Development Guidelines For Beginners by Abiolaseyi(m): 7:04pm On May 23, 2017
You are welcome bro
Re: Front-end Web Development Guidelines For Beginners by oddytony(m): 10:07pm On May 23, 2017
nice one i think i got this your information on time. I jusst finshed my css/html. big ups bro. But are you familiar with vagrant
Re: Front-end Web Development Guidelines For Beginners by Abiolaseyi(m): 3:34pm On May 24, 2017
oddytony:
nice one i think i got this your information on time. I jusst finshed my css/html. big ups bro. But are you familiar with vagrant
No, am not into vagrant

(1) (Reply)

How Can I Make Money As A Web Developer? / Any One With Win 10 Product Key / Best Approach To Learn Node Js

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 26
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.