eldin-talundzic/_webdev_

Web Development Essential Notes

Steps in website development

1. Add website structure in HTML

• Follow Document Object Model (DOM) tree structure
• Add roles to sectioning elements

2. Add style using Cascading Style Sheets (CSS)

• Create a template css stylesheet based on the HTML structure (e.g., global > specific)
• Define appropriate type class pseudo-class and id selector attributes
• Add the Box Model Fix to the top of the CSS for more responsive design
• Add css reset using Normalize

3. Add behavior and interaction using Javascript

• placeholder
• placeholder

Tips:

• Use lowercase letters when naming your files, folders, images (i.e. index.html, page1.html, etc)

• Use JSFiddle to test code snippets.

• Project directory structure:

 Project_name
   |--_css/
     |-- styles.css
   |--_fonts/             <!-- if providing own fonts instead of web fonts-->
     |-- museo-sans.ttf
   |--_images/
     |-- image1.jpeg
   |-- index.html

To check a particular CSS and HTML properties support by browsers see the following link: Can I Use.

HTML Reference Guides

• Quick Review
• HTML structure
• Creating links
• Creating lists

CSS Reference Guides

• Quick Review
• CSS Font Stacks, Google Fonts, and Icon Fonts: resource for fonts.
• Colours: great resource for getting color codes.
• Codrops: a great resource for css styles, tutorials, and for overall design inspiration.
• Mozilla Developer Network: resource with tutorials and guides.
• CSS Tricks: resource for css hacks and tricks.
• Media Queries: responsive website design examples.
• Liquidapsive: Examples of adaptive, responsive, static and liquid website designs.
• Unsplash: beautiful, free photos.
• JsFiddle: use to test out code snippets on the web.

Javacript Guide

• Basic html structure
• Creating links
• Creating lists