Coding 101: Lesson 3 - Your First Website Coding 101: Lesson 3 - Your First Website 3.0 Intro Lesson Overview HTML and CSS overview HTML tags and structure CSS intro and properties Boxes and layouts Mobile First Design and dynamic formatting Projects Overview Coding 101: Lesson 3 - Your First Website 3.1 HTML and CSS overview HTML is used to create the structure of your webpage (e.g., like the bones in your body) CSS is used to create the formatting and style of your webpage (e.g., like the skin of your body) Tags - HTML documents use to tell the browser how to format content. Pictures need tags, texts need tags, the entire website is made up of tags. Everything must be sandwiched within the tags. In the below code, <p> is the opening tag and </p> closing tag and this is used for a paragraph. You can write the content of your paragraph in between the tags. We can add some style to this pargraph using CSS in a separate .css file. We can make the font size 12 We can be more specific by using classes to distringuish between different paragraph lines. In HTML, Notes: Opening tag is <p> Attribute name is class and attribute value is ”greetings” Closing tag </p> We can then add some CSS to make all greetings green font and all feelings blue font Notes: Selector is .greetings Declaration block is {color:green;} Property name is color and property value is green Then link your html file to your CSS file using this code in your html file Project 3.1. Hello World! Try to create this before going to the next slide Coding 101: Lesson 3 - Your First Website 3.2 HTML tags and structure Key HTML tags and structure Other commonly used HTML tags and boilerplate code Project 3.2. Gigantic Candy Company Webpage (Step 1 of 3) Create a page that looks similar to following site Remember to use Separate css and html files Different types of HTML tags to break up and structure the site (e.g., <html>, <h1>, etc.) Starter code to avoid manually typing Coding 101: Lesson 3 - Your First Website 3.3 CSS intro and properties Cascading Style Sheets and how to use CSS = Cascading Style Sheet. It means that styles flow or cascades in order of what came last and what is most specific to that HTML element Source Order – whatever came last overrides what came before it Specificity Order – whatever is more specific overrides other style commands regardless of the Source Order (external less than specific than internal; p span is more specific than span) Inheritance – A child element will inherit any applicable styles from its parent HTML element Three ways to add CSS code: Using separate CSS files (Preferred method): External Style Sheets allow you to put all of your CSS code in one place and apply it to all of the pages in your website. Need to add below code between <head> tags of html <link href="normalize.css" rel="stylesheet"> Internal CSS: <style></style> For small projects you can use this to denote CSS is being used in between the tags; put inside your <head> file within HTML and add CSS between the style tags InLine / Embedded CSS: allows you to impact just one paragraph; not best practice to use. <p style=”color: green;”> fill in </p> Definitions Selector – this is the element that you want to change; for example, pargraphs in the following p {color:purple;} Property – what you want to change about your elements; for example, color in above example Value – what you want to change you element property too; for example, purple Detailed properties Font Properties font-family: “georgia”, “serif”; /* If Georgia font does not load, serif is back up */ color:blue; color:#630600; color: rgba(255,255,255,1); /* 0 to 255 for R,G, B and 0 to 1 for A transparency */ font-weight: bold; font-weight: 600; font-style: italic; font-size:16px; text-transform: uppercase; text-decoration: underline; font:bold 14px Tahoma; text-indent:25px; text-align: center; Background properties background-color: rgba(0,0,0,0.5); background-image: url("http:dash.ga.co/assets/anna-bg.png"); background-image: url(“../images/header_bg.jpg”); /* select image up one folder */ background-size: cover; background-repeat: no-repeat; background-repeat: repeat-x; /* Left Right Tile */ background-repeat: repeat-y; /* UpDown tile */ background-position: 10px 60px; /* Change starting position */ background-position: 50% 60px; /* Change starting position */ Floating properties img {float:right;} /* Element float images to right or left or none */ p {clear:none;} /* Allows floating elements on both sides; This is default */ p {clear: left;} /* No floating elements allowed on left side; can use right or both */ p {clear: inherit;} /* Element inherits the clear value of its parent */ HTML element properties max-width: 500; /* Allows website to be responsive & have 500 max width */ width:60%; height:5%; Other properties ol { list-style-image:url(checkmark.jpg); } /* Custom Bullet points */ Google Fonts: Allows you to easily import different types of fonts Go to Google Fonts - https://fonts.google.com/ Click the plus sign on the fonts you want to add Click the minus sign next to the “family selected” tab There will be instructions on what code to add to the HTML section and the CSS code CSS Selectors p { } /* Type - selects all elements of specified type (e.g., p elements) */ * { } /* Universal - selects all elements in html file not selected by other selectors */ #myID { } /* ID - are supposed to singular and unique to allow you format a specific element */ .class { } /* Class – similar to ID but for formatting multiple elements at same time */ /* Note HTML elements can have multiple classes */ h1, h2, #myID { } /* Compound - format multiple selectors at same time body article p { } /* Descendent - element that is nested inside of specified parent element */ a:link /* Pseudo class - links in their default state before visitor has interacted with them */ a:visited /* Links after user has already clicked on them and is visiting that page again */ a:hover /* Links when the user is hovering their mouse over the link */ a:active /* Links for only moment when mouse button is pressed when clicking on the link */ Project 3.2. Gigantic Candy Company – 2 pages (Step 2 of 3) Create a simple two page web page with links between the two of them First page is a home page; Second page is an about us page Coding 101: Lesson 3 - Your First Website 3.4 Box model CSS Box Model All HTML elements can be thought of as boxes within a CSS box wrapping around each element. The box has four dimensions: margin, border, padding, and actual content. Margin: distance between the element’s box and what is around it Border: thickness of the border Padding: space between the content and the border Content: size of the content of the element Margin: distance between the element’s box and what is around it Margin: 40px 0px 0px 0px; /* 40px on top, 0 on right, 0 on bottom, 0 on left */ Margin: 0 auto; /* Zero margin on top and bottom; auto margin on left/right */ Margin-top:40px; Border: thickness of the border border-width: 5px; /* sets border width to 5px */ border: solid; /* border style */ border-color: black; border-top-color: green; border: 2px dashed; /* border width and border style */ border: 10px ridge rgba(0,0,0,.5); /* border width, style and color */ border-radius:12px; /* makes the borders curved rather than square */ border-radius:20%; /* makes the borders curved rather than square */ Padding: space between the content and the border padding:10px; puts 10px /* padding on all sides */ padding:0px 10px 0px 10px; /* Padding on top, right, bottom, left (i.e. it goes clockwise) */ padding-top:20px; padding:0px 10px; /* Padding on vertical, horizontal */ Block vs Inline display:block; /* Makes an inline element act like an block element */ display:inline-block; /* Flows like inline element but can use properties of block element */ display:none; /* hides the element */ text-align: center; /* only works on block level elements!! Not in-line! */ Block-level elements begin on new lines, which means that the “boxes” for block-level elements extend the full width of the available space (even if the content doesn’t) In-line elements do not begin on new lines. Width and height have no impact on in-line elements (must wrap them in a block-level element). Padding, border, and margin don’t vertically push away other elements. Links and images are in line are inline elements. display: inline; /* Makes a block element act like an inline element */ Positioning and sizing Content box vs. border box sizing box-sizing: “content-box”; /* specifies size of content box (margin, border, padding added on top of content); default setting */ box-sizing: “border-box”; /* specifies size of entire element (margin + border + padding + content); good to use to avoid mistakes */ Absolute vs Relative vs. Fixed Layout typesNote: You should not chose one of the below layouts for your entire website; you should use a combination of the below layouts Absolute positioning allows you to control exactly where div is based on top left 0 position # div1 {position:absolute; top:2px; left:2px; } Fixed positioning is similar to absolute positioning but doesn’t move when user scrolls #div1 {position:fixed; top:2px; left:2px; } Relative positioning instead of using the origin and then moving it absolutely, it starts at where top left position of element would be without adjustments; this can be tricky to use # div1 {position:relative; top:2px; left:2px; } Flex Boxes Flex box layouts allow you to have the size of your boxes dynamically change based on the size of the browser or screen being used to view your site In HTML, you can set up a main section with two div’s inside In CSS, main {display:flex;} changes main element to a flex container and all elements underneath it (i.e. div1, div2) to a flex items Project 3.2. Gigantic Candy Company – Flex Box (Step 3 of 3) Boxes should expand and shrink as the size of the browser window changes Project 3.3. CSS Puzzles Quiz…Figure out what the color of each puzzle text will be! Project 3.4. Winston’s Landing Page Create a page that looks similar to following site Project 3.5. Pisco Sour Recipe - Two Column Page Create a page that looks similar to following site Project 3.6. Mentor Finder Home Page Create a page that looks similar to following site Coding 101: Lesson 3 - Your First Website 3.5 Mobile First Design and dynamic formatting Responsive web designis about automatically adjusting the look and feel of a website based on the screen size and the device being used (e.g., mobile vs. desktop) instead of having to create two separate websites (one for mobile and one for desktop). 3 types of layouts: Fixed – fixed pixel width container; can create “pixel perfect” design Flexible – scales based on size of screen size; not optimized for all screens though Responsive – combo of media query and flexible boxes so that you can change the website layout if the screen is smaller; creates breakpoints at different screen sizes “Mobile-First” Design is creating your website to look good on mobile first (instead of desktop, which is what developers used to do) and then use media queries to change formatting when screen size is larger Benefit: This makes you design for the mobile experience first because it is most important Benefit: it allows mobile devices to only load up the necessary code!!! Which matters more for load speeds on mobile than on desktop Media Query: Allows you to change format of different items based on screen size (measured in pixels). Below code sets background to red when screen size is more than 480px wide: @media screen and (min-width: 480px) {body {background: red;}} NOTE: NEED TO ADD VIEWPORT META TAG TO <HEAD> to make media query work! Common media query “breakpoints” Min 480px, 768px, 992px, 1200px…(Mobile first; do this) Max 1200px, 992, 768, 480px (Non-mobile first; don’t do this!) Em…responsive sizing: Em is a CSS relative unit for font-siz; 1em = 100% of the font-size of the parent element (default is 16px if not defined) letter-spacing:0.09em; /* em inherits either default font size or font size of parent; 1em = parent size; 2em = 2x parent’s size */ margin: 0 0 1.5em 0; font-size: 2em; overflow:hidden; /* Hide content that overflows (e.g., nav bar) */ Bootstrap is an open source webframework and library that allows you to create websites quickly! Project 3.7. Mobile First Create a page that looks similar to following site Lesson Recap HTML and CSS overview HTML tags and structure CSS intro and properties Boxes and layouts Mobile First Design and dynamic formatting Project Recap Homework Create the following programs and submit it to coding101@upriseuniversity.com before moving to the next lesson: Restaurant Homepage: Create a website for your favorite restaurant. The site should include a landing page, about us page, and a menu page Build your own site: Get creative and build something that is interesting to you! Prior Lesson Next Lesson