Difference between revisions of "Week Fourteen (MGDP2050)"
Karl Jones (Talk | contribs) |
Karl Jones (Talk | contribs) (→HTML and CSS) |
||
| Line 12: | Line 12: | ||
See [[Centering (CSS)]]. | See [[Centering (CSS)]]. | ||
| + | |||
| + | === 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 (graphic design)|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 == | == Cross-browser compatibility == | ||
Revision as of 11:23, 10 May 2016
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).
Contents
HTML and CSS
CSS box model
See Box model (CSS).
CSS centering
See Centering (CSS).
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:
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
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.
For next week
No new 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.
