Understanding the gap i had with Design | > | Development

02 August, 2012

Learning HTML and CSS was so much fun. 


I spend 8 days and 67hrs, trying to understand how things work in coding language, i always facinates when people animate through coding rather than through animation software. The animation softwares  give exactly what you need, and everything so easy and laid it out for you. 

But, coding is completely different, if something is not working you’ll be scratching your head for hours trying to figure out where you misplaced the curly bracket or semi-colon and unclosed tags.  I did that a lot in this past one week. It helped me to NOT TO make those mistakes and check all the codes properly, even though i already wrote the code two pages back, i still prefer typing it again and not copy and paste, it helps me to memorize each and every syntax that holds the elements.

Iam happy i learned the basic things,  and hopefully this will fill the gap for me and think in a right perspective for my future interactions with the web developer.

And here are the stuffs i covered over these days.

<HTML basics>
 The styles for htlm basics are all inline, which has the style in the html code itself with a style tag. The browser first take this as a primary style then see the internal (which is inside the <head> tag) as a secondary and go to the external style sheet as a third.  

  • Understanding Bold and Italic text.
  • Making only a selected letter or word to Bold.
  • Underline all the text and selected text.
  • Understanding Superscript and Subscript.
  • Making a simple line-break
  • Making a horizontal line. 
  • Understaing the h1, h2, h3, h4, h5 and h6
  • Understand the  <p> tags, and where to use them.
  • Where and how to use the heading properly and where to use paragraph when needed.
  • Coloring your text with HEX value, rgb or color name.
  • Using < Acronym > to describe a text
  • Understanding block quotes and long quotes.
  • Adding a different font to your text.
  • Adding a background highlighter to your text.
  • Aligning the text to left or right.

Images and Links
  • Understanding how <a href> tag works
  • Making an <a href> tag with target in a new window.
  • Adding link to the images.
  • Adding alt="img.jpg" to the images, if the images couldn't load for some reason.
  • Adding width and height to the images.
  • Adding custom width and height

Margins and Paddings
  • Understanding left, right, top and bottom Margins
  • Understanding left, right, top and bottom Paddings.

  • Understanding HTML tables
  • Rows and Columns
  • Understanding cellspacing and cellpadding
  • Making table as Vertical or Horizontal
  • Adding a caption to the table.
  • Customizing Rows and Columns, one row with more than two to three columns and vice-versa.
  • Coloring your table
  • Removing the lines from the table.

  • How Unordered list works.
  • How Ordered list works
  • Adding a custom numbers, alphabets, characters or small images to your list instead of bullets.
  • Understanding Definition List.
  • Customizing your Bullets with disc, square or circle
  • Removing bullets and making it as horizontal menu with a page link.
  • Adding a Nested list with characters or symbols.

  • Creating a simple layouts
  • Aligning text and coloring them
  • Adding background to the layout
  • Adding different background to different cell
  • Adding margin and padding to the text for menus

I still haven't understood the proper way of how forums goes back and forth, i just understand the fields for now

  •  Creating Name and Password text and box.
  • Creating a radio button with fieldset
  • Creating a checkbox and dropdown list
  • Pre-select your dropdown list, i.e selecting an item from the list apart from the first one.
  • Creating a simple text region for messages
  • Adding a submit and reset button.

  • Creating a simple iframe with default link inside.
  • Adding a custom width and height for your iframe.
  • Making it without border.
  • Adding a text links outside the iframe, when you click on any link it will display it inside.

<CSS basics>

 Background Image
  • Creating an image as a background. (the default browser will tile your image)
  • Creating a custom color for your page background.
  • Creating an background image without repeating.
  • Creating an background image with repeating in one direction only.
  • Positioning your background image.
  • Fixing your background image in one place when you scroll.

