CIS89A Coding Challenges
- Self-directed exploration - pick a topic, outline a plan and do it - research, development, testing, implementation. Document the process and references.
- Coding challenges - produce code examples of application of specific features, attributes and/or properties. Some direction is provided
Coding Challenges
If you are up for a challenge, here are some coding challenges that go beyond the requirements for the regular assignments. Several students have indicated that they would like to do more coding than is required for the regular weekly assignments.
Code challenges are extensions of the topics covered each week. There is no time limit. These are optional extra credit work.
- There is a separate discussion for Coding Challenges in the top section of the main CIS89A page.
- include "Coding Challenge" along with the topic of the challenge in the subject of your post with the link to your coding assignment page. Include a brief description of what you learned from your coding challenge work.
- To receive full credit for completing the challenge, it must be obvious that your solution solves the challenge and your code must be clearly documented with comments. Just including the code with default values does not "prove" that you solved the challenge.
Even if you are not participating in the challenges, check out the submissions. There are some great coders in the class. Learning from others is always effective.
- Understanding the Cascade - Willard p.47 Show several examples of "the cascade" - how styling defined at different levels impacts what is actually displayed for the viewer. Define styling with the internal style sheet and in-line attributes - some that overlap, some that don't. Don't forget that the viewer's browser is also providing styling information too.
- Layering content - Willard p.122 Reproduce the Apples and Oranges example from the book. Then create an example of your own on the same page.
- Opacity of a background image (from Harumi Bordner)
In my header, I put text and a background "image". I can find how to apply opacity to a background "color" using rgba without affecting the text. I think that in order to do what I want to do is I need to use separate elements for text and the background image. If I use <header> to style, both the text and the background image are transparent. But <h1> is in HTML and the background image is in CSS. That is that background image does not have a tag or is not an element. I want my image to be the background( and I do not want a transparent box) and want text in the background. Is this impossible to do that?'
* Page structures
- demonstrate understanding and use of div, id, class div, id, class
- Wendy Willard - Chapters 4. Working with Text, 5. Page Structure, 6. Positioning Page Elements
- HTML Dog HTML Beginner Tutorial
- Visual Quickstart - 4. Text
Tutorials
- HTML div tag - HTML div elements acquire their potential when used together with Style Sheets, as they are very useful to assign a set of presentational attributes to entire blocks of content.
- CSS classes - To define a class, authors must write the element for which it's declared, followed by a point and the class name. The block of properties is enclosed by curly braces
For big web sites that could have hundreds of pages, there are a number of development techniques for managing the overall look and feel of the site.
We have talked about Cascading Style Sheets in general. If you are looking for a challenge, here it is...
- div, class and id - these are the essential ingredients for defining style elements that will be applied to specific components of the site.
In Willard Chapters 4-6, she talks about page layout and positioning, but she skims over div, class and id.
- Find web sites that include div, class and id in their source code, and see how these are used. What parts of the web site are identified and styled? Usually page components like menus, headers, footers and even sections of the main page area will have unique styling.
- Find some tutorials that describe how to use div, class and id. There are many tutorials and each one seems to take a different approach to describing the functionality and application of div, class and id. Finding some that relate to your current level of expertise and intended site development plans.
- div, id and class - Create a page that shows how div, id and class work. Many developers use these to control distinctive formatting for page headers and footers. Willard p.80-88
Self-directed exploration
Create your own coding project that goes beyond the scope of this introductory course. Explore a topic in depth. Experiment with special-purpose code constructs that provide unique functionality.
Please include weekly deliverables in your plan / outline. These can be annotated references, code, documentation, instructions / training materials - something that tracks your progress.
- Plan out your objectives and deliverables for each week. We will go over that before you get too far along.
- Participate in the discussions as they are current.
- Research - resources, examples and tools available. Find ones you like.
- Create a standard test page (or pages) that includes each of the topics in the course. Make it obvious what features should be displayed and how the page should behave. Then go for it!
- Code. Test. Adjust the code as necessary.
- Keep track of good reference materials and testing environments. Document your journey of discovery. This will be really valuable information - for you and anyone else faced with the same challenges.
Examples of topics of interest
