Ray and Maria Stata Center (MIT)

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

 Keywords

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

Reading guide

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

Assignments

Coding assignment * beyond HTML basics as a new project with the Gen Garden html file and all styling in your own linked css file

download the Gen Garden HTML File
all your own css code - see the grading rubric for suggestions of what to include
comments in css - 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.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* 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.
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.
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.
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.
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.
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.
Web developer jobs - There are many skills and roles available for web developers. ..see 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.
De Anza College has partnered with Handshake as a job and internship platform for students and employers. For more opportunities sign up for an account. Join and login to De Anza Handshake website to view available jobs and internships.
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.
VounteerMatch.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.
JavaScript - Learn about JavaScript. Review the resources listed in the Media section below, online tutorials, instructional material from JavaScript tutorials. Also review the 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.
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.
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.
Revisit basics - In a NEW ONE page project, demonstrate all the items listed within your page. Include some descriptive information about how the requirements are used. Also, use comments in your CSS code to indicate what you are doing. Publish your project file.
Submit the link to your project to the Revisit basics assignment.
Post a link to your project to the Revisit 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 Revisit basics discussion.
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 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.
https://readabilitymatters.org/readabilitysandbox/
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.
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.
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.
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

Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 19 CSS Variables . Chapter 20 CSS Preprocessors . Chapter 25 Going Beyond HTML & CSS

HTML Meta Tags - name attribute - description, author, keywords

Text Fixer - tutorials, code creator
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

Sample Page: "A Trip around the WorldWhere would you want to travel?Example ImagePopular Destin...
Xi's Website: "Thanksgiving Recipe images ingredients table videoTurkey ingredients tab...
The History of Tea: The History of Tea Origins of Tea Types of Tea Health Benefits of TeaOrigins o...

SEARCH ENGINE OPTIMIZATION (SEO)

SEO checklist – Squarespace Help Center: "built for clean indexing by search engines, but the content you add to your site and how you present it plays a big role in how well people can find you. As you prepare to publish your site,...
Ubersuggest: Free Keyword Research Tool - Neil Patel: Tags: <a href='https://www.diigo.com/user/vtaylor/seo' rel='tag'>seo&lt...
Find Your Campaign Keywords with Keyword Planner - Google Ads: "Choose the right keywordsThe right keywords can get your ad in front of the right customers, and Google Ads Keyword Planner is here to help. "
<p class="diigo-tags&qu...

JAVASCRIPT

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.

JavaScript language overview - JavaScript | MDN: a multi-paradigm, dynamic language with types and operators, standard built-in objects, and methods. Its syntax is based on the Java and C languages — many structures from those languages apply t...
W3Schools How TO - Code snippets for HTML, CSS and JavaScript: "Code snippets for HTML, CSS and JavaScript."
Tags: <a href='https://www.diig...

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

SF Symbols | Apple Developer Documentation: SF Symbols provides thousands of consistent, highly configurable symbols that integrate seamlessly with the San Francisco system font, automatically aligning with text in all weights and sizes.
Best alternative to WordPress of 2024 | TechRadar: When an online presence is an absolute must, the best solution is going for easy-to-use, flexible website builders that make website creation easy and fast without compromising quality. The possibi...
CodeJIKA: Tags: <a href='https://www.diigo.com/user/vtaylor/beyondhtml' rel='tag'&gt...
How web bloat impacts users with slow devices: Another pattern we can see is how the older sites are, in general, faster than the newer ones, with sites that (visually) look like they haven't been updated in a decade or two tending to be am...
5 Ways to Maximize Your Website Content in Less than an Hour: Websites are made up of content, and that content defines them.A website with a great design and bad content is a bad website. Alternatively, a website with a bad design and great content may not n...

INTERNET OF THINGS (IoT)

This Startup Is Building the Internet of Underwater Things: WSense’s innovative networking systems are transforming how we explore ocean environments. Water covers 72 percent of the Earth’s surface, its volumes host 80 percent of biodiversity and play a...
Casino Gets Hacked Through Its Internet-Connected Fish Tank Thermometer: "cybercriminals hacked an unnamed casino through its Internet-connected thermometer in an aquarium in the lobby of the casino.According to what Eagan claimed, the hackers exploited a vulnerabi...
Would a smart toilet leak your private info? - Futurity: Could someone hack a smart toilet and get personal health data? If so, they could learn if a smart toilet user was pregnant, had cancer, or was taking specific medications, for example—informatio...

WEBSITE MANAGEMENT

13 key steps of website management - ManageWP: ensure your website continues to operate without any issues and converts your visitors into customers.In this post, we’ll break down the tasks you need to complete on a daily, weekly, and monthly...
Managing Websites | HHS.gov: sample guidelines - gov HHS - If 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...
A Beginner’s Guide to Website Management in 2022: Managing a small business website is a lot bigger undertaking than perhaps most owners realize. However, as long as you take the following six steps, you can increase the likelihood that your websi...

WEBWORK - developer jobs

5 in-demand remote side hustles that pay $100,000 or more: While coding, programming and other tech specialties have always been sought-after side hustles, the recent spate of tech layoffs has prompted “unprecedented fluctuations” in demand for niche...
‎How I Built This with Guy Raz: Discord: Jason Citron on Apple Podcasts: During his early career, Jason Citron stepped away from two stalled businesses and pivoted—twice—to something far more successful. The second time he did it, he created one of the most popular...
Learn web development | MDN: Moving onto scripting If you are comfortable with HTML and CSS already, or you are mainly interested in coding, you'll want to move on to JavaScript or server-side development. Begin with ou...

E-COMMERCE

How To Become an Entrepreneur in 7 Simple Steps (2024) - Shopify: "become a entrepreneur in 7 steps Find a profitable business idea Develop a product Validate your product Write a business plan Secure funding Launch your business Manage...
How To Start an Online Store in 2024 (Step-by-Step Guide): how to start an online store, from choosing an ecommerce platform to designing your website to launching your first product. With the help of this comprehensive guide, you’ll be well on your way...
Faire - The Online Wholesale Marketplace & Store: Brands based in USABrands not sold on AmazonBlack-owned businessesShop Greeting CardsShop CandlesShop Cocktail MixesShop Throw BlanketsShop Earrings"
<p class="diigo-tags&q...

SOLVE

11 Active Listening Skills To Practice (With Examples) | Indeed.com: One of the most critical skills in effective communication is active listening. Developing this soft skill will help you build and maintain relationships,solve problems, improve processes and retai...
If you really want to reach your full potential, start saying “yes” to these 10 things: For many of us, reaching our full potential seems like an impossible task. We’re stuck in our 9 to 5 jobs and don’t even know where to start.On the other side, there are people who have succeed...
Steve Jobs Said Your Overall Success May Be Tied to This Powerful Thinking Habit | Inc.com: Exercise "clean thinking"Before embarking on a new project or strategy, it's crucial to strip away the unnecessary complexities and, as Jobs stated, "get your thinking clean.&quo...

2016.3 2540 . 2018.3 5131 . 2020.11 9544

CIS89A - 9. Beyond HTML

Contents

Assignments

Media

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Community

Print/export

Tools