Coding assignment * 'beyond HTML basics' as a new project with the [https://csszengarden.com/ Zen Garden] html file and all styling in your own linked css file * coding project Zen Garden html - copy into you project html file. Use exactly as it is. * add all your own css code * comments in css - include your name and the date. Identify and describe the css code and why you have used this feature

# 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 activities for this module.<br /><br /> # 'Textbook' - Read 'HTML and CSS Visual Quickstart Guide', Ninth Edition. Casabona. <br /> * Chapter 19 CSS Variables . Chapter 20 CSS Preprocessors . Chapter 25 Going Beyond HTML & CSS . This information is beyond the scope of the course - good to know about but not necessary for completing this assignment. <br /><br /> # User Interface Design - Where can you learn more about user interface design - tutorials, online courses, articles, web sites, books, MOOCs, college courses? Post a summary and a link to your resource to 'User Interface Design' discussion. Review 2 others. <br /><br /> # Search Engine Optimization (SEO) and Analytics - Being “found” and listed in search results is an important part of publicizing your site. The meta elements in head section of the page html code are used for this. Analytics - how many viewers found you and who are they and what did they want? Find an article that gives a good overview or specific advice about using these elements effectively. Post a brief summary and a link to the article in the 'Search Engine Optimization & Analytics' discussion. <br /><br /> # Search and Meta Data - Search for a topic of interest to you. Look at the source code for several of the sites that are listed in the search results. Do the keywords and description in the meta elements in the head element match your search? What other information is provided in the meta data. Why is this important? Post links to 2-3 search results with their meta data and a brief summary of the connections between your search and the results to the 'Search and Meta Data' discussion. Review 2 other posts.<br /><br /> <!– added 2022.12.5 –> # Internet of Things (IoT) - The next big thing is the Internet of Things. The articles listed in the Media section provide a great overview with lots of interesting examples in a broad range of categories. Take a look. What do you think? What is one example that is a surprise but you would like to see? Post the name and ONE sentence about your selection to the 'Internet of Things' discussion. Conclude your post with a 'question'. Reply to 2 others and concluded your replies with questions.<br /><br /> # Managing Websites - When you are managing an existing website, keeping content up to date, ensuring site users can complete their tasks, and driving continuous user-centered improvement are critical. Find a description of website management guidelines. How is this different than creating a website? What are some of the practices that you can use? Post a link to the guidelines and a summary of 3 important points to the 'Managing Websites' discussion. <br /><br /> # 'Web developer jobs' - There are many skills and roles available for web developers. ..see [https://roadmap.sh/frontend Frontend Developer Roadmap] Some organizations have a team of developers with different specializations. For other organizations, there may only be one person who develops the web site in addition to other responsibilities. <br /> De Anza College has partnered with [https://www.joinhandshake.com/ Handshake] as a job and internship platform for students and employers. For more opportunities sign up for an account. Join and login to [https://deanza.joinhandshake.com/login De Anza Handshake website] to view available jobs and internships. <br /> Find 2-3 job ads for web developers. Review the job requirements. Post a link to 1-2 job descriptions and comment on what skills you have and need to develop to perform this job in the 'Developer jobs' discussion.<br /><br /> # 'VounteerMatch.org' - [https://www.volunteermatch.org/ virtual volunteering]. For many of the volunteer opportunities, you can work on projects that will allow you to gain some important experience. There are listings for web developers, programmers, social media editors, graphic artists, testers, game developers, and more. Look through the descriptions for 1-2 that would help you gain experience in the work you would like to be doing. Post a link to the 'Volunteer experience' discussion with the descriptions and a brief note about organizations looking for these volunteers. <br /><br /> # 'JavaScript' - Learn about JavaScript. Review the resources listed in the Media section below, online tutorials, instructional material from JavaScript tutorials. Also review the [https://www.w3schools.com/howto/default.asp w3shcools.org How To examples] that include code snippets for HTML, CSS and JavaScript. Add 2-3 of these to your coding project for this module. <br /> What did you know about JavaScript before you started this activity? What resources did you use? What did you learn? What questions do you have about JavaScript? Have you seen web sites that are mostly made with JavaScript? What did they do that is different from just HTML? Will you need to learn JavaScript for developing web sites beyond this course? Write a brief summary of your experience and post it to the 'JavaScript experience' discussion. Review the posts of 3 others. <br /> If you are interested, explore further. There are other programming languages such as Python and PHP as well as frameworks and development environments being used by professionals. Some of these are mentioned in the job descriptions for web developers. <br /><br /> # 'Beyond HTML basics' - Start with the Zen Garden html code. Update the code in the style.css file to demonstrate a selection of css styling functions within your page. Include comments about how the css features are used. <br /> Focus on CSS for styling - as demonstrated earlier in the course in the Gen Garden examples. Same HTML code. Totally different styling with just CSS code. Don't change the html file ** Just make changes to style.css code! Share your project. # Submit the link to your project to the 'Beyond HTML basics' assignment. # Post a link to your project to the 'Beyond HTML basics' discussion. How do these coding projects relate to your understanding of what web development is? # Review the work of 2 others - the page display and the source CSS code. Post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the 'Beyond HTML basics' discussion. <br /><br /> # 'Readability and text display' - In the beginning, the web user had complete control over how text was displayed. This has been largely replaced by the developer deciding what is “best”. However, new research shows that readability and comprehension can be impacted by these choices. See for yourself. Access the [https://readabilitymatters.org/readabilitysandbox/ ReadabilityMatters.org Sandbox] and adjust the sliders to change the text display. Think about what you read and what settings would be better (or worse) for each. Phone, tablet, laptop, desktop? Academic papers, books for pleasure, searching for specific information within text? How about on standardized tests, assignment instructions or even math problem descriptions? Could text display make a difference to you? Post you observations in the 'Readability demo' discussion.<br />https://readabilitymatters.org/readabilitysandbox/ <br /> Now look at your browser setting or preferences. You can adjust some of these readability settings for your browser. Try some out. Does this improve your web viewing experience?<br><br> # Data visualization - There are many different ways to display numbers and statistics. Tables are convenient but can be overwhelming. Other data displays include charts, infographics and interactive animations. Find an example for an interesting display that is an effective way to convey the information. Post a link to your selection and provide a brief description of why this is better than just a table of numbers to the 'Data Visualization' discussion. Review 3 others and post a comment comparing effectiveness of these to the one you selected.<br /><br /> # Success Skills - 'Solve it' - There are many tools available on the web to help with problem solving skills development and practice. Critical Thinking, Problem Solving and Decision Making are the primary focus of the articles provided. Review the articles from the Success skills - SOLVE list in the Media section and find an online example of the skill being applied. Post a link and a brief summary to the 'Success Skills - Solve it' discussion.<br><br> # 'eCommerce' - Some of the “best” examples of web site design are the sites that sell stuff. Find a site that sells products or services online - not Amazon. Think about why the customer visits this site. How does the site design help the customer buy from the site? Post a link to a commercial web site with a brief description of what makes this a successful (or not) web design to the 'eCommerce site design' discussion. Keep the description short - 2-3 sentences. <br /><br /> # 'Group Project groups discussions - Web Design' - Practice evaluating web design. You have looked a several sites for this module. Pick one and evaluate the site design. What are you looking for in good web design? What have you learned about web design? How would you apply these design ideas to your own work? Provide a link to the example and brief description of the the design feature. 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.

media When 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 19 CSS Variables . Chapter 20 CSS Preprocessors . Chapter 25 Going Beyond HTML & CSS

* [https://www.sitepoint.com/meta-tags-html-basics-best-practices/ HTML Meta Tags] - name attribute - description, author, keywords

* [http://www.textfixer.com/ Text Fixer] - tutorials, code creator * [http://thoughtcatalog.com/charlie-shaw/2014/05/27-people-share-the-one-cool-internet-or-computer-trick-they-know/ 27 People Share The One Cool Internet Or Computer Trick They Know] - these suggestions are not something you are going to use everyday, but it is interesting that you can do this

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

SEARCH ENGINE OPTIMIZATION (SEO)

'[https://www.datadial.net/resources/definitive-seo/ THE DEFINITIVE GUIDE TO SEO]' : There are three broad types of search to be aware of. Ultimately they’re defined by searcher intent. Navigational, Informational, Transactional <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/SEO</rss>

JAVASCRIPT

'[http://eloquentjavascript.net/index.html 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.

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

BEYOND HTML <br /> Programming Languages - Javascript, SQL, PHP, Python, jQuery, development tools

'[https://www.upwork.com/blog/2014/03/10-best-web-development-tutorials-beginners/ 10 Best Web Development Tutorials For Beginners]' : Maybe you’re looking to build a website for the business you’re bootstrapping from the ground up. Maybe you’d like to enter the world of web development and are looking for an introduction to coding. Or maybe you’re just trying to stay a step ahead (or behind) your hacker kid. Whatever the case, we’ve got the resources to help you get started. Here’s a list of the 10 best web development tutorials for beginners. <rss date=“” max=“5”>http://www.diigo.com/rss/user/vtaylor/beyondhtml</rss>

INTERNET OF THINGS (IoT) <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/iothings</rss>

WEBSITE MANAGEMENT <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/webmngmt</rss>

WEBWORK - developer jobs <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/webwork</rss>

E-COMMERCE <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/ecommerce</rss>

SOLVE <rss date=“” max=“3”>http://www.diigo.com/rss/user/vtaylor/solveit</rss> </onlyinclude>

2016.3 2540 . 2018.3 5131 . 2020.11 9544