Week Fourteen (MGDP2050)

Lecture notes and exercises for Week Fourteen of Web Design and Development II (MGDP2050).

See also Week Thirteen (MGDP2050) - Week Fifteen (MGDP2050) - Project (MGDP2050) - Exercises (MGDP2050).

HTML and CSS

CSS box model

See Box model (CSS).

CSS centering

See Centering (CSS).

Conditional CSS

External style sheets can be made conditional for Internet Explorer, targeting only certain versions of Internet Explorer.

External JavaScript files can also be made conditional.

See Conditional CSS and Conditional JavaScript.

CSS frameworks

When creating a web page, start with Bootstrap framework, or some other CSS framework, or CSS reset.

CSS grid system

Most CSS frameworks provide a grid system for web page layout.

Use grids to create containers, rows, and columns.

Grids are typically implemented by adding specific classes to your HTML elements.

See also Bootstrap grid.

Cross-browser compatibility

See Cross-browser compatibility.

CSS reset

CSS reset is the practice of setting CSS styles to a baseline state, before writing custom CSS, in order to minimize browser incompatibility.

CSS frameworks such as Bootstrap have CSS reset built in.

JavaScript libraries for compatibility

Various JavaScript libraries are available to help reduce browser incompatibility, including:

• Modernizr

Text editors

A text editor is a tool for editing text files.

Source code editors

A source code editor is a text editor which has features such as syntax highlighting, which are useful for editing source code.

HTML editors

An HTML editor is a source code editor which has features such as WYSIWYG, which are useful for editing HTML.

Adobe Dreamweaver is an HTML editor.

Word processors

Avoid using word processors such as Microsoft Word as HTML editors.

Word processors typically add non-text formatting. HTML must be text-only.

Popular text editors

• Atom (text editor)
• Brackets (text editor)
• Notepad++
• Sublime Text

See also Category:Text editors.

Web design generators

A web design generator generates HTML, CSS, JavaScript, typefaces, or other resources relating to web design.

See also Category:Web design generators.

Bootstrap generators

• Bootstrap generator
  • Pingendo - application software, generates Bootstrap-based web pages
  • Bootstrap navbar generator - online resource, generates Bootstrap navigation bars

HTML Table generators

HTML tables generators produces HTML tables.

Favicon generators

A Favicon generator produces favicons.

SVG generators

A Scalable Vector Graphics generator produces Scalable Vector Graphics (SVG) images.

Typeface generators

See Typeface generator.

Favicons

A favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular website or web page.

See Favicon and Favicon generator.

Freelancing, job search, etc.

Open discussion about jobs, searching for jobs, freelancing, etc.

See Learning freelancing (1).

For next week

No new exercises.

• Work on your project
• Finish or improve previous exercises

Final class session

Next week is the final class session.

It will be a short class session featuring guest lecturers.

Optional: students are free to make a presentation to the class -- non-credit, for the experience as a public speaker.