byxbee wiki

Coding project required elements * text formatting, include additional font families * use css .class selector, ID, div * demonstrate transitions, transformations, animations * error free coding, css for styling, comments in html and css code

'Resources: For this and other modules look for resources in ALL media types - video, audio, illustrations as well as text. If you prefer to learn from resources other than text, that is fine. Find and post resources that YOU prefer.'

# 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. Review the 'Media' section (below - scroll down) for links to resources for this module. For additional online resources, search for the keywords.<br /><br /> # 'Textbook' - Read 'HTML and CSS Visual Quickstart Guide', Ninth Edition. Casabona. <br /> * Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations <br /><br /> # 'Design Thinking' - Designing entails identifying and clarifying problems, making thoughtful responses and then creating and testing your solution. Designing is an activity which involves the use of a wide range of experiences, knowledge and skills to find the best solution to a problem within certain constraints. Review several resources that describe design thinking and the design process. How does this relate to the web development process? Post a link and brief summary of the inclusion of the design process in web development to the 'Design Process' discussion. Review 2 others and comment. <br /><br /> # 'Web application (app) vs display' - The primary purpose of some web sites is just providing and displaying information. The information may be static - historical records or the information may be updated frequently like weather forecasts. Other sites are primarily web-based applications. What is displayed depends on interaction with the user - social media, e-commerce, code validation. Find an example of each - an information display and a web application. Look at the source code for each. Are there noticeable differences? Post a brief comparison of the major differences between these along with the link to each to the 'Web Application vs Display' discussion. <br /><br /> # 'Web Design' - There are plenty of guides for designing great web sites. Some advice will apply only to specific content. Others are universal (UI/UX). Review the article [https://www.glidedesign.com/blog/10-principles-of-good-web-design/ 10 Principles of Good Web Design]. How will these improve your web site designs? Pick 2 important components and post a brief summary of each to the 'Universal Web Design' discussion. Review and comment on the post of 2 others.<br /><br /> # 'CSS Styling' - There are so many different effects available with CSS, select some to explore and use as you wish. This is an opportunity for you to apply CSS Styling and your own creativity. Provide a demonstration of several of the Font and Text Properties and Color and Background Properties. <br /> * In a new coding project, demonstrate requirements using all the appropriate elements and property tags within your project. For this coding project - Make your styling really visible. Make it standout so it is clear what you have added. <br /> * In the top portion of your project page, include some text and images without any styling, just using the browsers defaults. <br /> * In the bottom portion of your project page, add the same text and images and add styling using style coding in your css file. <br /> Some browsers and user preferences may not display your styling. It is helpful to include information about the requirement being demonstrated in the page display as well as in the comments. # Submit the web address of your coding project to the 'CSS Styling' assignment. <br /><br /> # Post a link to your coding project and any comments or questions about the assignment to the 'CSS Styling' discussion. # AND get feedback and provide feedback … Review 2 other projects and 'REPLY' with a comment to point out something that you learned or you liked. Ask one question about the work.<br /><br /> # Writing for the web - Pick one of the articles listed in [http://www.nngroup.com/topic/writing-web/ Writing for the Web]. Write a short review of the article you selected and post it along with a link to the article in the 'Writing for the Web' discussion. <br /><br /> # ChatGPT interactive response software - What do you know about ChatGPT? Have you used it? Post your comments and a link to a resource that describes some important information about the software, how it can be used and any cautionary comments to the 'Talking with ChatGPT' discussion. Review the comments of 3 others. <br /><br /> # Educational videos - There are thousands of great educational videos on the web. [https://www.youtube.com/user/TEDEducation TED Education], [https://www.youtube.com/channel/UCbfYPyITQ-7l4upoX8nvctg Two Minute Papers] and [http://www.teachertube.com/ TeacherTube] series are the best known sources but there are many others. Find an example of a educational video. In the 'Educational videos' discussion, post a link to the video you selected and a brief description. Be sure to include the length of the video in minutes:seconds.<br />Review the selections of 2 others.<br /><br /> # Success Skills - 'Use it' - how technologies are woven into daily living. Review 2-3 of the articles from Success skills USE list in the Media section below. 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 - Use it' discussion. Review 2 others.<br /><br /> # 'Programming' - the functionality of a web site can be extended by adding some programming, usually in Javascript. <br />* If you are 'new to programming', write your first computer program. [http://code.org/learn 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. <br />* If you have some programming experience, learn the 'basics of JavaScript' programming while creating fun drawings with your code. [https://www.khanacademy.org/computing/computer-programming/programming An introduction to JavaScript by Khan Academy] - Video, step-by-step tutorials. <br /> In the 'Programming' discussion, write a brief description (2-3 sentences) of your programming experience. Which tutorial did you do? Do you have any prior programming experience? Would you recommend this activity to others?<br /><br /> # 'H5P Project' - HTML5 has enabled new ways to create content for the web. [https://h5p.org H5P authoring tools] developed by MIT and developers from around the world, make extensive use of HTML5 for creating interactive elements. Read [https://h5p.org/about-the-project About H5P project]. Explore several of the [https://h5p.org/content-types-and-applications H5P examples]. Select one of the H5P interactive teaching game or quiz. Some suggestions - counting, adding numbers up to 10, easy reading storybook, … How is HTML5 functionality being used? Is it effective? Post a link to your selection and HTML5 observations to 'Test drive H5P' discussion. Review the work of 3 others. <br /><br /> # 'Code validation' - there are a number of tools available free online that will check your HTML code and highlight errors. Find one and have it check your code for the project. How did you do? Did it find errors that you missed? Do you understand what is wrong? Were you able to fix the problem? Did you re-check your code to see that you fixed the problem? Post a link to the HTML checker you used and a brief descriptions of your experience using it in the 'HTML Code Checker' discussion. Review the post of 2 others.<br /><br /> # 'Group Project groups discussions - Text' - What is something important and interesting that you learned about 'using text' in your web design? When designing a page or a site with a lot of text, what should be considered? Do you have questions about good web design? How would you apply these design ideas to your own work? Do you read long text articles online? Why / why not? Share with your group in the Group discussion. Are there outstanding questions? Contribute one or more posts to the discussion for the group. If you have a question about working as a group, please ask. <br /><br />

media

If there is a temporary problem with the resource updates, Resources for all modules are available here.

[https://byxbee.wordpress.com/2024/03/24/cis89a-resources-24-4/ Link to list of resources for this module] <br> https://byxbee.wordpress.com/2024/03/24/cis89a-resources-24-4/

<onlyinclude> 'Textbook' - Read 'HTML and CSS Visual Quickstart Guide', Ninth Edition. Casabona. <br /> * Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations

Examples <rss date=“” max=“3” item-max-length=“90”>http://www.diigo.com/rss/user/vtaylor/x5styling</rss>

STYLING <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/styling</rss>

TEXT <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/text</rss>

Design Thinking <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/designthinking</rss>

Coding, programming

'[http://code.org/learn 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.

'[http://www.codecademy.com/ CodeAcademy]' : write code and see the results right away.

'[https://www.geeksforgeeks.org/top-10-programming-languages-of-the-world-2019-to-begin-with/ Top Ten Programming Languages]' : for web development – JavaScript, Python, Java, PHP, Ruby, C#

<rss date=“” max=“2”>http://www.diigo.com/rss/user/vtaylor/coding</rss>

USE <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/useit</rss>

</onlyinclude>