Skip to content

Instantly share code, notes, and snippets.

@Cdale3
Created March 13, 2017 21:44
Show Gist options
  • Save Cdale3/0d7c4e8afaace317dff44dd7d30dab71 to your computer and use it in GitHub Desktop.
Save Cdale3/0d7c4e8afaace317dff44dd7d30dab71 to your computer and use it in GitHub Desktop.
HTML & CSS Basics
HTML Skeleton   -- the basic structure that is implemented when you type html and then tab over. This has a head and body element already included and ready for you to easily start working on HTML code.
Head -- Head contains data that is present but doesn't necessarily show up on the web page (the body element is used for that). The title is the biggest example of this. I believe it shows up in the window tab of a page, but doesn't show anywhere actually on the page, unless there was a title element inside of the body element.
Body -- the main display of our content from html. What is in the body element will show up on the page. Links, lists, text...etc
Semantic Tags -- From the web: "A semantic element clearly describes its meaning to both the browser and the developer."
So a footer should be at the bottom, header should be at the top. Does this mean that it has no special properties to it, other than the fact that when you read it you know what it is? When I first heard of semantic tags, that was the way I interpreted it. After googling this questions for clarification that is what I got back.
Non-Semantic Tags -- Tags that are not clear in their purpose or design just by reading the tag. <div> <span> <body>, I wasn't sure on body, cause it seemed to me to be similar to article, but I guess when you define article more it becomes clear that it was specifically written on a topic and by someone, whereas body doesn't tell you what it is.
CSS
Selectors -- your basic selectors will change the style of any given elements that are labled the same as the selector given. P will result in all <p>.
Class Selectors -- Very similar to our basic selectors, instead of by the element it looks for the class specified, changes only those classes where ever they are found.
ID selectors -- Same as the above two, ID is the paramter targeted. All id's of the same type will be affected.
Box Model -- is used to describe the design and layout of your page. It is essentially a box that wraps around every HTML element. Consisting of borders, paddding and then content. It reminds me a lot of the structure of an academic/professional essay.
Display Property -- specifies the type of box ysed for an HTML element.
Floats -- Will change the way pieces of code are lined up, instead of the normal flow, something may be put in a different position. Changing the composition of the file without changing the overall structure of our file.
Clearfix -- A clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. The clearfix is a way to combat the zero-height container problem for floated elements. While this makes sense in reading it, I'm not sure exactly what child elements are, which makes this harder to cement in my understanding. Clarifcation would be appreciated. Cause it's not.... clear enough :P
Detour: Lorem Ipsum -- a set of example text to be used.. for some purpose.. like dummy text?
@Carmer
Copy link

Carmer commented Mar 14, 2017

Yes - like dummy text

Going through the spaces, commas and dots section would be helpful too.. Good work

@bethsebian
Copy link

Chris -- if you save this as a .markdown it will be a little easier to read.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment