Coding 101: Lesson 3 - Your First Website

Coding 101: Lesson 3 - Your First Website

3.0 Intro

Lesson Overview

  1. HTML and CSS overview
  2. HTML tags and structure
  3. CSS intro and properties
  4. Boxes and layouts
  5. 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

your first website

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

p7

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