---
# System prepended metadata

title: '**06-Front-End**'

---

# **06-Front-End**

# HTML, CSS, and JS refreshing
![](https://i.imgur.com/KBnaNCC.jpg)

## HTML
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content

## Simple Structure of a Web Page
```
<!DOCTYPE html>
<html>
<head>
<!-- Title of the page -->
<title>GIZ</title>
</head>
<body>

<h1>Hello, World</h1>
<p>This is Full Stack Web Development Bootcamp</p>

</body>
</html>

```
## HTML Tags
* Mostly Used Tags:
    * !Doctype
    * html
    * head
    * meta
    * link
    * body
    * h
    * p
    * em
    * b
    * small
    * anchor (a)
    * ul, ol, li
    * img
    * table
    * form
* Forms
* Semantic Tags



## CSS (Cascade Style Sheet)
CSS is the language we use to style an HTML document. It describes how HTML elements should be displayed.


example:
```
p {
  text-align: center;
  color: red;
}
```

## CSS basics
```
* {
    margin: 0;
    padding: 0;
}

body {
}

/*
    colors
*/

/*
    CSS Selectors
        .class
        #id
        *
        element (p, div)
        element,element
}
*/


/*
    Backgrounds
            background-color
                Opacity / Transparency
            background-image
            background-repeat
            background-position
            background-attachment
            Background Shorthand  : background: #ffffff url("img.png") no-repeat right top;

*/



/*
    Borders
        border-width
        Border Color
        Border Sides
        Shorthand Border
        Rounded Borders
            border-radius
*/





/*
    Outline
        outline-offset
*/


/*
    Margins
        inherit Value
*/



/*
    margin : top right bottom left
*/


/*
    Padding
*/

/*
    Height and Width
        max-height
*/


/*
    Text
        text color
        Text Alignment
        text-decoration
        Text Transformation
            text-transform: uppercase
        Text Spacing
            text-indent
        letter-spacing
        line-height
        word-spacing
*/


```

### CSS Box Model
![](https://i.imgur.com/7vzvqLF.gif)

```
div {
  width: 300px; /* Content */
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
```



### CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

* Simple selectors (select elements based on name, id, class)
* Combinator selectors (select elements based on a specific relationship between them)
    * Space (Descendant Selector)
    * > (Child Selector)
    * + (adjacent sibling selector)
    * ~ (Geenral adjacent selector)
* Pseudo-class selectors (select elements based on a certain state)
* Pseudo-elements selectors (select and style a part of an element)
* Attribute selectors (select elements based on an attribute or attribute value)



### CSS Box Sizing
The CSS box-sizing property allows us to include the padding and border in an element's total width and height.

Keep in mind:
Total Element Width = ContentWidth + padding + border
Total Element Height = ContentHeight + padding + border


Example (Without using CSS Box Sizing):
![](https://i.imgur.com/AZeLsfu.png)

```
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}
```
Example (With using CSS Box Sizing):
![](https://i.imgur.com/DLS0HEb.png)

```
.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  box-sizing: border-box;
}
```

### CSS Media Queries
It helps you to define different style rules for different media types. Media queries in CSS3 extended the CSS2 media types idea: Instead of looking for a type of device, they look at the capability of the device.

Media queries can be used to check many things, such as:

* width and height of the viewport
* width and height of the device
* orientation (is the tablet/phone in landscape or portrait mode?)
* resolution

**Media Query Syntax**
```
@media not|only mediatype and (expressions) {
  CSS-Code;
}
```

**CSS3 Media Types**
* all: Used for all media type devices
* print: Used for printers
* screen: Used for computer screens, tablets, smart-phones etc.
* speech: Used for screenreaders that "reads" the page out loud


Example:
```
@media screen and (min-width: 480px) {
  body {
    background-color: #00FF00;
  }
}
```


https://flexbox.tech/
### CSS Responsive (RWD)
Makes your web page look good on all devices.
* ViewPort
* Grid View
* Media Quries
* Use Framework

### CSS Flexbox
References:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

### CSS Positioning
https://www.w3schools.com/css/css_positioning.asp


## TASK Of Week
Landing Page
TO DO:
* Fork the repo:
https://github.com/ProgFadi/giz-07-landing-page.git
* Clone the forked repo to your local machine
* Resolve the task
* Commit your solution
* Push to GitHub
* Create a pull request

Resources:
- UI Design(XD File): 
https://drive.google.com/file/d/12xFxl29XPYFonTA8kgRgGl9fR0AzHn13/view?usp=sharing

- Images
https://drive.google.com/drive/folders/181oLx92F2IYN7qQSBXRCfr5aZYjb_VC6?usp=sharing