# **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