Karen Shay West's Home Page

Making and Deploying a Web Site

• HTML: webpage structure


• css: cascading style sheets, styles HTML elements


• HTML ELEMENTS:
  • h1 - h6: text headings. h1 largest; h6 smallest
  
  
  • p: non-heading text, bodies of articles, descriptions
  
  
  • a: anchor, add links to other webpages.
  
  
  • Anchor elements typically have an href attribute
  
  
  • img: image to a webpage
  
  
  • video: videos to a webpage
  
  
  • unordered list: ul with li elements
  
  
  • div: organizes HTML elements into groups, can have class attribute
  
  
  • metadata tags: about a webpage
  
  
  • CSS: styles websites. Colors, fonts, page layouts for site.
  
  
  • CSS Selectors: HTML elements to style
  
  
  • Class selectors: classes of HTML elements
  
  
  • id selectors: styles HTML element that have id attribute.
  
  
  • External Stylesheet: CSS file that styles an HTML file externally via the HTML link element
  
  
• CSS PROPERTIES
  • font-family: font for CSS selector
  
  
  • color: font color for CSS selector
  
  
  • font-size: font size for text
  
  
  • background-image: background image for selector
  
  
• CSS:
  • border: outline of HTML page element
  
  
  • padding: space between element's content and border
  
  
  • margin: space between HTML element and nearest element(s).
  
  
  • display: how selected element arranged in relation to other HTML elements on the page
  
  
  • inline: same line as neighboring elements
  
  
  • flex: align multiple page elements vertically or horizontally
  
  
  • float: left or right of neighboring elements
  
  
  • position: exact locations on a webpage.
  
  
  • CSS Framework: Set of pre-written CSS rules designed to help you build webpages faster
  
  
• Bootstrap Grid:
  • 12 equal-sized columns
  
  
  • can be utilized via Bootstrap classes
  
  
  • quick, reliable layouts
  
  
  • BOOTSTRAP CLASSES:
    • row: HTML elements in rows
    
    
    • useful for headers/navigation menus, main feature sections, supporting content sections, footers.
    
    
    • jumbotron: create large showcase sections featuring important content.
    
    
    • col-sm-*: specified number of columns on the Bootstrap grid.
    
    
    • text-right: Bootstrap class used to orient text to the right side of the webpage.
    
    
    • btn btn primary: Bootstrap class used to style page elements as buttons.
    
    
• Future Plans are to do the following exercises to learn more about web programming languages:
  • Project exercise to learn HTML, CSS, Python and or PHP and review SQL.
  
  
  • A project exercise to learn Javascript, Ajax and review Json.