Useful Guide on Front-end Web Development.

useful guide on front-end web development.

Hey guys, This article will cover mostly things you need to know in order to become a modern front-end developer and the things you should put in consideration when writing your project in order for you to deliver well. I can just say this article is a road map on becoming a front-end web developer. follow me closely.

Introduction

Basically web development comprises of front-end and back-end. In this article we will be looking into Front-end aspect of it which involve the use of mark up language, cascading style sheet and Js which mean JavaScript to develop the client-side. Client side mean the part of the web which is visual to the user. It’s includes graphics, texts, animation, button etc. In short front end is the part of the web in which user interact with.

A front-end developer is the one who is responsible for developing the visual interface of a website or web application. And this is done by using the three languages mention earlier I.e html,css and JavaScript.

There are a lot of web technologies you need to know and understand to be able to succeed as a front-end developer because client-side development has gone beyond html, css and Js. I believe this write up will get you started with client side development also known as front-end development.

What is web development ?

Web development is the creation of application programs that reside on remote servers and deliver to the user’s device over the internet . A web app doesn’t need to be downloaded and is instead accessed through internet. An end user can access website or web app through a web browser such as chrome, Firefox, Mozilla etc.

IDE (Integrated development environment)

The text editor is an app or software that provides comprehensive facilities to computer programmer for software development. It’s where you will write your code, debug and run and test. Having the right text editor/IDE can save you time, energy and improve your output. Text editor increased efficiency I.e faster coding with less effort and it’s encourage project management I.e program resources are easily manage. Though it may be complex for beginner programmers and it’s cannot automatically fix error I.e you still need to knowledge to code efficiently. Below are the few out numerous of text editors.

• Atom- Atom is an open-source code editor for windows , Linux, andMacOs. It is developed by Github. It supports plugins.
• Sublime text- sublime text is very easy to use, fast and flexible and it’s available on macOS, Windows, and Linux.
• Visual studio code- visual studio code comes with a superb extension which make work easier and faster. I can say it is the best IDE for front-end development. It works across all operating systems such as macOS, Windows, and Linux.
• Others are: betbeans, eclipse, aptana etc

Some terminologies in web

It is important to understand how the web works before you start learning any technologies. You should learn about things like:

Websites: is a collection of webpages, followed the same theme and are connected together with the same hyperlinks.

Web pages: is a large number of computer documents eg text, video, animation, audio etc that are placed on a links together to make a website.

Web address: also called URL(uniform resource locator ) is an address describing where the web pages can be found on the internet e.g www.fauna.com

Web browser: is used to explore the content of World Wide Web. When a user request a web page from a particular website, the web browser retrieved the necessary content from a web server and then display the page on the user’s device.

Having know all these, there are also some web fundamental you should learns and have knowledge about, they are as follow:

• HTTP / HTTPS
• Browsers and how they work
• How does the web work

Learn HTML

HTML(Hypertext Markup Language) It is the markup language for document designed to be displayed in a web browser . It can be assisted with technologies such as css and JavaScript. It is easy to learn and with knowledge of html you can create a simple web pages. Html comprises of numerous tags but I will mention few out of it I.e html table <table><th>,<tr> and <td>, html elements like <strong> to bold text, <u> to underline a text, html form for creating of form <form>content </form>.Others Html tags — tags like <p>, <h1-h6>, anchor tag<a>, <select>,list tag <ol>,<ul> etc. learn more on html here

Learn CSS

Our Html code is like a skeleton without any design and may not be responsive or user might not find our website attractive. CSS stands for Cascading Style Sheets. It is the what you need to learn after HTML. It is used for styling our HTML. For example it can be used to creat animations, float element, create a complex shapes , space our elements, cloud, fonts etc. The basics of CSS you need to learn are: CSS Flexbox CSS box model, CSS positioning and CSS grid

We have three type of CSS which are:

Inline CSS: This uniquely style and format a distinct element. They are simply added to the element to be styled. It doesn't apply to every content of the document except the element attached to.

E.g <h1 style=“color:blue”>this is an heading</h1>.

Internal CSS: are define within style element, inside the head section of an html document. It’s used alone when document has unique style. Whatever style describe with the internal css affect only that document

<head>
<style>
Body {
Background-color: gray;
}
.page {
Color: blue;
Font- size: 30px;
}
</style>
<body>
<p class=“page”>getting started with FAUNA</p>

External css: This mean css code that can be written in a Separate file outside the html document using IDE and can be imported into any html file. External css is always save with .css file extension. Html reference the external stylesheet within the link tag and the link tag element is usually in the head section.

E.g

<head>
<link ref=“stylesheet” Type=“text/css” href=“style.css”>
</head>

Also some css preprocessor should also be learnt like Sass — Which stands for Syntactically Awesome Stylesheet. It allows you to use variables, nested rules, mixings, functions, and more, all with a fully CSS-compatible syntax.. According to the documentation, Sass is a stylesheet language that’s compiled to CSS. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects. also Less which Less stands for Leaner Style Sheets is a backwards-compatible language extension for CSS.

CSS Frameworks you should know:

• Tailwind CSS — Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind allows us to use inline styling and achieve incredible results without using a single line of CSS.
• Bootstrap — Bootstrap is a free and open source front end development framework for the creation of websites and web apps. The bootstrap framework is built on html, css and Js to facilitate the development of responsive, mobile first sites and apps.
• Others are Foundation,Bulma etc

learn more on css here

Learn JavaScript

JavaScript is a scripting language used to make or build a dynamic content of the web. It’s one of the most popular languages in the world. As a front end developer, it’s a must for you to have a knowledge of JavaScript though it can also be used in server side. Js makes your website alive. JavaScript adds interactive behavior to web pages, gives immediate feedback to the user and Running some underground processes on the website(like tracking what user has done, which page user has visit etc )

Some of the basics of JavaScript you need to learn are: JavaScript Syntax , DOM Manipulation — Read more here

JavaScript Frameworks/Libraries

After learning the basics of JavaScript, you can pick any JavaScript framework of your choice.

• React — According to the documentation, a JavaScript library for building user interfaces React lets you create reusable components.
• Vue — Vuejs is an approachable, versatile, performant javascript framework that helps you create a maintainable and testable codebase. Vuejs is also beginner-friendly.
• Angular — According to the documentation, Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

Accessibility and Performance

sometimes we finished building our website and think its one a of a kind. website performance goes a long way on how your website will be rated. below are some few things your website should possess before it can be perfect:

1. lightweight and loads fast

2. Fits on all screens

3. Looks the same in all your browsers

4. Accessible to every user that visits your site i.e there should be no restriction to anybody. People with disabilities, slow networks, visual impairments, hearing impairments can have access to all the information on the website without obstructions or difficulties.

Testing Your Apps

website testing is checking your web application or website for potential bugs before its made live and is accessible to general public. Web Testing checks for functionality, usability, security, compatibility, performance of the web application or website. you can read more here

Website Deployment

you can host your website or web app on the internet for the people to see what you have created or done and this is super easy to do with tools like Netlify or GitHub pages. With knowledge gotten from HTML, CSS, and JavaScript you can build simple web pages using those technologies.

Conclusion

you have come to the end of the front-end development guide. I believe this article will get you started to become a front end web developer and build your own websites or web applications. you can reach me on twitter. Thanks for reading.