Front End Development Reference Site:

Page Flow

Page Flow refers to the default browser settings for displaying HTML5 elements without additional use of CSS stylesheets.

reset.css

Reset.CSS or CSS Reset is the action of resetting those default styles in the existing HTML5 Page Flow to baseline values so you avoid cross-browser display differences due to built-in settings.

This avoids browser inconsistencies, but there are rules to using it effectively. You must decide exactly how to reset your styles before you can reset them. Then, the CSS reset must be the first things the browser sees. You will need a separate CSS document for the reset. You should avoid using the universal selector reset (*) as a one-size-fits all fix. Do not have redundancies in the CSS reset and later declarations.

pseudo-elements

CSS pseudo-elements are used to add special effects to some selectors. The "first-line" pseudo-element is used to add a special style to the first line of a text. The "first-line" pseudo-element can only be used with block-level elements. The following properties apply to the "first-line" pseudo-element:

• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

The "first-letter" pseudo-element is used to add a special style to the first letter of a text. The "first-letter" pseudo-element can only be used with block-level elements. The following properties apply to the "first-letter" pseudo- element:

• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if "float" is "none")
• text-transform
• line-height
• float
• clear

Pseudo-elements can be combined with CSS classes. Several pseudo-elements can also be combined. The ":before" pseudo-element can be used to insert some content before the content of an element. The ":after" pseudo-element can be used to insert some content after the content of an element.

pseudo-classes

CSS pseudo-classes are used to add special effects to some selectors. CSS classes can also be used with pseudo-classes. Links can be displayed in different ways in a CSS-supporting browser. a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!! a:active MUST come after a:hover in the CSS definition in order to be effective!! Pseudo-class names are not case-sensitive. Pseudo-classes can be combined with CSS classes. The :first-child pseudo-class matches a specified element that is the first child of another element. For :first-child to work in IE8 and earlier, a DOCTYPE must be declared. The :lang pseudo-class allows you to define special rules for different languages.

float collapse

One of the more bewildering things about working with floats is how they can affect the element that contains them (their "parent" element). If this parent element contained nothing but floated elements, the height of it would literally collapse to nothing. This isn't always obvious if the parent doesn't contain any visually noticeable background, but it is important to be aware of. f the block element on top where to have automatically expanded to accomodate the floated element, we would have an unnatural spacing break in the flow of text between paragraphs, with no practical way of fixing it. If this were the case, us designers would be complaining much harder about this behavior than we do about collapsing. Collapsing almost always needs to be dealt with to prevent strange layout and cross-browser problems. We fix it by clearing the float after the floated elements in the container but before the close of the container.

CSS BOX MODEL

The first line of this article was very helpful because it explained what CSS stands for: Cascading Style Sheet; and that you can separate your markup in HTML docs from your rendering details in your CSS docs, and they can then look like anything you want. I know we already know that info, but this is the first article I've found that bothered to explain something so fundamental that matters so much. Kudos to the author. We then move onto the base of the CSS styling, which he believes is misunderstood, the Box-Model. Very simply, the box model defines the space around the element, which is rectangular, and defines that space with three properties: 1) border 2) padding and 3) margin. The box goes from inside to out in that order.

Starting from the inside, Border, is the effective outer limit of the element itself. The border can be visible or invisible and can be modified via line type, color and width to create a unique look to the element. Moving outward, the next option is Padding. The padding goes between the border and the content of the element. If there isn't a border that is visible the padding will be appear as the total space of the element. Backgrounds of the element will appear here, in the padding. Finally, the Margin is the last piece of each element. The margin stretches from the outer edge of the border to any neighboring elements. The margin is transparent and will not display any background properties, but but acts as a page margin should, keeping space between elements.

Both margins and padding are able to use the CSS shortcuts and modify all four values at one time, in one line of code, with the clockwise input of: top, right, bottom, left. This can be measured in percentages or pixels. It is important to note that padding and margins are ADDITIVE, meaning they combine to create a final position, which can get messy. Also, margins have a unique phenomenon where they can collapse if there are two adjacent elements with top or bottom margins that touch, regardless of the CSS. Finally, we look at negative margins which can be used to move an element up and over or into and over another neighboring element. This can also be used to create multi-column lists, and drop shadows, etc.

STATIC POSITION

