> Download Syllabus > Contact Dave at David@RodescoDesign.com

Advanced HTML/CSS Materials

Day 1:   CSS Layout Review: CodePen exercises, Who To Know Presentation (PDF) or (Keynote file)

Day 2:   Dave's class version of HTML5 Boilerplate, HTML5 Boilerplate Presentation (PDF) or (Keynote file), HTML5 Boilerplate terms you should know (DOC), 37Signals website assignment (Zip)

Day 3:   Absolute Positioning Review: Codepen exercises, How to make a tool tip (DOC), How to make Dropdown Menus (DOC), 37Signals class homework finished (ZIP)

Day 4:   Intro to SEO presentation: (PPT) (PDF) , Codepen Exercises,Day 4 Notes:Ems,:before/:after,Css Triangles,Attribute Selectors

Day 5:   SEO: Meta Tags (PPT), Contact Form Class Exercise, Codepen example of finished Form,HTML Forms PPT,Forms Code Cheatsheet(DOC), Sending a Contact Form(DOC), Anchor Links(DOC)

Day 6 Responsive:   SEO: Links (PPT), Responsive Design PPT Presentation, Codepen Media Queries Assignment, Codepen Fluid Layout Assignment, Responsive Assignment,Responsive Design Infographic

Day 7 Responsive:   My pinterest board for Responsive Layouts, Codepen: Fittext Demo, , Codepen: 3 column layout assignment, Responsive Assignment part 2

Day 8 Responsive:   Codepen: Responsive Navigation Assignment, Codepen:Using Iframes: Responsive Tester, Article on responsive videos (shay howe), Example of code for Responsive Video Embed Responsively tool for responsive videos and media,

Homework

Day 1: Choices choices...

If you still feel like you need a refresher on floats and clearfixes then check out This Video from Chris Coyier's CSS-Tricks website.

Otherwise, your homework if to finish coding a previous website project which you have not finished. Later in the class we will be taking this website and converting it to a responsive website.

If neither of these options appeal to you and you want a challenge, trying creating a styled scrollbar using the css from this article and then make it work in firefox by using this javascript fix.

Day 2: Get some practice coding

Continue working on the 37signals website practice from class. Finish the layout by putting width/heights where appropriate and floating your divs except for the wrapper. Then put class="clearfix" on the wrapper. Once the layout looks good, you can change/remove background colors and paste in the text of the page inside the appropriate divs. We will code the HTML tags in class so no need to do that part. Here is a handout that has detailed instructions on my method for doing layout with CSS.

Day 3: Finish 37signals or Finish your websites!

Practice the dropdown menu techniqes from class and create a vertical dropdown menu instead of a horizontal in codepen.

If we didn't finish the project in class, finish the 37 signals project completely. More importantly, try to finish up an existing web project so that it is ready for the responsive project. Even if you have a project finished, maybe spend your time organzing your code and refamiliarizing yourself with the project

Day 4: Css3 experiment

Create a codpen using CSS3 properties like transform and transition and maybe even pseudo-selectors like :before :after and :first-child to create

Day 6: Prep your website project

Continue finishing/prepping a previous website project to work as our final project in class. Email me your projects by Tuesday/Wednesday so I can look them over and give you notes and feedback on your work.

Day 7: Get some work done on your responsive project

Because all this responsive stuff is fresh in your mind and we won't meet for two weeks... try to get as much done on the responsive version of your site. Tip: start with translating your Px dimensions for text into Ems. Then separate out the CSS that is common to all viewpoints.

Extras


That inline vs block image

The chapter from CSS Mastery that taught me about Floats

Completed infinite width page example. (like 37 signals... site extends to browser width)

Completed horizontal scrolling examples with 3 scrollable areas. (photography site)