15 WEEKS BREAKDOWN
Subject to minor changes
WEEK 1:- Syllabus overview
- Plan for the semester overview
- Grading policy overview
- Class Rules overview
- Basic structures of a web page and website
- HTML (HyperText Markup Language) – beginning:
HTML page fundamental structure (html, head, title, body)
Basic tags and their structure
HTML elements and attributes
Basic text formatting
Inserting image
- Programs for website coding
WEEK 2:
- HTML
Elements formatting: attributes and values for body, text and links elements (continuation)
Hyperlinks: external, pages, as images
- CSS - Cascading Style Sheet (intro)
- Uploading files directly to the FTP server
- C-Panel admin interface
- Making index.html file for the coming portfolio and uploading it into the server root
- Starting files gathering for the portfolio (one week for this part)
- Project 1- mini webpage "About Me"; Part 1 - desktop version:
WEEK 3:
- HTML
- HTML5 deprecated elements
- Display elements: inline vs. block
- Tables overview
- Lists
- Viewport Sizes - Popular Screen Resolutions
- Mockups intro; mockup for the "About Me" page, mobile version (?)
WEEK 4:
- HTML finishing
- Iframe explanation
- Cascading Style Sheet CSS
- What is CSS?
- CSS syntax: Declaration, Property, Value
- Tree types of CSS
- ID and Class selectors; Grouping selectors (all five links with practice are under "CSS Syntax" upper headline)
- Image optimization for the web
- Coding the “About Me” web page for mobile devices, following the mockup design
WEEK 5:
- UX/UI
- Information architecture: site structure/map explanation
- Wireframes explanation
- Grid system
- CSS
-CSS text, font, color and other properties
WEEK 6:
- CSS
-Box model: content, border, padding, margin
-Float property
-Google fonts
-CSS3 @font-face Rule
- Mockups explanation
WEEK 7:
- CSS:
Display: Block and Inline Elements
Links
Lists
Navigation Bar
Links: non-list vs. list methods
WEEK 8:
- CSS:
CSS Tools: Reset CSS
*{box-sizing:border-box;}
Positioning Properties
Z-index
WEEK 9:
- HTML5 - more advanced
- TBA
WEEK 10:
- Class discussion of the portfolio site mockups
- CSS:
CSS backgrounds
WEEK 11:
- Midterm test
- SEO (search engine optimization); optimization of your site for the search engine
- CSS:
Stretching background
Google Fonts
Font Face Rule
Light box, Fancy Box
WEEK 12:
- CSS:
Forms
Anchor link with sliding properties
WEEK 13:
CSS:
- CSS3 coding extra information if needed:
gradients,
shadows,
rounded corners,
transforms,
animation,
fancy buttons, etc.
WEEK 14:
- Final test
- Polishing and finishing your final project
WEEK 15:
- Project presentation