More Related Content
Similar to boot camp proximus.pptx
Similar to boot camp proximus.pptx (20)
Recently uploaded
Recently uploaded (20)
boot camp proximus.pptx
- 1. BOOT CAMP Web Development By : PROXIMUS
- 2. Project - Music App
- 3. How a webpage is designed?
- 4. Let’s see the architecture behind this Project! Html Source Code CSS Source Code
- 5. Lets understand the HTML tags and CSS used and implemented over this whole project.
- 6. What tags are used in header? • Icon Tag - < i class=“xyz” id=”abc” ></ i>, generally used for logo or particular Symbol •Head tag - <h1>Playlist</h1> used for Brand Name •Anchor Tag - <a href=“xyz.com”>My Library</a> used for links •<button type=“search”> </button> •Search Bar – Using div tag nd adding Css to give it shape. •Login Button - <button> ,<a>,<form>
- 7. •<header> - Defines a header for a document or a section •<nav> - Defines a set of navigation links •<section> - Defines a section in a document •<article> - Defines an independent, self- contained content •<aside> - Defines content aside from the content (like a sidebar) •<footer> - Defines a footer for a document or a section •<details> - Defines additional details that the user can open and close on demand •<summary> - Defines a heading for the <details> element Most basic tags that separates the parts of a Webpage
- 8. What can Main Content area contains! • <p> - paragraph contents • <img> -Hero Image or even for logo • <ul>,<li>- ordering the music playlist • <button>--to Play • <span> - better for inline styling
- 9. Lets explore some more Tags •<meta> - defines metadata about an HTML, page description, keywords, author, viewport settings. • <title> - tag defines the title of the page. •<nav> - contains 2,3 anchor tags displays it online •<div>- divides particular stuff in between body •<section> •<!– Comments-- Comments - this never displays. • <link> - for adding Stylesheets or Bootstrap or fontawsm links • <ul>,<ol>,<li> -
- 10. Some Formatting tags •<b>-bolds the text e.g.- bold •<i> - italics the text - Italic •<sup> - superscript e.g.- x² •<sub> - subscript e.g.- O3 •<caption> - captions the table box or a particular stuff •<span> - inline organization and styling. •<h1>, <h2>, <h3>, <h4>, <h5>, <h6> •<hr> - for creating Horizontal line. •<br> - breaking lines or jumping to next line.
- 11. CSS Basic Syntax 1. tagName { attribute1 : value1 ; attribute2 : value2; } 2. className { attribute1 : value1 ; attribute2 : value2; } 3. #idName { attribute1 : value1 ; attribute2 : value2; } Now , lets begin with CSS e.g.
- 12. •External CSS <link rel="stylesheet" href="mystyle.css"> •Internal CSS <head> <style> //styling code </style></head> •Inline CSS <p style="color:red;">This is a paragraph.</p> Three Ways to Insert CSS
- 13. CSS Box Properties •Color - gives color to text of box div { color: Green;} •Background-color - gives background color to text inside box div { background-color: Tomato;} •Padding margin div {padding-top: 50px; padding-right: 30px; padding-bottom- 50px; padding-left: 80px; } Or div {padding: 50px; •Border-width div { border: 1px solid red;} •Border-color div { border: 1px solid red;} •Border-style div { border: 1px solid red;} Style can also be groove, double, dashed, dotted bottom:
- 14. Common CSS Layout Properties •Width div{ width: 80px; } •Height div{ height: 70px; } •Float div{ Float : left; } •Clear div{ clear : right } •Border div { border: 2px solid black; } •Padding div{padding: 2px; } •Margin div{ margin: 2px; }
- 15. CSS Font •Font Families .p { font-family: Arial, Helvetica, sans-serif; } •Font style font-style: normal/italic/oblique/initial/inherit; •Font –weight p { font-weight: bold/ normal/oblique; } •Font-size p { font-size: 15px; }