# introduction to front-end development
> ##### dhay salih

### **The internet**

The internet is the network of networks of computers communicating with one another, which provides the infrastructure to send zeros and ones. On top of that foundation, we can build applications that send and receive data.
Routers are specialized computers, with CPUs and memory, whose purpose is to relay data across cables or wireless technologies, between other devices on the internet.
Protocols are a set of standard conventions, like a physical handshake, that the world has agreed upon for computers to communicate with. For example, there are certain patterns of zeros and ones, or messages, a computer has to use to tell a router where it wants to send data.
TCP/IP are two protocols for sending data between two computers. In the real world, we might write an address on an envelope in order to send a letter to someone, along with our own address for a letter in return. The digital version of an envelope, or a message with from and to addresses, is called a packet.
IP stands for internet protocol, a protocol supported by modern computers’ software, which includes a standard way for computers to address each other. IP addresses are unique addresses for computers connected to the internet, such that a packet sent from one computer to another will be passed along routers until it reaches its destination.
Routers have, in their memory, a table mapping IP addresses to cables each connected to other routers, so they know where to forward packets to. It turns out that there are protocols for routers to communicate and figure out these paths as well.
DNS, domain name system, is another technology that translates domain names like www.amazon.com to IP addresses. DNS is generally provided as a service by the nearest internet service provider, or ISP.

A web page is a way to display information on the internet. It’s made up of elements like text, images, links, videos, or buttons.
Based on the information those pages contain, they are organized into an information hierarchy– this allows navigation from one page to another. The overall collection of those related web pages is a website.
A website isn’t an application. It’s not a search engine. (Though a website might contain those things.) A website, at its heart, is just a way to publicly collect and display information. No matter how complicated a website gets, it all boils down to that basic purpose.

## Client side - front-end

A front-end is the graphical interface that makes a website / application easier to use and more accessible and user-friendly
A front-end developer is responsible for the development of this graphical interface
The main responsibility of a Front-End Developer is the User interface (creating things that the user sees).

#### Common Tasks of a Front End Developer
Optimizing the user experience.
Using HTML, JavaScript and CSS to bring concepts to life.
Developing and maintaining the user interface.
Implementing design on mobile websites.
Creating tools that improve site interaction regardless of the browser.
Managing software workflow.
Following SEO best practices.
Fixing bugs and testing for usability.

#### Languages
Front end developers use HTML to lay out a document’s general structure and content, CSS for styling and JavaScript for situations that require advanced interactivity. Additionally, they might use AJAX (a combination of JavaScript and XML) to update specific areas of a website without having to refresh the entire page.

#### Libraries and Frameworks
Front end developers also commonly use the libraries built on these programming languages like AngularJS, jQuery and React; and design frameworks including tailwind and Bootstrap. CSS extensions, such as SASS, provide improved modularity and power.

#### Graphic Design Tools
Before a front end developer begins coding, they typically use graphic design tools to create a prototype of their website, which lets them test and experiment with the user interface before working out the actual code.
Depending on the team size, team and project scope, the process might be as simple as using a pencil and paper, or it might require graphics editing programs like Sketch or Photoshop or more advanced graphical editing tools such as Figma or Illustrator.

### What is HTML?
HTML stands for Hyper Text Markup Language
* HTML is the standard markup language for creating Web pages
* HTML describes the structure of a Web page
* HTML consists of a series of elements
* HTML elements tell the browser how to display the content
* HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

#### Main html components

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <p> element defines a paragraph
A text header, denoted using the <h1>, <h2>, <h3>, <h4>, <h5>, <h6> tags.
A paragraph, denoted using the <p> tag.
A horizontal ruler, denoted using the <hr> tag.
A link, denoted using the <a> (anchor) tag.
A list, denoted using the <ul> (unordered list), <ol> (ordered list) and <li> (list element) tags.
An image, denoted using the <img> tag
A divider, denoted using the <div> tag
A text span, denoted using the <span> tag

**Each element can also have attributes - each element has a different set of attributes relevant to the element. There are a few global elements, the most common of them are:**
id - Denotes the unique ID of an element in a page. Used for locating elements by using links, JavaScript, and more.
class - Denotes the CSS class of an element.
style - Denotes the CSS styles to apply to an element.

### CSS
**CSS stands for Cascading Style Sheets.**
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes..etc.
cascading means that a style applied to a parent element will also apply to all children elements within the parent. So, if you set the color of the body text to "blue", all headings, paragraphs, and other text elements within the body will also get the same color (unless you specify something else).

#### Using CSS
CSS can be added to HTML documents in 3 ways:

Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file

### steps

## Design your UI/UX

### Websites for ui/ux inspiration :
https://dribbble.com/
https://www.behance.net/
https://www.figma.com/community/
https://www.awwwards.com/
https://uxmovement.com/
https://www.uplabs.com/
https://ui8.net/
### Colors
https://coolors.co/
https://coolors.co/contrast-checker 
https://color.adobe.com/create/color-wheel 
http://www.gradients.io 
https://colorable.jxnblk.com
https://www.materialpalette.com
### Icons
https://feathericons.com
https://flatuicolors.com
https://icons8.com/
https://fontawesome.com/
https://www.securetech.com.au/font-awesome-icons.php
### Artworks
https://undraw.co 
https://www.freepik.com 
https://storyset.com/give
https://icons8.com/

## Implement your UI/UX using HTML, CSS
## Forms and validation
HTML form validation is a process of examining the HTML form page's contents to avoid errored-out data being sent to the server. This process is a significant step in developing HTML-based web applications, as it can easily improve the quality of the web page or the web application.
**1- the attribute “required”
2- input type=””**

## input types

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

## html components and tags (click next for other components and attributes)
https://www.w3schools.com/html/html_elements.asp