KO Tech Academy's Fundamentals of HTML5 and CSS3 course.

Designing for the Mobile Web (Just Information)

• .mobi - this is the mobile domain extension.
• Have a mobile directory in your website.
• Use stylesheets, one for the desktop and one for the mobile.

• Multiple, small screen sizes
• Low bandwidth - low signal strength can slow rendering. /li>
• Font, color, and media - Common fonts, good contrast between text and background.
• Awkward controls - Touch displays need to be considered.
• Functionality - Hyperlinks easily readable and accessible.

• Single column design with a smaller header.
• Important navigation links.
• Main content first.
• Footers for additional navigation and information.
• Limit scrolling in one direction.
• Use heading elements.
• Use lists.
• Avoid tables at all costs.
• Label form controls.
• Avoid using pixel units.
• Avoid absolute positioning.
• Hide non-essential content.

• Provide navigation at the top.
• Provide consistent navigation.
• Avoid targeted hyperlinks (open in new window).
• Balance the number of links and the number of levels.

• Avoid large images.
• Configure alternate smaller background images.
• Avoid using images with text due to downsizing.
• Specify image sizes custom for mobile displays.
• Provide alternate text for graphics.

• Have good contrast between font and background colors.
• Use common font types.
• Use em or percentages for font sizing.
• Use short page titles.
• Design for One Web.

• Meta tags are quite useful if configured correctly.
• The viewport meta tag was developed by Apple for the iPhone and Android Smartphones.
• Helps to properly scale websites for mobile devices.
• <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Directives (properties)
• width- sets the width of the viewport in pixels.
• height - sets the height of the viewport in pixels.
• initial-scale - Numeric multiplier, set to 1 of 100%.
• minimum-scale - numeric multiplier, default to 0.25 for Mobile Safari.
• maximum-scale - numeric multiplier, default to 0.25 for Mobile Safari.
• user-scalable - Yes/no - determines if user has zoom control.

• Progressive enhancements to improve viewing contexts (responsive web design from Module 5).
• What's a Media Query
• Determines factors of the mobile device.
• Screen resolution.
• Screen orientation.
• Browser type.
• Code
• <link href="lighthousemobile.css" rel="stylesheet" media="only screen and (max-width:480px)">

• all - all devices.
• screen - computer screen.
• only - hides the media query from older browsers.
• print - printing the webpage.
• <link href="lighthousetablet.css" rel="stylesheet" media="only screen and (min-width:768px) and (max-width:1024px)">
• Use the @media rule directly in the css.
• @media only screen and (max-width:480px) {header {background-image: url(mobile.gif)}
• Search additional @media uses on the Web.

• Flexible images with CSS
• HTML and CSS code needs changed
• Remove the height and width attributes from the image properties.
• Make the max-width to be 100%.
• Maintain the aspect ratio as closely as possible. Can set the height: auto;

• Picture element - Gives developers a method to display images based on specific criteria.
• Source Element
• A self-contained tag that is used with a container element.
• Attribute and values of the source element property.
• srcset - Required - is the source of the image.
• media - Optional - media query.
• sizes - Optional - Numeric or percentage value to configure the image dimensions.

• This is a rather new flexbox technique to layout webpages for mobile devices that will not interfere with desktop devices.
• Flexbox is well supported in modern browsers.
• The flex container is configured using the display property. This will create a flexible container.
• Some values are:
• inline-flex - for flexible inline containers.
• The direction of the flex is configured using the flex-direction property.
• #demo {display: flex; flex-direction: row;}
• If we need to display the content on several lines, we use the flex-wrap property.
• The default value is nowrap which maintains a single-line display.
• The value wrap will allow the flex items to use multiple lines as needed. Think of it the same way as text wrapping.
• The justify-content property will tell the browser what to do with extra space.
• The value of center will place the flex item in the center.
• The value of space-between will evenly distribute the flex items and allocates the empty space.
• All items in a flex container are flexible.
• They all have the same aspects.
• flexible in size.
• allocated the same amount of display area in the container.
• display in the same order as coded.
• modifications take place with CSS.
• Flex property
• Refer to www.w3.org/TR/css3-flexbox/#flex-common
• This shows a list of values and attributes.
• Order property
• Will adjust the loading precedence for the flex items. The default value is 0. The motion values are -1 and 1.
• Additional information is at https://css-tricks.com/snippers/a-guide-to-flexbox

• There is a new method to design a layout with CSS called CSS Grid Layout.
• This is a new property still under candidate status at W3C.
• It is designed to let developers configure a two-dimensional grid layout.
• It can be designed to be fixed-size or flexible.
• It can also change the order of precedence for display elements or objects.

• First, define the grid container. This is the element that contains the grid area.
• Values:
• grid - indicated a block container.
• inline-grid indicates an inline display container.
• Grid lines define the grid rows and grid columns.
• Grid cell is the intersect points. Just line a spreadsheet.

• grid-template-columns
• grid-template-rows
• These tell the browser how much space to allocate for each row and column.
• Values:
• pixels
• percentages
• keywords (none, auto, etc.)
• flex factor units

• The table element is the container for the data in the table.
• There are several attributes that can be used to create the table.
• Align - obsolete - left is default, right, center - use CSS
• bgcolor - obsolete - the table background color.
• border - 0 default - no border
• 1 to 100 stated in pixels.
• cellpadding - obsolete - use CSS
• cellspacing - obsolete - use CSS
• title - description of the table - may show as a tooltip.
• width - obsolete - use CSS

• HTML 4.0 and earlier and XHTML used the border attribute to display the area of the table.
• HTML5 uses the border property to render default borders around the table and cells.
• Table Captions
• Used to display the table name above the table.
• Must be coded first under the <table> tag.
• <table border="1">
• <caption> This table </caption>
• <tr>
• <td>
• </table>

• Table Row Element.
• <tr></tr> is the row.
• Align - obsolete - use CSS
• bgcolor - obsolete - use CSS
• Table Data Element
• <td></td> is data that is placed in the cell.
• Attributes:
• align - obsolete
• bgcolor - obsolete
• colspan - the number of columns spanned by a cell.
• headers
• height - row height
• rowspan - number of rows spanned by a cell.
• scope - row, col
• valign - obsolete
• width - obsolete
• Table Header Element
• <th></th> will place the column names in bold by default.

• The span is used to make the table look like it has merged cells, similar to a spreadsheet.
• Colspan - the number of columns a cell will occupy.

• It is recommended to use <th> tags and the caption.

• These classes allow us to efficiently color rows to give the table a real spreadsheet feel.
• Class names:
• :first-of-type
• :first-child
• :last-of-type
• :last-child
• :nth-of-type(n)

• There are three options for coding table sections.
• <thead>
• <tbody>
• <tfoot>

Overview of Forms
• Forms are used everywhere.
• Some Uses:
• Registering
• Signing In
• Emailing
• Every time you hit a submit button after entering data you have more than likely used a form.
• Two main components of a form
• The HTML code that displays the code.
• The server-side processing that manipulates the data.
• Data is not information and information is not data.
• Data is ambiguous, raw, and truly meaningless.
• It takes at least two pieces of data to create information.

Form Elements
• The form element is the container that holds the form on the webpage.
• Forms are independent and cannot be nested.
• Forms themselves are not complicated but there are complicated processes that happen in the background.
• There are five attributes that make up a form.
• action - The URL or filename/path to the server.
• autocomplete - HTML5 attribute
• On - The browser will fill the form.
• Off - The browser will not fill the form.
• id - optional - alphanumeric - used to provide a unique identifier. The id name cannot be used elsewhere on the webpage.
• method - required
• get - appends the form data to the web address and sent to the web server.
• This is the string of extra characters, words, etc. we see following the filename, sessions, etc.
• post - this is the private method of sending data to the server or another webpage. Preferred value for the method attribute.
• name - optional - alphanumeric and must start with a letter. Be descriptive but short.
• Form1 - not good
• RegForm - okay
• Order Form - good
• SurveyForm - good
• FormForRegistering - not good, but could be used.
• syntax
• <form name="OrderForm" method="post" id="OrderForm" action="processData.php">
• the action is the server-side script that processes the data.

Form Controls
• The places on the form that allows for user control.
• Input field
• Radio button
• Check boxes
• Buttons
• New HTML controls allow for
• Email
• URLs
• Dates
• Times
• Date selection (calendar scripting

Input Element Form Controls
• The input element is a self-contained tag and does not require a closing tag.
• The type="reserved action" attribute defines the purpose of this field.
• type="text" - is the long space we often see when entering data. First Name, Last Name, etc.
• type="radio" - is the radio button.
• type="file - initiates a "choose" for uploading/downloading.
• The new HTML5 attribute "required" let's the browser validate the data has been entered.
• Submit Button
• This button is used to "submit" or begin executing the method get or post.
• <input type="submit>
• Reset Button
• Use to clear the form and set fields to their default value - generally restarts the form.
• Attributes for both buttons are the same.
• type
• name
• id
• value
• accesskey - hot key
• tabindex - the order of advancement when the tab key is used.

Checkbox
• Used to select two or more options. can also be cleared by unchecking.
• <type="checkbox">
• Attributes
• type
• name
• id
• checked - checks the box by default
• value - used for client side/server side processing
• disabled - disables form control
• readonly - control is active but cannot be changed from initial value
• autofocus - HTML5 - places the cursor at this point upon access to form
• required - HTML5 - explained previously
• accesskey - hot key for access (shortcut key)
• tabindex - the order of advancement when the tab key is used.

Radio Button
• Allows for a single selection from two or more options.
• <type="radio">

Hidden Input Controls
• Stores information that is not visible in the viewport.
• Can be accessed by cleint/server scripting
• <input type="hidden" name="sendto" id="sendto" value="email@some.com>
• Can be used as the email address that is used to submit comments, contact info, etc.
• Attributes
• type
• name
• id
• value
• disable

Password Box
• Same as the text box with the exception that characters entered in the field are masked, usually by asterisks.
• <input type="password">

Scrolling Text Box
• Textarea Element
• Similar to the text box but adds scrolling action.
• The textarea element defines the start and stop of the scrolling text box.
• The height and width can be tailored for specific needs.
• <textarea name="comments" id="comments" cols="40" rows="2">
• cols - specifies the width based on the number of characters that can be entered, including spaces.
• rows - specifies the height based on the number of characters stacked.
• Attributes
• name
• id
• cols
• rows
• maxlength - number of characters that can be entered.
• disabled
• readonly
• autofocus - HTML5
• placeholder - HTML5 - brief information to help the user.
• required - HTML5
• wrap - hard/soft - configures line breaks based on the number of characters
• accesskey - HTML5

Select list
• This is also known as a drop-down menu, drop-down option box, etc.
• Let's you select from a list of values.
• Select element
• This is the container element that holds the values.
• Uses open/close tags
• Attributes
• name - alphanumeric - no spaces
• id - alphanumeric - no spaces
• size
• 1 - sets the visible selection to one line and acts as a drop-down list
• 2 or more - make it a scrolling list. Best to use if the user needs to make more than one selection. (ctrl key)
• multiple - default is one selection - let's users select multiple options.
• disabled - This is used when the first option is an input statement "Select Options Here"
• tabindex

Option Element
• This is the list in the Select Element
• Uses opening/closing tags
• <option> </option>
• Attributes
• value - is the placeholder for the selected option. Used when the form is trigger.
• Selected
• is the first option by default
• can be any option in the list that shows first.
• disabled
• Note - This is not a good option for navigation links. Best uses to select a value for processing.

Image Button

Button Element

Accesibility and Forms
• Label Element

The accesskey Attribute
• This codes a character on the keyboard as a "hot key" that will move the cursor to the field when the hotkey is pressed.

Style a Form with CSS
• Developers of old would use tables to format forms and form fields.
• Tables as forms is truly outdated and CSS is the better way to style a form.
• The box model is used as the framework for styling forms.

Server-side Processing
• Server-side processing consists of a request from a web browser, the request is processed, and the server returns the requested data/information.
• Examples of server-side processing scripts/languages are:
• .php - open source SQL scripting platform
• .asp - Microsoft active server processing language
• Ruby on Rails
• Adobe ColdFusion
• Oracle JavaServer
• Today's server side scripting languages use direct execution
• The script is run on the web server on an extension of the web server.
• The processing is triggered by an attribute on the form and an action.

HTML5 Form Controls
• HTML5 offers numerous new controls for developing interactive forms.
• Older browsers that do not support HTML5 will display the input types as text boxes and ignore unsupported elements.
• E-mail Address Input
• The email address input control checks to make sure the information entered is in appropriate email format.
• URL Input
• This input type is much like the email input type.
• It verifies the URL that is entered has the correct formatting.

• Adding multimedia as hyperlinks

• Using CSS3, developers can manipulate many elements in a webpage.
• Developers can
• create drop-down menus
• Menus that expand when the :hover pseudo-class is used.
• Transform elements
• This allows developers to change the element
• Rotate and Scale
• Developers can rotate the content
• Developers can scale the content
• Transition
• Displays the content in a smoother fashion over a specified time.

• The transform Property
• With the transform property developers can:
• rotate
• scale
• skew
• reposition
• Rotate and Scale
• Rotate() function rotates the element in degree
• positive value rotates to the right
• negative value rotates to the left
• The rotation occurs from the center of the element.
• Scale() function resizes the element along the x axis, the y axis or both.
• scale(0) means the element should not display.
• scale(1) means the element is the original size.
• scale(2) means the element is twice the original size.
• scale(3) means the element is three times the original size.
• The Transition Property
• This property allows for smoother transitions over a specified time.
• Each transition will require values.
• The properties are:
• transition-property
• The property in use.
• transition-duration
• The time it takes to make the transition.
• Usually in seconds.
• Zero (0) is immediate with no transition.
• transition-timing-function
• This controls the speed of the transition
• ease - default
• begins slow, speeds up, and ends slow.
• linear
• The transition has a constant speed.
• ease-in
• The transition starts slowly then speeds up to a constant speed.
• ease-out
• The transition begins at a constant speed then slows down.
• ease-in-out
• The transition begins slowly, speeds up, then slows down.

HTML5 Details and Summary Elements
• These two elements are used together (a widget) to show and hide information.
• Details Element
• Uses an opening and closing tag
• When the visitor clicks on the details element, it expands down and shows the contents of the summary element.
• Summary Element
• Uses an opening and closing tag
• This is the text is in the expanded element.

What is JavaScript?
• JavaScript is a client-side scripting language.
• JavaScript allows developers a means of using scripting languages outside of a server.

Uses of JavaScript
• Alerts
• JavaScript is also known to generate an alert until the user clicks something or the alert timers out.
• Popup Windows
• When a popup window appears because of certain actions within the webpage takes place.
• Using Jump Menus
• Jump menus are similar to a select list with the exception that when a choice is made, the page "jumps" to the link rather than having to click a Submit button.
• Mouse Actions
• When you see a cascading menu, when you hover your mouse over a link and it expands and then expands again when you hover over another link.

Using JavaSCript in a webpage
• The <script></script> element is used to place scripting instructions in a webpage.

Document Object Model (DOM)
• JavaScript is an object-oriented language meaning that each element within a script is an object. Which means that images, form fields, alerts, and popups are all objects.
• Alerts()
• When creating an alert, we are using the window object and the method is the alert() method.
• We can also write to the document using the write() method.
• document.write("What is JavaScript and Methods");

Events and Event Handlers
• An event is an action. This could be user initiated or could be initiated by a script.
• The event is executed by an event handler, which is the action that takes place.

Variables
• Variables are placeholders for values.
• Strings are the alphanumeric characters that make the variable.
• Strings are always enclosed in double quotes "".
• There is a limit to the length of a literal string (phrase, paragraph, full text) of up to 65,536 characters (including spaces and line breaks) but this truly depends on the memory needed to parse such large strings.

Programming Concepts
• Programming using JavaScript is a very powerful tool.

Form Handling
• Form handling has its own set of rules. However, using JavaScript can save time by validating the data in the form on the client-side rather than having to do the check on the server-side.

jQuery
• jQuery is a form of JavaScript and is used in conjunction.
• jQuery can be coded as jQuery (selector).method() or using the $ sign like $ (selector).method()
• The (selector) is the DOM element to work with.
• jQuery needs to have the webpage loaded before it can operate.
• A ready() method is used to tell jQuery the page is loaded and ready for interaction.
• JavaScript and other jQuery statements are inside the ready() method.

jQuery Selectors and jQuery Methods
• jQuery selectors are the same elements used in HTML and CSS.
• Use single quotes when working with selectors rather than double-quotes.
• All selectors will be enclosed in parenthesis.
• Selectors are coded the same as CSS statements with the exception of the $ and the parenthesis.
• CSS - .className {} - for the class named className.
• jQuery - $('.className')
• CSS - *{} - Wildcard for all elements
• jQuery - $('*')
• CSS - nav a{}
• jQuery - $('nav a')
• jQuery methods are used to act upon a DOM element(s) that are selected.
• Methods work with CSS, Effects, Events, Forms, etc.

jQuery Image Gallery
• There are several methods that can enhance how image galleries are displayed on the webpage.
• We can hover
• Hovering over an image will initiate an action. Some actions may be:
• Full-sized image in another window or tab.
• Replace an image with the hovered image.
• We can toggle
• Toggling the image by clicking on a thumbnail.
• Toggling allows us to change the speed and effect of the displayed image.
• We can click
• Click on an image to open a new window or tab.
• Click will load the image from a thumbnail to its larger version.

jQuery Plugins
• Plugins extend the functionality of jQuery.
• hey are configured to work with elements and objects outside the normal jQuery methods.