fbpx

What should be the approach to frontend development, in general?

Posted by dev on Saturday, September 12, 2020

What is Front-end development?

Front-end development is the practice of converting data into graphical interface, through the proper use of HTML, CSS and JavaScript so that users can view and commune with the data.

 

 

What is needed for Front-end Development?

First of all, Technical skills is a must for a front-end developer. A front end developer needs to know and be conversant in HTML, CSS and JavaScript and there are no questions about that. Only for a purpose of writing faster, you ought to familiarize yourself with an Integrated Development Environment (IDE) like Emmet or Visual Studio Code.

 

Now, let’s talk about some skills which are must in order to approach Front-end development.

 

  1. HTML / CSS: I know these two terms pops up everytime we talk about development or front-end development. There’s a valid justification, however, you won’t find a single front end developer who doesn’t call for (or expect) capability in these two languages.

           Yet, we should take a step back and take a look at what HTML and CSS are.

 HyperText Markup Language (HTML) is the standard markup language used to make website pages. A markup language is your method of making notes in a computerized report that can be recognized from standard content. It’s the most fundamental structure block you will require for developing sites.

CSS (Cascading Style Sheets) is the language used to introduce the report you make with HTML. Where HTML starts things out and makes the establishment for your page, CSS tags along straight away and is utilized to make the page’s format, shading and textual styles.    

Both of these languages are significant to being a front-end developer. Basically, no HTML/CSS, no web advancement.

 

2.JavaScript/Jquery:   Another major tool in your front-end developer tool stash will be JavaScript (JS). Where HTML is a markup language and CSS is a template language, JavaScript is the primary language. I’ve referenced that it is an authentic programming language. What’s the distinction? Where HTML and CSS decide the introduction of a page, JavaScript decides the capacity.

For example, a very simple website or webpage is fine, but for the circumstances where you need interactive or heavy features like, audio and video, games, scrolling abilities, page animations, JavaScript is the tool you will use to execute them.

One cool thing to remember about JavaScript is the presence of libraries like jQuery, a collection of plugins and extensions that make it faster and easier to use JavaScript on your site. jQuery takes basic assignments that require various lines of JS code and packs them into a configuration that can be executed with a solitary line. This will be a major assistance when you are coding with JS. Except if, obviously, you don’t care for sparing time.

 

3.CSS and JavaScript Framework: Wait we already covered CSS and JavaScript right?

We did, however they’re both such a major piece of front-end development that a lot of other skills you’ll need are going to build off of them.

CSS and JavaScript frameworks are collections of CSS or JS files that do a lot of the work for you by giving basic usefulness (think signing into a site or looking through a blog). Rather than beginning with an empty book report you start with a code file that has heaps of marvelous JavaScript as of now in it.

Frameworks have their strengths and weaknesses— don’t we all? And it is very much vital to pick the best framework for the type of the website that you’re building. For example, some JavaScript frameworks are incredible for building complex UIs, while others exceed expectations at showing the entirety of your website’s substances.

To make things considerably more fun, you can use frameworks together. It is not unexpected to match Bootstrap with another JavaScript structure like AngularJS. The content is handled by Angular, and the look and feel is dealt with by Bootstrap (with some CSS sprinkled in, as well).

Since you will be using CSS and JavaScript all the time in your Web Development and as many projects start with similar style elements and code, knowledge of these frameworks is critical to being an efficient developer.

 

These were some basic skills that a front-end needs to acquire before approaching front-end development.

 

Now let’s have a quick view on 10 essential skills every front-end developer needs.

 

1.HTML/CSS:HTML is the most basic building block that you will need to develop websites and CSS is the language used to style the document you create with HTML.

 

2.JavaScipt: Where HTML and CSS determine the content & presentation of a page. JavaScript determines the function.

 

3.CSS & JavaScript Framework: CSS and JavaScript frameworks are collections of files that do a bunch of the work for you by providing common functionality.

 

4.CSS Preprocessing: CSS preprocessing lets you write code in the preprocessor’s language and then converts that code to CSS.

 

5.Version control/GIT: Version control software helps you to track changes so you can go back to a previous version of your work and find out what went wrong without tearing the whole thing down.

 

6.Responsive Design: Responsive design allows webpages to adjust themselves to the device you’re using without you doing anything on your end.

 

7.Testing/Debugging: Bugs are the reality of the development process, so in order to keep things moving you’ll need to test your code for bugs along the way.

 

8.Browser Developer Tools: Browser developer tools generally consist of an inspector (so you can see HTML and CSS of a site) and a JavaScript console.

 

9.Building & Automation Tools/ Web Performance: Programs like Grunt and Gulp:  Programs like Grunt and Gulp may be used to automate image optimization, CSS and JavaScript minifying, and other web performance chores to make your sites faster.

 

10.Command Line: There will be times you’ll need to open a terminal on your computer and type commands in the command line(.CMD). 

 

 

Finally, let’s take a look at some steps to approach Front-end Development.

 

  1. The first step is to install the development & production server using node, yarn etc.
  2. Install the required packages like webpack or laravel mix bootstrap, jQuery, webfont, loader etc.
  3. Then compiling all assets through webpack or laravel.
  4. Start slicing the PSD to HTML then WordPress.
  5. Checking responsive
  6. Check and conform score on https://web.dev/
  7. Go Live