The topic was Static Position, but this first article also covers more about Positioning, so I also used the second article for information. They both explain that static positioning is the default setting for HTML elements. This means it is positioned on the normal page flow, and take up as much space as they need. It’s a default so you don’t have to include this in the CSS style sheet, and if you don’t change the positioning, the CSS won’t have any effect if you change the top/right/bottom/left.

Static positioned elements are best used for simple, single-column layouts. This is when each element will sit on top of the next one. But if you want to create a new coordinate system for any children of the element, you cannot. There are major differences between how boxes are laid out in block versus inline boxes. To overcome Static positioning style, you need to use a combination of Relative and Absolute positioning.

CHARACTER ENCODING

Characters are defined as the letters, numbers, and symbols, represented in numerical values so a computer browser can understand them. A web developer must declare the encoding for the browser in the HTML, so they are represented/rendered correctly. Replacing the special characters with ASCII is more efficient than upgrading the character encoding. If you do not use the correct encoding, your webpage content will not display correctly across all browsers.

Search engines can also become confused and possible be unable to read the special character encoding if the designer has incorrectly declared it. Using the proper code is going to affect the usability of the website/page. When you do not use the correct encoding, you will see ugly squares or question marks in your site, which are going to inhibit the impact the site/content can have. You can have a character display correctly in a preview without the correct encoding, but it won’t appear as it should, across all browsers, unless you update the information correctly in the HTML.

RELATIVE POSITION

There are two types of positioning types in CSS: absolute and relative. To understand relative, you must also understand absolute. To position something absolutely, you would tell the CSS what type of positioning you are doing and then push it out from the sides it will be closest too. Absolute position makes it possible to have overlapping elements on your page.

Relative position in CSS modifies the location of the object from where it would have gone, before you changed it. This is slightly counter-intuitive because if you want to move something left, you would actually modify the right side to push the element away from the right side. Relative position makes it impossible to have overlapping elements on your page, as all position are relative to the original position as well as other elements in the page flow.

You can override inherited positioning to make the element part of the page flow again by setting the position to static.

CSS3 MEASUREMENT UNITS

In CSS3, we can use units of measurement to style our content. A length is a measurement comprising a numeric value and a unit only—whitespace can’t appear between the number and the unit. If the numeric value is 0, the unit can be omitted (after all, zero pixels is the same measurement as zero millimeters). But if the value isn’t zero, the unit must be specified.

With units of size, there are two categories to choose from: absolute and relative. Absolute units are: inches, centimeters, millimeters, points, and picas. Relative units are: em, ex (x-height), and pixels. Percentage is another new unit of measure, it would be considered a very relative unit of measurement.

Absolute units are representative of a certain real value in the physical world. They correspond to standards. Output, like printing, which has an actual size, deals in Absolute units. Relative units are representative of an uncertain value in the virtual world. They do not correspond to standards. Screen displays, like mobile apps and websites, which have a relative size depending on the browser, deals in Relative units.

FONT SIZING

There are four units of measurement for CSS font styling inside a browser window. They are: Ems, Pixels, Points, and Percentages. Because there are different options, you must choose your unit of measurement based off the project you are programming. For example, a desktop browser versus a mobile browser will display your content differently if you don’t use the right unit of measurement.

Em—an em is equal to the current font size: meaing if the current font size is 14pt, an em is equal to 14pt. Em is scalable so you can multiply the size by a factor of n by writing nem, eg. 4em is 4xem or 4 times the current font size. This scalability make em very popular in web-design.

Pixels—pixels are a fixed size unit used for screen media, tv’s, phones, and monitors. A pixel is 1 dot on the screen. Pixels are not scalable so you cannot increase upwards for visually-impaired viewers or decrease downwards for mobile devices. Pixels are very popular for a perfect representation for sites on web browsers.

Points—points are used in traditional print media. A point is 1/72 of an inch. Points are not scalable, like pixels, and cannot get bigger or smaller to suit the viewers needs. Points are popular for output devices

Percentages—percentages are like ems but with a couple differences. The current font size is 100%. With a percentage, you are able to scale, like em, and is therefore another preferred unit for web document text.

It is easy to use pixels and points, but it is better to use ems and percentages to ensure your content will be displayed correctly on all browsers by all users.

CSS SPRITES

Sprites are named after their use in computer graphics, and in video gaming, when they were used to combine multiple smaller 2D and 3D images into 1 larger image, and were said to "haunt" the display, but not actually exist in memory. They weren't used much in web design until the early 2000's when they were identified as a better alternative to the JavaScript options previously used. The main difference between the Sprites and JavaScript is that the Sprites only load once, with the master page, whereas JavaScript loads HTML multiple times which can result in a detectable flickering or longer loading times. Ultimately, the project determines which option you choose but there are several benefits from the use of Sprites versus JavaScript.

