Anton Mi

How to become a full stack developer — Front-end

Contents

Articles of the series:

Now you know how to work with CSS and HTML. How about we begin as of now with programming!

As referenced in the past article Front-end apps work on a client-side (web browser). There are three fundamental technologies used on most of the web pages. HTML is a structure, CSS — styles, JS interactive.

The present article will be an overview of Javascript.

Add javascript to a page

Js adds all the dynamics to web pages. Such as animations, events and many many else.

Javascript interacts with HTML in the following ways:

Tag events:

<button onClick="alert('Thank you for clicking')" >Click me!</button>





Script inserted before closing body tag:





<body>
 ...
  <script>
    alert('The script is working.');
  </script>
</body>










Or external file:





<body>
 ...
  <script src="some-external-file.js">
    alert('The script is working.');
  </script>
</body>















Basics





First a walk JS is a programming language. hence has features other languages have. In addition, it has interaction with HTML pages. All HTML elements are readable and reachable form JS.





Javascript based on prototypal inheritance paradigm.







Programming languages all have built-in data structures, but these often differ from one language to another. This article attempts to list the built-in data structures available in JavaScript and what properties they have; these can be used to build other data structures. Wherever possible, comparisons with other languages are drawn. Retrieved from: MDN







Six data types that are primitives: Boolean, Null, Undefined, Number, String, Symbol. And Object.





More about that can be discovered here.





Functional elements





// Comments
/*
   Or long comments
*/// Variables
var someVariable = 'data asssigned to variable';// Functions
function someFunction(){
  //Some actions here
}// Classes
class GoodClass {
  anyProperty = 'data asssigned to property';
  anyMethod(){
    //Any action
  }
}//Loops
for( var i of numbersArray ){
  //Repetative actions
}










Document Object Model (DOM)





All HTML elements are stored in DOM in hierarchical order.





Element <div id="orangeDog">Text</div> reachable by document.getElementById('orangeDog');





For instance, text color can be changed this way document.getElementById('orangeDog').style = 'red';





It is basics. For deeper knowledge, strongly recommend considering this book including exercises. It starts with the basics and gradually introduces you to JavaScript.





What does it take to be a good front-end developer?





In the wake of completing the book, you are as of now a front-end developer. Now it’s a matter of training and practice.





begin from little pages. On the first stage, you can reproduce some existing website or elements from it.





After you are certain in JS, HTML, CSS, you can pass to more complex tasks. Then try landing a junior job in some company or to build a website for a friend or family. Workplace helps advancement abilities.





What are the job requirements?





Usually, it looks like:





    

  • HTML, CSS, JS (including ES6), Jquery, Sass or Less
    • 




  • One of the front-end frameworks: Angular, React
    • 




  • AJAX
    • 




  • Experience with Git
    • 




  • Experience with Webpack, Gulp or other tools needed to build/bundle JS applications
    • 




  • Photoshop basics
    • 




  • Portfolio. It may be even small examples.
    • 






Skills increasing your chances:





    

  • Unit tests
    • 




  • WordPress or another popular CMS
    • 




  • Good understanding of the entire web development process
    • 






Libraries/frameworks





Angular or React — Most used for Single Page Applications. The second one currently is the highest demand.





Jquery — facilitates manipulations with elements, animations, AJAX





Lodash — helpful functions to manipulates data in JS





Bootstrap — Reusable HTML blocks with styles





Font awesome — Icons library





Helpful tools





Chrome dev tools — Development tools inside a browser.





Git — code versioning





NodeJs — Javascript based server. Has many helpful modules





NPM — Packages manager for NodeJs modules.





Gulp or Webpack — Pack and minifies code. NodeJs installed required.





Github — Store/share your code and discover the source code of others.





Codepen — HTML, CSS, JS online editor.



	







	
	

	

	
	

		
		

			
			

				
				

					Posted				

				

				


				
				

					in				

				

				

			

			

			
			

				
				

					by				

				

				
Anton Mi

			

			
		

		

		
		

			
			

				
				

					Tags: