FRONT-END DEVELOPMENT DAY 3
Published: 2020-10-06 15:03:28

**The front end** of a website is the part that users interact with. Everything that you see when you’re navigating around the Internet, from fonts and colors to dropdown menus and sliders, is a combo of HTML, CSS, and JavaScript being controlled by your computer’s browser.
Front-end developers are responsible for a website’s user-facing code and the architecture of its immersive user experiences. In order to execute those objectives, front-end devs must be adept at three main languages: HTML, CSS, and Javascript programming.Front-end developers also require to muster some frameworks like vue, angular etc which ensure great-looking content no matter the device, and libraries like jQuery and LESS, which package code into a more useful, time-saving form. A lot of front-end developer job listings also call for experience with Ajax, a widely used technique for using Javascript that lets pages dynamically load by downloading server data in the background(asynchronous).

** Front End Developer Skills**
1. **HTML/CSS**
 You won’t find a single front end developer job listing that 
 doesn’t call for (or assume) proficiency in these two 
 languages.Lets have a look on what they are:
 HyperText Markup Language (HTML) is the standard markup language 
 used to create web pages. A markup language is your way of making 
 notes in a digital document that can be distinguished from 
 regular text. It’s the most basic building block you’ll need for 
 developing websites.

 CSS (Cascading Style Sheets) is the language used to present the 
 document you create with HTML. Where HTML comes first and creates 
 the foundation for your page, CSS comes along next and is used to 
 create the page’s layout, color, fonts, and…well, the style!

 Both of these languages are absolutely essential to being a front 
 end developer. Simply put, no HTML/CSS, no web development.
2. ** JAVASCRIPT/JQUERY**
 Another MAJOR tool in your front end developer toolbox is going 
 to be JavaScript (JS). Where HTML is a markup language and CSS is 
 a style sheet language, JS is the first language I’ve mentioned 
 that’s a bonafide programming language. What’s the difference? 
 Where HTML and CSS determine the presentation of a page, JS 
 determines the function. **jQuery** is a collection of plugins 
 and extensions that make it faster and easier to use JS on your 
 website. jQuery takes common tasks that require multiple lines of 
 JS code and compresses them into a format that can be executed 
 with a single line. This will be a big help when you’re coding 
 with JS. Unless, of course, you don’t like saving time. ;)
3. **CSS AND JAVASCRIPT FRAMEWORKS**
 CSS and JavaScript frameworks are collections of CSS or JS files 
 that do a bunch of the work for you by providing common 
 functionality (think logging into a website or searching a blog). 
 Instead of starting with an EMPTY text document you start with a 
 code file that has lots of awesome JS already in it.

 Frameworks have their strengths and weaknesses—don’t we all!—and 
 it’s important to choose the best framework for the type of 
 website you’re building. For example, some JS frameworks are 
 great for building complex user interfaces, while others excel at 
 displaying all of your site’s content.
 You should note that it is possible to use frameworks together. 
 isn't this awesome??
4. **VERSION CONTROL/GIT**
 Version control is the process of tracking and controlling 
 changes to your source code so that If something goes wrong along 
 the way you won't start over from the beginning . Version control 
 software—like open source stalwart Git—is a tool you’ll use to 
 track those 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.

 As you might imagine, this a skill that you (and your prospective 
 clients and employers) will be very happy to have.
5. **TESTING/DEBUGGING**
 Bugs are a reality of the development process. In order to keep 
 things moving you’ll need to test your code for bugs along the 
 way, so the ability to test and debug makes the list of essential 
 skills for front end developers.

 There are a couple of different testing methods for web 
 development. Functional testing looks at a particular piece of 
 functionality on your site (like a form or database) and makes 
 sure it does everything you’ve coded it to do.

 Unit testing is another method. It tests the smallest bit of code 
 that’s responsible for one thing on your site and examines it 
 individually for correct operation.

 Testing is a big part of the front end development process, but 
 fortunately, it’s another area where there are frameworks to help 
 you. Programs like Mocha and Jasmine are designed to speed up and 
 simplify your testing process.
6. **CSS PREPROCESSING**
 CSS on its own, while essential, can sometimes be limiting. One 
 of these limitations is that fact that you can’t define 
 variables, functions, or perform arithmetic operations. This is a 
 problem when a project grows in scale and code base, as you’ll 
 soon find yourself wasting a lot of time writing repetitive code 
 to make changes. Like CSS (and JS) frameworks, CSS preprocessing 
 is another means of making your life as a developer easier and 
 more flexible.

 Using a CSS preprocessor like Sass, LESS, or Stylus, you’re able 
 to write code in the preprocessor's language (allowing you to do 
 things that might be a huge pain with plain old CSS). The 
 preprocessor then converts that code to CSS so it will work on 
 your website.
7. **RESPONSIVE DESIGN**
 These days we use any number of computers, phones, and tablets to 
 look at web pages. Ever notice how these pages adjust themselves 
 to the device you’re using without you doing anything on your 
 end? This is due to responsive design. Understanding responsive 
 design principles and how to implement them on the coding side is 
 key to front end development.

 One cool thing to keep in mind regarding responsive design is 
 that it’s an intrinsic part of CSS frameworks like the 
 aforementioned Bootstrap. These skills are all interconnected and 
 so as you learn one you’ll often be making progress in the others 
 at the same time.

8. ** BROWSER DEVELOPER TOOLS**
 Users will ultimately be interfacing with your websites through a 
 web browser. The way your site is rendered by these browsers is 
 going to be a big part of whether your work is successful or not.

 Similarly to the testing and debugging mentioned above, all 
 modern web browsers come equipped with developer tools. These 
 tools allow you to test and fine tune your pages in the browser 
 itself, in ways specific to how the browser is interpreting your 
 code.

 Specifics will vary from browser to browser, but browser 
 developer tools generally consist of an inspector and a 
 JavaScript console. The inspector allows you to see what the 
 runtime HTML on your page looks like, what CSS is associated with 
 each element on the page, and also allows you to edit your HTML 
 and CSS and see the changes live as they happen. The JS console 
 allows you to view any errors that occur as the browser tries to 
 execute your JS code.

 Other skills are:** BUILDING AND AUTOMATION TOOLS/WEB PERFORMANCE 
 and COMMAND LINE**