CIS89A - 9. Beyond HTML

From WikiEducator
Jump to: navigation, search
Udine loggia Leonello

Beyond HTML

Tools are central to the web developer toolkit. They help make development work more efficient, code more robust, and teamwork easier. CSS preprocessors and postprocessors are available for writing CSS efficiently and accurately. An introduction to the building blocks of JavaScript serves as a good starting point for further exploration.

Learning outcomes

  • understand usability
  • follow design guidelines
  • understand the design process
  • transfer files to a web server
  • understand search optimization


  • usability, audience, FTP
  • preprocessor, postprocessor, JavaScript, client-side, scripting language, loop, if statement

Reading guide

  1. What types of development tools are available?
  2. What is GitHub? Why do developers use it?
  3. What is JavaScript?
  4. How can you use JavaScript to improve your visitors' experience?
  5. What are some of the basic blocks and functions?


Coding assignment * beyond HTML basics

  • html head title meta (keywords description) * lists links tables * viewport
  • css fluid layout * scalable images
  • comments in html and css

  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. Textbook - Willard Chapter 16. HTML for Email

  3. 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.
  4. 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?

  5. JavaScript - Learn what you can about JavaScript in 30 minutes. Use any of the resources listed in the Media section below, online tutorials, instructional material from a JavaScript course. 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? Are you interested enough to want to learn more about JavaScript? 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.

  6. Search Engine Optimization (SEO) - Being "found" and listed in search results is an important part of publicizing your site. The elements in head section of the page are used for this. More than just Google, there are Baidu, Bing, and Yahoo! and others. 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 discussion.

  7. 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.

  8. Web developer jobs - There are many skills and roles available for web developers. 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. 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.

  9. Revisit basics - In a new project, use or reuse the items listed within your page. Include some descriptive information so the viewer knows what is being demonstrated within your page. Also, use comments in your HTML code to indicate what you are doing. Publish your project file.
  10. Submit the link to your project to the Revisit basics assignment.
  11. Post a link to your project and any comments or questions about the assignment to the Revisit basics discussion.
  12. Review the work of 2 others - the page display and the source 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 Revisit basics discussion.

  13. 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.

  14. 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 2-3 articles from the Success skills - SOLVE list in the Media section below. Find another similar article that your would recommend be added to the list. Post a link and a brief summary of 1 to the Success Skills - Solve it discussion.

  15. Phishing - Do you think you know an email scam when you see one? Take this quiz and see if you can tell the real corporate emails to customers from the phishing scams. I got 7 out of 10 right. I missed 1 scam but I would have ignored two real requests from companies I do business with.

  16. 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. 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.

  17. 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.

Icon multimedia.gif


  • Textbook - Willard Chapter 16. HTML for Email

Internet/computer tricks


Webpage metadata tips and examples for 2018
metadata?While not a visual element on a page, its metadata—page titles and meta descriptions—shapes how your content is perceived. Web writers create metadata to summarize a webpage’s conten...
SEO and Usability
What makes a website good will also give it a high SERP rank, but overly tricky search engine optimization can undermine the user experience.At first glance, search engine optimization (SEO) and us...
Social Media SEO: What You Need to Know to Grow Your Business
With social media growing at warp speed, it is becoming an unavoidable part of SEO, especially because it is made up of real people. After content, social media can be seen as an integral factor in...


Why Learn JavaScript - Best Programming Language
ComplexAlthough all browsers implement JavaScript, the same code doesn't necessarily behaves the same way in different browser environments, so trying to figure out why your code works in Chrom...
What is JavaScript? - Learn web development | MDN
The core client-side JavaScript language consists of some common programming features that allow you to do things like: Store useful values inside variables. In the above example for instance, w...
10 Reasons Why You Should Learn JavaScript
It’s Everywhere: Javascript is everywhere. Perhaps it was inspired by the co-founder of StackOverflow Jeff Atwood’s famous Atwood’s Law: Everything that can be written in javascript will b...

Programming Languages - Javascript, SQL, PHP, Python, jQuery, development tools

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.
Top 10 Trending Artificial Intelligence Frameworks and Libraries
what languages/frameworks/libraries to use?” That’s exactly what we will cover today in this review of the top 10 AI frameworks and libraries every programmer must know. Artificial Intelligence...
Beginners Guide to Web Service APIs – Intuiface
In computer programming, an application programming interface (API) is a set of subroutine definitions, protocols, and tools for building application software. In general terms, it is a set of clea...
About Python™ |
Python is powerful... and fast;plays well with others;runs everywhere;is friendly & easy to learn;is Open. Python can be easy to pick up whether you're a first time programmer or you're...


Tackling Zimbabwe's urban food insecurity through the Internet of Things | Internet Society Foundation
a team of students is piloting an innovative solution: aquaponic urban farming using the Internet of Things (IoT) to increase food self-sufficiency in Mbare. The project, led by the Internet Societ...
Disrupting the metal fabrication business model with IIoT
Industrial internet of things (IIoT) could spur new business models that will change who owns what in the metal fabrication supply chain.They don’t pay for the engines themselves, only their use...
Internet of Things Security | Ken Munro | TEDxDornbirn - YouTube
how the IOT puts personal information at risk, and how dangerous that can be in the wrong hands. The real world examples are helpful and the TedTalk is enterataining as well as educational.

WEBWORK - developer jobs

Job and Internship Sites
There are many places to search for jobs and internships online. Here are some places to start.April 2020 UpdateHere is a great list compiled by Candor on companies that are still hiring, or have h...
YouTube - Web Development Tutorial for Beginners (#1) - How to build webpages with HTML
In this video, we'll cover how to develop websites using just the computer you have already.I'm using Sublime Text editor and Google Chrome
Things I Wish I Knew Before I Started Web Development - DEV
There's always more than one way to handle a task and multiple ways are optimal. It takes more problem solving skills than math skills to be a good developer. Getting to the root of an issue or...


Top 5 Things You Need Before Setting Up An Online Store - WooCommerce
Shopping Cart or Store PlatformThere are numerous shopping carts available to power your e-commerce store. If your site is WordPress-based, you have plenty of plugin options to sort through. You ma...
Online Store Builder – Create an Ecommerce Store with Shopify
Any payment gatewayWe support over 100 payment gateways on Shopify.If you haven’t yet chosen a payment gateway for your online store, select one of our many supported gateways that let you accept...
6 technical aspects to set up before selling online
technical factors eCommerce newbies should cover before they add even a single product to their new store. From site software to security to payment gateways, here they are — plus how you can dec...


NASA’s Mars Helicopter Q&A with Project Manager MiMi Aung
Project Manager Mimi Aung answers #AskNASA questions about NASA's newly named Mars helicopter -- Ingenuity. Ingenuity will be the first aircraft to attempt powered flight on another planet. The...
Five Golden Rules for Successful Goal Setting - from
To make sure your goal is motivating, write down why it's valuable and important to you. Goal setting is a process that starts with careful consideration of what you want to achieve, and ends w...
How to Collaborate Successfully - Career Skills From
five-step approach to make sure your collaborations are successful:1. Define Your PurposeFirst and foremost, you need to have a strong shared purpose. Only when you know what you're working tow...

2016.3 2540 . 2018.3 5131