Allison A Guthrie Logo

notes so far

html/css

(psst! this page will be a contact page, just as soon as I learn how to do something with the input received! ;)

html

HTML markup comprises the < /> tags used for a computer to render the information that we are trying to tell it.

Inline vs Block

A way to remember the difference is to imagine that block elements have invisible blocks blocks around them, where inline just keeps going
*images are inline elements

Things to remember (new knowledge):

\n is how programmers represent a 'newline' character in many common programming languages.

Remember: I am not just writing code for the computer to interpret, but for a human to understand as well.

There should only be one h1 tag; the rest should be lower h2, h3, h4, h5, h6 headings.

Start to build the skill of looking at websites as just a bunch of boxes. Try to determine how they are broken up, and aim to find the most efficient way to do this.

Using divs helps to proved structure by grouping related content in logical ways; it can also make modifiying a doc easier.

Remember the principle of DRY programming: Don't repeat yourself

Note: The Udacity Front-End Web Developer Style Guide recommends omitting type="text/css" from the tag. The correct link tag coding is: link rel="stylesheet" href="style.css"

MDN list of attributes available for style

validation sites:

To verify HTML


To verify CSS

css
  • Style:This word can refer to many things and so it can be confusing. It can refer to:
  • The HTML element.
  • The HTML attribute. For example:
    this text would be orange
  • The general look of a web page. For example: "I like that site's style."
  • A verb. For example: "I'm making progress on my page. The structure is all done but now I have to style it." Rule: a line of CSS code describing the value that a certain attribute should take.
  • Property: The property you want to change.
  • Value: The value that you want to assign to the attribute.
  • Selector: The name that you use to in order to target the elements that are assigned to a class or id attribute in the HTML.
  • Class: A class refers to a group of elements that can be styled together. Class names should not contain periods or any other punctuation marks such as class="1.1"
  • ID: ID's are unique identifiers that uniquely identifies an element in HTML. A good explanation of display: flex
code, test, refine
  1. Start by looking for natural boxes
  2. Look for repeated styles and semantic elements
  3. Write your html
  4. Apply styles--from biggest to smallest
  5. Fix things