CIS89A - 8. More CSS Functions

From WikiEducator
Jump to: navigation, search
Mathematical bridge,  Cambridge

More CSS Functions

Fonts are important design elements and need to be included via the CSS embed function. Pages can be designed to be printed as documents. Although they may not be used often, there are several more CSS display tricks worth knowing.



Learning outcomes

  • include specific fonts within the page
  • format web pages for printing
  • explore additional CSS presentation features



Keywords

  • embed, transition, transformation, animation, filter


Reading guide

  • Where do fonts come from?
  • How are fonts included in the page information
  • Why would anyone want to print a web page?
  • What are some of the additional display options available with CSS?


Assignments

Coding project title and required elements

  • cis89morecss1 * include 2-3 additional fonts * format a page for printing * demonstrate transitions, transformations, animations and filters.


  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Read chapters 15. How to work with fonts and printing and 16. How to use CSS3 transitions, transforms, animations, and filters in the textbook.

  3. More CSS Functions - In a new coding project, demonstrate requirements using all the appropriate elements and tags within your project. Publish your HTML file.
  4. Submit the web address of your coding project to the More CSS Formatting assignment.
  5. Post a link to your coding project and any comments or questions about the assignment to the More CSS Formatting discussion.

  6. Personal information - As a online technology user, you are always at risk of being the target of someone who is trying to take your personal information. Detecting online scams and 'phishing' by employing recognized tools and techniques is important. To gauge your personal risk, and find tips for lowering it, take the Identity Theft Quiz: A Quiz for Consumers.

  7. Web Literacy - PARTICIPATE - In the Web Literacy framework description, review the skills in the PARTICIPATE group. What skills you don't have yet or need to work on? Look it up. In the Web Literacy - PARTICIPATE discussion, post a link to a resource that improved your understanding and skills in these areas.

  8. Success Skills - Make it - Creativity and Innovation. Is it possible to learn to be creative or innovative? Many authors think so and provide some suggestions for getting those creative juices flowing. Review 2-3 articles from Success skills - Make it. Pick one article you would recommend from the selection list. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Make it discussion.

  9. Programming - the functionality of a web site can be extended by adding some programming, usually in Javascript.
    * If you are new to programming, write your first computer program. Hour of Code - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial. Learn repeat-loops, conditionals, and basic algorithms.
    * If you have some programming experience, learn the basics of JavaScript programming while creating fun drawings with your code. An introduction to JavaScript by Khan Academy - Video, step-by-step tutorials.
  10. In the Programming discussion, write a brief description (2-3 sentences) of your Hour of Code experience. Which tutorial did you do? Do you have any prior programming experience? Would you recommend this activity to others?

  11. Tech's Moral Void (audio podcast) - Lawyers and doctors have a code of ethics. Teachers have them. Even journalists have them. So why not the tech sector, the people who create and design our very modes of communication? Coders and designers make products that allow to us communicate with each other, across cities and nations and borders. As these giants grow at breakneck speed, and the chaos of their unfettered impact becomes more obvious, the call is coming for a reckoning. Contributor Tina Pittaway explores whether the time has come for tech to reckon with its moral void. Listen to the podcast. What are two key points that stand out to you? How does this impact you as a global citizen and internet user? Hoe does it impact you as a web developer? Is this new information to you? Post your reply to the Tech ethics podcast discussion. Review the post of 3 others. Post at least one question to another post that will help your understanding of the issues.

  12. Group Project groups discussions - Review the posts in your group discussion. Are you working as a group? Contribute to the tasks. Suggest other tasks and activities that would be appropriate for online group work.


Icon multimedia.gif

Media


  • chapters 15. How to work with fonts and printing and 16. How to use CSS3 transitions, transforms, animations, and filters
  • HTML Dog HTML Beginner Tutorial


CSS

Learning CSS by Parkour Ninja on Prezi
With CSS, this entire task can be accomplished with three rules. All I need to do is set a rule for the entire document that the font is "Times New Roman" and a rule for headings that the...
Appendix B: CSS Reference - HTML5 & CSS3 Visual Quickstart Guide (Eighth Edition)
CSS reference tables:Table B.1—CSS Properties and Values: Designed as a quick reference to many common or useful CSS properties, their default value, allowed values, where the value is inherited,...
Advantages and Drawbacks of Inline Styles in CSS
Inline styles are CSS styles that are applied directly in the page's HTML. There are both advantages and disadvantages to this approach.they can over-ride things you didn't intend them to....
HTML vs CSS - 6 important Comparisons You Must Learn
HTML provides the structure of web pages whereas CSS is mainly used to control the styling and layout (visual and aural) of web pages. HTML provides tags that are surrounding the content of any web...


Coding, programming

  • Hour of Code - Write your first computer program Code.org - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures. Learn repeat-loops, conditionals, and basic algorithms.
  • Hour of Code - Javascript - An introduction to JavaScript by KhanAcademy - Learn the basics of JavaScript programming while creating fun drawings with your code. Video, step-by-step tutorials
  • CodeAcademy - write code and see the results right away.
  • Eloquent JavaScript A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.
  • The 2015 Top Ten Programming Languages - The big five—Java, C, C++, Python, and C#—remain on top. The big mover is R, a statistical computing language that’s handy for analyzing and visualizing big data.
Girls Who Code at Home - Download Curriculum!
Girls Who Code at HomeIn response to the COVID-19 pandemic, Girls Who Code is making CS educational activities available for download free of charge. They will release activities weekly. Each activ...
Beyond an Hour of Code
Loved the Hour of Code but want more? Learn basic computer science with our suite of classroom-ready courses for different ages (even kindergarten). Lessons blend game-like tutorials with unplugged...
Learn | Code.org
Hour of Code ActivitiesTry a one-hour tutorial designed for all ages in over 45 languages. Join millions of students and teachers in over 180 countries starting with an Hour of Code. "
...
Unruly Splats - Coding For Kids | Active STEM Learning
Unruly Splats are programmable devices that light up, make sounds, and sense when they’re stomped on. Students program Splats to create active games using the Unruly block coding app on a tablet...