Formatting your Text
  • Formatting your text colors.
  • Aligning your text based on the page.
  • Understanding font family and generic family.
  • Understanding different font weight
  • Adding different  font size to your text

  • Creating a link with mouse hover.
  • Changing the mouse-over color.
  • Adding a different state to your mouse-over :link, :visited, :hover, :active.
  • Making a mouse-over state with background color and different font size.

Table with CSS
  • Creating a tables though CSS Internal and not inline.
  • Removing the lines and adding a different color to your table.

Box Model
  • Creating a box around your text or image.
  • Customize your box with different width and height.
  • Controlling the thickness of the border of your box.
  • Adding different styles and color to your box border.
  • Adding different color or different styles to each side of the box.
  • Creating an outline around the box with different styles.
  • Making a rounded corner to your box

Padding and Marging with CSS
  • Creating a padding for your text or images.
  • Giving proper padding and margin without getting any glitch.
  • Grouping and nesting
  • Giving different height and width to your image.

Visibility and Display | Inline and Block
  • Understanding Visibility and Display property value.
  •  Understanding Inline and Block elements.
  • Converting inline as block element 
  • Converting block as inline element.

Positioning Elements
  • Understanding Positioning.
  • Difference between Fixed position, Relative position and Absolute position.
  • Using Relative position inside absolute.
  • Overlapping two elements

  • Adding a default scrollbar to the text
  • Controlling the overflow
  • Hiding the scrollbar
  • Adding a link or change color of the text.

Floating | Gallery
  • Floating an image around the text.
  • Positioning the image on the left or right.
  • Creating a image gallery
  • Creating an image gallery with border around the image.
  • Adding a text inbetween the image thumbnail.
  • Gallery with thumbnails floating on the left.
  • Gallery with thumbnails floating on the right.

  • Creating button menus.
  • Creating a button with links
  • Creating a buttons with padding and margin.
  • Creating a button with hover states
  • Creating a horizontal buttons from the list
  • Creating a vertical buttons

  • Understanding pseudo-class.
  • pseudo class for first child
  • pseudo class with all p elements
  • pseudo class with all i elements
  • :lang in pseudo-class
  • :lang for focus
  • pseudo class for first line
  • pseudo class for first letter
  • multiple pseudo class
  •  :before and :after elements

  •  Understanding horizontal and vertical navigations.
  • Adding background color to your navigation.
  • Understanding mouse over on a background color and block.
  • Inline and float
  • Inline and float with bullets
  • Inline and float without bullets

Opacity | Shadows
  •  Understanding Image Opacity values
  • Opacity for browser compatability
  • Image opacity with mouseover
  • Adding shadows to your image/text.
  • Adding opacity to your shadow
  • Adding inner shadow
  • Changing the color of your shadow
  • Blur the shadow
  • Having two or three shadow for one element
  • Controlling the X and Y value or the shadow.

<div> </div> | <p> </p> | <span> </span> | <br /> | <hr /> | <id=""> | <class="">
  • Understanding the opening tag and closing tag
  • Understanding self closing tags
  • Understanding id and class
  • Understanding span tag
  • Understanding the paragraph tag
  • Understanding the space around the tags like paragraph and headings.

  • Understanding a proper DOCTYPE
  • Adding a favicon icon to your page
  • Understanding the html, head, body, style... tags
  • Understanding XML, HTML and XHTML
  • Understanding Validation 
  • Understanding the value of JPG, PNG and GIF
  • Understanding the optimization 
  • Proper meta tags
  • Checking on major browser compatibility for proper page alignments and fonts.
  • Understanding a proper folder structure
  • Understanding Wrapper, Header and Footer

These are the very basic of html and css i was able to cover in 8 days, there's still lot more and i haven't touched them, Java Script, asp, php, jquery, agax, html5... Since i needed a base foundation for understanding of codes and linking them and adding effects to the elements are my primary focus right now.

And a Huge thanks goes to these links:

Nemesis Design - http://nemesisdesign.net/

No comments:

Post a Comment