The best use for a Sprite is to reduce the server load, and reduce the loading time. This is especially good for sites with high-traffic, by expediting page delivery and saving money on bandwidth used. They also work very well in a pixel based design setting and are especially good for use with Navigation, Logos, Lines, RSS Icons, Buttons, and repeating Background Images, to name a few. Major sites like Amazon, Apple, YouTube, CNN, Yahoo, Facebook, and Google all use Sprites regularly. There are some instances when Sprites are not the best solution. They are not as popular a choice for elastic em-based designs and they aren't great for hosting content which is likely to change frequently. It also doesn't benefit a designer to convert large images and graphics or other image files into Sprites.

Google, and other search engines, has added the page loading time into it's results algorithm, which is why Sprites are getting more and more popular.

GRID 960

960 grid is a framework for design so it looks good in all monitor browser windows. Grids are used because they give the design flexibility between elements, can make the design more useful and legible, reduce CSS coding errors, and can eliminate the need for HTML tables. Grids can be used as a wireframe for planning, shorten the development plan in future projects, encourage correlation between separate page elements, and make it easier to embed images, text and other visual aesthetics.

The use of grids can help streamline the design process because it defines exact measurements. This grid also helps reduce the time spent in development by using a pre-made code. The grid is used as a common language between designers and the coding team. This grid is useful in the design and coding process by containing all the site elements into a 960px grid, and then dividing that grid by either 12 or 16 equally sized columns. You can choose to alternate the width sizes but the grid is designed to be evenly spaced. 960 is thought to be best suited as most compatible across all browser platforms.

There are other grid systems available for use which are similar in concept but differ in the details. Blueprint uses a 950px grid and 24 columns, YUI uses six preset templates and four preset widths, YAML requires a license to use it with other CMSes, Grid Designer uses it’s own classes, Boilerplate is a stripped down framework created by a Blueprint designer, and Sparkl uses 1-3 column pages. 960 grid is considered the most flexible framework to use, although it only works with 2 column choices.

ABSOLUTE VS RELATIVE URLS

First off, a URL is short for a Uniform Resource Locator, which is crucial to know when you want to understand what they do and how they work. It tells the Browser where to find what the User wants. To do that, there are two types of URLs, Absolute and Relative. The main difference between them is that the first is a complete address that points directly to a file or resource and the second contains an incomplete address, pointing to a file or resource, relative to the current file or resource. This means that there is more information in the Absolute URL and less in the Relative URL.

Because they have less information, Relative URLs are shorter and easier to work with than Absolute. But, Relative URLs are limited by the fact that they can only be used to refer to links which are present on the same server as the page referring to them. This is sometimes not effective, and the User gets a "404-not found message". Absolute URLs will be in the format of "http://www.mydomain/directory/pages.html". Relative URLs will be in the format of "directory/pages.html." The argument for Relative URLs versus Absolute URLs is that it might be faster to go with the first option but it might be more precise to go with the second option. Ultimately, it depends on the designer and coder to determine if you prefer to work quickly with relative or precisely with absolute.

"FRONT END DEVELOPMENT BEST PRACTICES"

There are several suggestions for best practices, including

• Communication with the Designer
• Communication is key. You can save a load of time after the fact by getting things done correctly the first time. Well-documented instructions and interactions with the designer can be a quick time saver. Help them understand how their design might show on different browsers and devices. Help them understand how to leverage repeating backgrounds and tiled patterns to achieve great designs with minimum image file sizes. Even showing examples of existing code or alternative examples if the designs look to complex for the allotted scope of the project.
• Slices and CSS Spriting
• Slicing up a finished mockup of a site used to be simply cutting it out into large sections and placing it into either a table format or a very basic div structure. That was the old way of doing things. These days, we have so much more freedom of creation by stacking and z-indexing to accomplish designs with real complexity. With that comes the ease to change small subtle things that come up that weren’t thoroughly considered.Make one large “master” image with every user interface piece and let the magic of CSS do the rest. This is a great way to avoid a high amount of requests to servers, delays on hovers elements, and not having to deal with potentially hundreds of images throughout the website.
• Correct Syntax Makes Beautiful Code
• This seems like a no brainer, but you will not believe how many people use incorrect and depreciated code just because it’s faster. Inline styles and sporadic break tags can be some of the biggest offenders that make code incredibly messy. Together with correct IDs and class placement, you shouldn’t need to use inline styles anywhere on your site. Break tags used for major layouts should essentially never be used as things like pre-formatted div tags and paragraph tags do the exact same thing. They are ok to use for a quick format to text, but don’t get used to them. Use wisely.
• Testing Your Site in Different Environments
• Another thing that seems unnecessary and time consuming is making sure that your site keeps the same look across all types of environments. Don’t ever assume that everyone is using your exact browser on your exact machine. There are many things you have to keep into consideration when developing so your site reaches the most people possible.
• Future of the Site
• As you are developing a website, consider the website as a whole for future changes and updates. Nothing is worse than adding and modifying hacked together html markup; dumping CSS rules wherever you please in a CSS file may seem fast at the moment, but will make updating them later a nightmare.
• Explain which div you’re closing
• Divs are cleaners than tables, but without proper code organization, it can be as (or even sometimes more) messy as table based code. Using indentation is a good start. But a tip that can definitely make you save lot of time is to comment every div tag you’re closing.
• Use a CSS reset
• Unless you’re a beginner or if you were on vacation on a desert island for the last 6 years, you might already know how useful a CSS reset it. Because by default, browsers don’t apply the same default styling to HTML elements, a CSS reset will ensure that all element have no particular style so you can define your own without the risk of many cross-browser rendering issues.
• Don’t use @import
• CSS files can be included using the @import directive. This can be useful when, for example, you want to include a stylesheet into another. While it works, the @import directive is much slower than the other way to include stylesheets into a html document.
• “Smush” your images
• You can save up to 70% of the file size, while keeping the original quality. This isn’t a problem when you don’t have to care about your site’s bandwidth.
• Don’t mix CSS with HTML
• As a markup language, the right use of HTML is to organize documents by defining a header, a footer, lists, blockquotes, etc. Some time ago, front-end web developers often used now deprecated HTML attributes to style a particular element. Nowadays, the style attribute allows developers to insert CSS directly into a html document. This is very useful for testing or when you’re in a hurry. But the style attribute is bad practice, that goes completely against the CSS philosophy.
• Don’t mix Javascript with HTML
• Just like mixing your html code with css is bad practice, you shouldn’t use any Javascript in your html documents. This may seems a bit harder at first, especially for beginners; but it is definitely not, and it will keep your html document clean.
• Use conditional comments
• You know it, IE sucks, and some clients suck even more by requiring you to create webpages which are compatible with this obsolete browser.
• Place Javascript file at the bottom
• A popular practice of the late 90′s/early 2000′s was to place Javascript files within the head tags. The problem is that your javascript files will be loaded first, and consequently your content will be loaded after. By placing Javascript files at the bottom of your documents, you’ll ensure that JS files will be loaded only when the content has been properly displayed.
• Use HTML semantically
• HTML is not a programming language. It is a markup language, used to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, and more. Among other things, it is important to use html element semantically.
• Test WHILE you build to avoid cross-browser issues
• As you know, cross-browser issues are a major problem for front-end developers, especially due to IE. If you test your documents on Firefox/IE/Chrome while your writing it, cross-browser rendering problems will be much easier to fix.

HTML5 ELEMENTS

The internet has changed a lot since HTML 4.01 became a standard in 1999. Today, some elements in HTML 4.01 are obsolete, never used, or not used the way they were intended to. These elements are deleted or re-written in HTML5. To better handle today's internet use, HTML5 also includes new elements for better structure, drawing, media content, and better form handling.

New Markup Items. New elements for better structure:

• article
• aside
• bdi
• command
• details
• summary
• figure
• figcaption
• footer
• header
• hgroup
• mark
• meter
• nav
• progress
• ruby
• rt
• rp
• section
• time
• wbr

New Media Elements. HTML5 provides a new standard for media content:

• audio
• video
• source
• embed
• track

The Canvas Element. The canvas element uses JavaScript to make drawings on a web page.

• canvas

New Form Elements. HTML5 offers more form elements, with more functionality:

• datalist
• keygen
• output

New Input Type Attribute Values. Also, the input element's type attribute has many new values, for better input control before sending it to the server:

• tel
• search
• url
• email
• datetime
• date
• month
• week
• time
• datetime-local
• number
• range
• color
• placeholder