Resources
From WikiEducator
- whole assignments pages - comment out onlyinclude
- media only version - include to limit capture to just the Media section - mostly diigo rss by tag
Contents
1. Getting Started
The course follows the textbook. In each module, there is a reference to the relevant textbook chapters as well as to online tutorials and reference guides listed in the Media section.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
- Introduction
- Chapter 1 What Are HTML and CSS?
- Chapter 3 HTML Syntax
- Chapter 11 Introduction to CSS
Also
- Code from the textbook
- Videos - to access, register for the web edition
- the collection of different websites around the world, containing different information shared via local servers(or computers).
- commonly known as the Web, is an information system enabling documents and other web resources to be accessed over the Internet.
Coding Projects
Glitch - coding projects details
- Instant editing. Click a button, you’re editing code. Start typing, your site updates. Our editor gets you moving fast, from any computer with a browser.
- glitch browser supported. https://help.glitch.com/kb/article/88-what-are-...
- What are the supported browsers for Glitch?print iconviews icon 2368We recomm...
- Hello Website starter project updates! - Glitch Changelog - Glitch Community...
- "We’ve made a few changes to the Glitch Hello Website starter project...
- Your Project Dashboard - Glitch Support
- "Your dashboard shows all of the Glitch projects that you own. Here i...
WEB LITERACY
- Web Literacy Standard provides a framework for reading, writing and participating on the web | Mozilla Foundation
- "Mozilla Foundation Blog ArchiveMozillaWeb Literacy Standard provides a framework for reading, writing and participating on the webMozillaJul262013Today we’re excited to announce the beta la...
- Web Literacy - Mozilla Learning
- "web mechanics Using and understanding the differences between URLs, IP addresses and search terms. Identifying where data is in the network of devices that makes up the Internet."<...
- Web Literacy 2.0
- good citizens of the web, Mozilla focuses on the following goals: 1) develop more educators, advocates, and community leaders who can leverage and advance the web as an open and public resource, an...
BASICS
- HTML - GeeksforGeeks
- HTML is used to create the structure of web pages that are displayed on the World Wide Web (www). It contains Tags and Attributes that are used to design the web pages. Also, we can link multiple p...
- How the web works - Learn web development | MDN
- a simplified view of what happens when you view a webpage in a web browser on your computer or phone.This theory is not essential to writing web code in the short term, but before long you'll r...
- Front-end web developer - Learn web development | MDN
- structured course that will teach you all you need to know to become a front-end web developer. Work through each section, learning new skills (or improving existing ones) as you go along. Backgrou...
CSS - Cascading StyleSheets
- How to Link CSS to HTML – Stylesheet File Linking
- To link your CSS to your HTML, you have to use the link tag with some relevant attributes.The link tag is a self-closing tag you should put at the head section of your HTML.To link CSS to HTML with...
- CSS basics - Learn web development | MDN
- Selector This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, elements). To style a different element, change the selector.Declara...
- 28 outstanding examples of CSS | Creative Bloq
- 28 great examples of CSS sites that will provide a burst of web design inspirationBuilt using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers...
HTML / CSS TUTORIALS
- 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.EVERYTHING you need to learn Web Dev or keep your skills current in 2020! This curated list covers b...
- HTML Tutorial - How to Make a Super Simple Website - YouTube
- If you're an absolute beginner in web development, you can learn the basics of HTML here. This video covers setting up an HTML file, and the basic HTML tags and what they mean. Download the web...
- Learn HTML Videos - W3schools
- We have made a video tutorial thatcovers all the basics of HTML- in a new fun format :-} Watch the first chapter for free! whole course $9.99Video courseLearn HTML by watching an educational cartoo...
2. HTML Basics
The CIS89A Web Development course introduces Cascading Style Sheets (CSS) right from the beginning. The CSS references are usually covered separately from basic HTML coding.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 4 Basic HTML Elements . Chapter 6 Structure and Layout with HTML . Chapter 12 Targeting Elements
In addition to the textbook, many of the details of elements and attributes for the the elements are available from online sources. Because these change, the textbook just covers the basics. Below are links to some of the resources. Other resources are available - just search online.
Lists
- HTML Lists
- HTML Unordered Lists - The CSS list-style-type property is used to define the style of the list item marker.
- HTML Ordered Lists
Examples
- AJM Photo
- "Welcome to AJM PhotoOrdered Lists Birds are great Birds are gre...
- HTML and CSS Basics
- "Hi there!I'm learning web development!I'm your cool new webpage. Made wit...
HTML
- simple HTML and CSS code editor, provides preview of the web page you are working on as you work, provides hints, syntax as you type
- custom list bullets or markers that are little pictures
.. basics,video - these are just a few of thousands of video tutorials
- HTML Crash Course For Absolute Beginners - YouTube
- In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We wi...
.. htmltutorial - online resources
- 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.EVERYTHING you need to learn Web Dev or keep your skills current in 2020! This curated list covers b...
- HTML Tutorial - How to Make a Super Simple Website - YouTube
- If you're an absolute beginner in web development, you can learn the basics of HTML here. This video covers setting up an HTML file, and the basic HTML tags and what they mean. Download the web...
- Learn HTML Videos - W3schools
- We have made a video tutorial thatcovers all the basics of HTML- in a new fun format :-} Watch the first chapter for free! whole course $9.99Video courseLearn HTML by watching an educational cartoo...
Cascading StyleSheets (CSS)
- many examples of CSS style sheets
- nice list of examples of the CSS code for specific styling.
- How to Link CSS to HTML – Stylesheet File Linking
- To link your CSS to your HTML, you have to use the link tag with some relevant attributes.The link tag is a self-closing tag you should put at the head section of your HTML.To link CSS to HTML with...
HTML Checkers
- The W3C Markup Validation Service
- Markup Validation Service Check the markup (HTML, XHTML, …) of Web documents. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. there are other valida...
- 15 Most Popular HTML Validator Online Tools in 2020
- HTML Validator can be defined as the process to validate HTML web elements for any syntax or format errors.Why validators came into the picture?When a developer designs a perfect web page, then he...
HTML / CSS REFERENCE
- HTML Reference
- HTML Tags Ordered AlphabeticallyHTML Reference With Browser SupportThe table below lists all HTML elements and their attributes, along with browser support:Defines the document type<a> Defin...
- References | HTML Dog
- HTML ReferencesTag-by-tag, property-by-property, and more, references for HTML and CSS. Tags: All of the valid HTML5 tags, with description and usage, example, and required and optional attribut...
INTERNET
- Your Info Is All Over the Internet – Here's How To Clear It Up - Newsweek
- with personal data increasingly becoming a commodity, concerns over privacy and data security are more relevant than ever.The advent of digital tools and services has made it easier for data broker...
- Types of central processing units (CPUs) - IBM Blog
- CPU types are designated according to the kind of chip that they use for processing data. There’s a wide variety of processors and microprocessors available, with new powerhouse processors always...
- What is Web3 and Why It Matters | On Digital Strategy | Dion Hinchcliffe
- the future of the Web, especially as it relates to creating, storing, and exchanging information, can be better achieved by incorporating decentralization based on blockchains. That’s really it,...
FIND
- What Are Research Skills? Definition, Examples and Tips | Indeed.com
- Research skills are the ability to find an answer to a question or a solution to a problem. They include your ability to gather information about a topic, review that information and analyze and in...
- How Search Works - YouTube
- The life span of a Google query is less then 1/2 second, and involves quite a few steps before you see the most relevant results. Here's how it all works. page rank, search results, ads transcr...
- Perplexity Blog
- "What's the difference between Quick Search vs. Copilot Search?While Quick Search gives you fast, basic answers, Copilot goes further. It asks for details, considers your preferences, dive...
READ
- 12 Crucial Strategies for Promoting Team Collaboration
- Ideally, you should be discussing your team's goals on a daily basis.A team that knows their individual -- as well as collective -- goals helps to reduce silos and keep everyone productive.Morn...
- Evaluating Internet Resources | Georgetown University Library
- information available on the Internet is not regulated for quality or accuracy; therefore, it is particularly important for the individual Internet user to evaluate the resource or information. Kee...
3. Links
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
- Chapter 2 Creating a Website on Your Computer
- Chapter 5 Links
- Chapter 21 Getting Your Website Online - Making Your Site Live p.269-272 for information about transferring files to the web
- The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
- The A element is the tag you use to create a link. It is also referred to as the anchor tag. Use the title attribute in a link to improve accessibility
- The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element
- To style links appropriately, put the :hover rule after the :link and :visited rules
- add subject to the link
Examples
- Working with Links
- "Working with LinksThis website provides a...
- Coffe Shop
- "Coffe ShopHome Menu Learn more about C...
- Theodore Willis
- "Theodore WillisEditor illustrationWeb Dev...
LINKS
- Better Labels for Website Links: the 4 Ss for Encouraging clicks (Video)
- links should follow the 4 S, which is Specific, Sincere, Substantial, and Succint (concision). I would try to follow this advice when creating my website since, as of right now, I still do the Lear...
- Difference Between URL and IP Address | Difference Between
- In order to find what you want on the internet, you need to have a pointer of where to find it. URLs (Uniform Resource Locators) and IP addresses are just identifiers used for this purpose. The mai...
- mailto: Links with Parameters for Recipient, Subject and Body
- It is important to note that the subject must be URL-encoded, e.g. a space in "Hello World" becomes %20 so that the subject would be "Hello%20World"."
<p cla... - Styling Links in CSS - New2HTML
- Controlling Link BehaviorThe behavior of a link refers to how that link is displayed on a web page, what happens when a user hovers over it as well as what happens at the point it is clicked and af...
ACCESSIBILITY
- Accessibility Tutorial
- Accessibility is about making web pages accessible for everyone, also people with disabilites. 25 tutorial pages for you to learn the fundamentals of Accessibility: meaningful image text, link stat...
- Screen Reader Demo for Digital Accessibility.
- Screen Reader - what it is, how it works
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtay... - HTML: A good basis for accessibility - Learn web development | MDN
- A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at...
4. Images and Media
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
- Chapter 7 Media
- Look at the examples for Align image. Text wraps around the image. Usually the image will be to one side and the text will go by on the other side. In Wikipedia, all the images are aligned on the right side of the articles.
- Check your browser for HTML5 support
Examples
- Under the Sea!
- Sea TurtleA Turtle Swimming Under The Sea CC by Adrien JACTA. CC1.0Free to use under th...
- Module 4 Media
- Module 4 MediaVideo by eamonq on PixabayForest SunlightSun light beaming through the le...
- Dwarf Hamsters
- "Types of Dwarf Hamsters Campbell's dwarf hamster Roborovski dwarf hamst...
IMAGE EDITING
- LunaPic | Free Online Photo Editor
- Completely Free online photo editing. No signup, login or install needed! We're converting our existing help pages and support questions to this center. Please let us know if your question was...
- Free Online Photo Editor: Free & easy image editing - Canva
- "Free Online Photo EditorTake your photos from blah to brilliant with Canva's free online photo editor. Upload, edit, and share instantly from one place."
<p class=&quo...
MEDIA
- https://www.educatorstechnology.com/2023/12/music-sources-for-school-projects.html
- collection of websites that offer royalty free music to use in school projects. However, it’s crucial for both you and your students to remember that even when using royalty-free music from vario...
- 10 Image SEO Tips To Make A Website Users Will Love
- Being so closely tied to user search intent and user experience, images have a greater impact on your rankings than you realize.According to First Site Guide’s research, images make up 62.6% of a...
IMAGE MAP
- good tutorial on setting up and using image maps.
COPYRIGHT, FAIR USE
- really simple: If you did not write or create the article, graphic, or data that you found, then you need permission from the owner before you can copy it
- Planet Money: The prince of prints and his prints of Prince on Apple Podcasts
- In 1981, photographer Lynn Goldsmith took a portrait of the musician Prince. It's a pretty standard headshot — it's in black-and-white, and Prince is staring down the camera lens.This was...
- Helpful Web Resources for Learning about Copyright - Educators Technology
- "collection of helpful resources you can use with your students to teach them about copyright. But before we delve into the collection, let’s first discuss why learning about copyright is pi...
HTML5
- HTML5 - New Tags (Elements)
- The following tags (elements) have been introduced in HTML5 − <audio> Defines an audio file.<canvas> This is used for rendering dynamic bitmap graphics on the fly, such as graphs or...
- HTML5 - Tags Reference
- A complete list of standard tags available in HTML5 is given below. All the tags are ordered alphabetically along with an indication if they have been introduced newly or they have been deprecated...
CREATIVE COMMONS
- MHz Curationist | Opening Cultures Together
- "Opening Cultures Together Publishing materials found in the Creative Commons and public domain, Curationist is an ecosystem for framing the world we share."
<p class="... - CC Search
- Try the new CC Search beta, with list-making and one-click attribution! search.creativecommons.org is not a search engine, but rather offers convenient access to search services provided by other...
- https://course.oeru.org/lida103/learning-pathways/creative-commons/remix-and-compatibility/
- Generally speaking, when creating a derivative work, the more open the CC license of the source materials, the more options there are available for the licensing of resulting works. It is legally p...
XREALITY
- Should engineers buy the Apple Vision Pro? | Engineering.com
- Virtual reality (VR) and augmented reality (AR) have been slowly seeping into engineering offices over the past decade. The technology is being used to interact with CAD models, to help assemble sp...
- 360°, Northern lights in Norway, 12К video - YouTube
- "Don't forget that this is 360° video: you can change the angle of view.Lying north of the Arctic circle within the severe waters of the Norwegian sea, the Lofoten archipelago is known fo...
SHARE
- 10 Boomer Habits People Make Fun Of That Are Actually Good For You | YourTango
- mealtime routine is actually very good for you: eating dinner at the table, without the distraction of screens.Putting their phones away and eating at the table gives people built-in time to decomp...
- Downes.ca ~ Stephen's Web ~ Tight 20
- talk about for twenty minutes simply by organizing and presenting my thoughts on the topic. Do a 'quick three' - past, present or future; my view, your view, synthesis; etc. For each six mi...
- The Content Every High School Student Should Learn (But Doesn’t) | Getting Smart
- "three core types of skills expected by schools: core skills (typically the skills of writing, reading, mathematics, history, arts found in state standards), technological skills (industry ski...
- The 7 Habits of Highly Effective People | FranklinCovey
- Our character is a composite of our habits, which factors heavily in our lives. Because habits are consistent, unconscious patterns, they constantly express our character and result in our effectiv...
5. CSS Styling
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 13 Styling Text . Chapter 14 Color in CSS . Chapter 18 CSS Transformations and Animations
Examples
- Dreams
- °˖✧ Dreams ✧˖°Click here for the unstyled version of this webpage!A dream is a...
- Ice Cream Style
- The Origins of Ice CreamNo StyleThe origins of frozen desserts are obscure, although se...
- Week 5
- "Week 5 Project gradient backgroundhere's a header (imported font: courier...
STYLING
- CSS styling text - Learn web development | MDN
- the essentials behind styling HTML text content.Fundamental text and font styling In this article we go through all the basics of text/font styling in detail, including setting font weight, fami...
- 28 outstanding examples of CSS | Creative Bloq
- 28 great examples of CSS sites that will provide a burst of web design inspirationBuilt using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers...
- 25 cool CSS animation effects and how to create them | Creative Bloq
- Delivering thoughtful, fluid animations that contribute meaningful depth to your site doesn’t have to be difficult. Modern CSS properties now hand you nearly all of the tools you’ll need to cre...
TEXT
- Formatting Text Using CSS - Tutorial Republic
- CSS text properties allow you to define several text styles such as color, alignment, spacing, decoration, transformation etc. very easily an effectively.CSS has several properties for defining the...
- Lorem Ipsum - All the facts
- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of...
- Variable Fonts
- Variable fonts are coming. How will it change the web design and development process? Tim Brown and Bram Stein explain how variable fonts will work and what you can do with them now."
...
Design Thinking
- How to apply a design thinking, HCD, UX or any creative process from scratch | by Dan Nessler | Digital Experience Design | Medium
- "The Double Diamond is a structured design approach to tackle challenges in four phases: Discover /Research— insight into the problem (diverging) Define/Synthesis — the area to focus...
- Practice Guide to Solve Problems with TRIZ
- the principal that somebody, sometime, somewhere has already solved your problem or one similar to it and creativity means finding that solution and adapting it to the current problem; and the pri...
- SWOT Analysis: Exploring Innovation and Creativity within Organizations
- " SWOT analysis is one of the methods that is used to evaluate strength (S), weakness (W), opportunities (O) and threats (T) involved in innovative ideas and strategies. It can be applied to p...
Coding, programming
- 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.
- write code and see the results right away.
- for web development – JavaScript, Python, Java, PHP, Ruby, C#
- Getting started | micro:bit
- "The BBC micro:bit is an award-winning programmable device that allows students to get hands-on with coding and digital making. Use it to inspire your students to recognise the power of techno...
- BBC micro:bit v2 : ID 4781 : $17.95 : Adafruit Industries, Unique & fun DIY electronics and kits
- "BBC micro:bit v2Product ID: 4781$17.95There are multiple versions of this item. Please select one from the options below: Single BBC micro:bit v2 $17.95 Single micro:bit v2 Go Bundle -...
USE
- Ditch Your To-Do List and Do This Instead | Sam Corcos | The Tim Ferriss Show - YouTube
- A different way to schedule your time based on your calendar and realistic times for tasks to do.
<p class="diigo-tags"><strong>Tags:</strong>... - Switching Between Skimming and Focusing | Edutopia
- kimming allows learners to broaden their horizons to a wide range of subjects and ideas without committing excessive time to any single one. This breadth of knowledge can lead to serendipitous disc...
- How to Excel at Self-Directed Learning in 5 Steps | Fuse Classroom
- Self-directed learning allows students to become independent learners, helping them not just obtain skills but also practice of independent learning. Students have the freedom to create their own c...
6. CSS Layout
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 15 Using CSS for Page Layout . Chapter 16 Layouts with CSS Grid and Flexbox
Examples
- CSS Layout Project
- Floating and PositioningThis is a floated left div.PositioningThis is a positioned righ...
- Famous Places in The World to Visit
- "Explore Most Beautiful Tropical/Warm Places in The WorldLet your imagination wand...
- CSS for layout
- "CSS for layoutWeekSixAssignmentTop left boxBlue box!Top right boxRed box!Bottom l...
FLEXBOX
- Flexbox Tutorial (CSS): Real Layout Examples - YouTube
- "Learn how to use Flexbox to create different layouts. Link to code used in this video Link to more about browser support:display flex/flex 12:57 three column layout (order)9:09 (margins flex...
- CSS Flexbox (Flexible Box)
- The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.Like we specified in the previous chapter, this is a flex container...
- A Visual Guide to CSS3 Flexbox Properties
- layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size. The prime characteristic of the flex container is...
- A Complete Guide to Flexbox | CSS-Tricks
- comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and t...
ACCESSIBILITY
- Accessibility Tutorial
- Accessibility is about making web pages accessible for everyone, also people with disabilites. 25 tutorial pages for you to learn the fundamentals of Accessibility: meaningful image text, link stat...
- Screen Reader Demo for Digital Accessibility.
- Screen Reader - what it is, how it works
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtay... - HTML: A good basis for accessibility - Learn web development | MDN
- A great deal of web content can be made accessible just by making sure the correct Hypertext Markup Language elements are used for the correct purpose at all times. This article looks in detail at...
Mixed Reality (xreality)
- Should engineers buy the Apple Vision Pro? | Engineering.com
- Virtual reality (VR) and augmented reality (AR) have been slowly seeping into engineering offices over the past decade. The technology is being used to interact with CAD models, to help assemble sp...
- 360°, Northern lights in Norway, 12К video - YouTube
- "Don't forget that this is 360° video: you can change the angle of view.Lying north of the Arctic circle within the severe waters of the Norwegian sea, the Lofoten archipelago is known fo...
- Google Arts & Culture
- "Step inside a galleryWith Augmented RealityDiscover Indian MiniaturesSee the tiny works up closeInside the Jean Pigozzi CollectionArt from Africa to JapanGetty Museum: Immersive ExperienceDis...
PROTECT
- Beat The Hackers and Stay Safe!
- Here are some other signs that might suggest you're the victim of a digital break-in: Your system or device is running way slower than it used to. Your devices seem to be overheating and...
- What is catfishing and what can you do if you are catfished? | CNN Business
- Catfishing is when a person uses false information and images to create a fake identity online with the intention to trick, harass, or scam another person. It is often on social media or dating app...
- 5 financial scams to watch out for in 2024
- "Fraud cost U.S. consumers more than $7 billion in the first three quarters of 2023, a 5% increase from the same period a year earlier, according to the Federal Trade Commission.If you are awa...
- Google's new settings let you remove your private info from search results. Here's how | ZDNET
- new dashboard for an existing feature called Results about you. Introduced in 2022, this feature lets you track any personal details that pop up in a search result so that you can ask Google to rem...
7. Responsive Web Design
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 16 Layouts with CSS Grid and Flexbox * Chapter 17 Responsive Design and Media Queries
- HTML Dog HTML Beginner Tutorial
- http://www.w3schools.com/
- HTML/Elements - This is the list of HTML and related Elements from the past to the present. ** Great reference - all tags listed by type with link to explanation and examples
Examples
- 7. Responsive Web Design
- Responsive Web Design PageThis is an example of a gridThis is the second item in the gr...
- Responsive Design
- Module 7 Responsive Web DesignThis site will change depending on the size of the window...
- Crypto Currency Website
- "Crypto Currency Home About Services Contact BitcoinLorem ipsum dolor sit amet,...
GRID
- CSS Grid Layout - CSS: Cascading Style Sheets | MDN
- CSS Grid Layout excels at dividing a page into major regions or defining the relationsh...
- CSS Grid Layout
- The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, ma...
- 9 Biggest Mistakes with CSS Grid - YouTube
- It's easy to make lots of mistakes with a new technology, especially something that...
RESPONSIVE
- make sure your site is mobile-friendly.
Responsive Web Design (2010 - first description)
- The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'
- Responsive Web Design Media Queries
- Always Design for Mobile First - Media queries page with rows and columns parts will behave differently on each side of the breakpoint look good on a small screen. display faster on smaller device...
- How to create a responsive image gallery with CSS flexbox - LogRocket Blog
- CSS flexbox is widely supported by modern browsers and partially supported in older browsers like IE 10 and IE 11. See browser support here.Browser Support CSS FlexboxThis extensive support makes C...
- HTML5 and CSS3 Responsive design with media queries - YouTube
- 15:57 introductory overview of how media queries work and how they can assist you in making a responsive website. The pacing is kind of slow for the initial set up but the video starts getting int...
WEB DESIGN
- UI Design Week
- the small design decisions that have had an outsize impact on our lives. From simple card game browser UIs to deliberately complicated video game setups, all-too-forgotten accessibility options for...
- Readability Matters | Technology for Better Reading
- Readability is about the reader – the ease with which a reader can successfully decipher, process, and make meaning of the text read. Typographical features of the text are critical; letter shape...
- The 37signals Manifesto (our original site from 1999)
- The web should empower, not frustrateWe design visual interfaces (what people see and how they use it) for web sites and applications. We focus on making sure these sites are both useful and easy t...
PARTICIPATE
- Our Super Simple Guide to Networking and Socializing Online | Vibe
- "even though work offers some methods for socializing online through text apps and virtual meet-ups, you may be looking for other ways to talk to people.It’s also important to socialize with...
- Career Coach - Teamwork - Making a Contribution
- Celebrate your team's achievements. This will encourage cohesiveness and pride in what you are doing. For example, if your team has reached a new plateau in its performance, bring baked goods t...
- Tips for Students: How to Contribute Positively to a Team - The Cengage Blog
- be prepared to lead whenever necessary. Even if you don’t view yourself as a “leader,” you may find yourself in a situation that requires you to take on that role. Perhaps you have specific k...
MAKE
- Creativity Rubrics | MyPBLWorks
- 2022 Creativity Rubric These research-based rubrics are designed to provide useful, formative information that teachers can use to guide instruction and provide feedback to students on their overal...
- Scrintal is a great new tool for brainstorming ideas and projects
- Map out a project. Organizing multistep projects can be challenging. Scrintal lets you easily focus on one element at a time. Create notes for pieces of your project, then step back and look at the...
- With Just 2 Sentences, Steve Jobs Revealed a Beautiful Truth About Making Mistakes | Inc.com
- beautiful lesson about success. You see, success isn't the pursuit of not making mistakes. Almost always, mistakes are the way you find your way to whatever you define as success. Mistakes are...
8. Tables, Forms
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 8 Tables and Other Structured Data Elements . Chapter 9 Web Forms . Chapter 10 Advanced and Experimental Features
Examples
- HTML Tables and Forms
- Using HTML Tables and Forms!By Krithi TandyalaTableRed Fruit Green Fruit Yellow Fruit...
- Tables and Forms
- Tables and FormsSample TableThis is an example table for formatting purposes. Extended...
- Week 8
- "Week 8 ProjectTable 1header 1 header 2 header 3item 1 item 2 item 3these hav...
TABLES
- https://www.youtube.com/watch?v=II4WmRvzZTA&embeds_referring_euri=https%3A%2F%2Fdeanza.instructure.com%2F
- Tables can be a useful way to organize certain types of content visually. But tables add an extra layer of complexity for students using a screen reader device which means it’s imperative your ta...
- HTML tables - Learn web development | MDN
- display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes...
- HTML table advanced features and accessibility - Learn web development | MDN
- more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visua...
- HTML Tables Tutorial - YouTube
- video 9:37 - how to code HTML tables and add basic styling with CSS - tabular data, grocery list example with multiple items and values. when to use them, simple coding example see how each tag rel...
FORMS
- Web forms — Working with user data - Learn web development | MDN
- Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface.essential aspects of Web f...
- GET vs POST - Difference and Comparison | Diffen
- HTTP POST requests supply additional data from the client (browser) to the server in the message body. In contrast, GET requests include all required data in the URL. Forms in HTML can use either m...
- HTML Tutorial for Beginners: 19 Creating a Submit Button for Forms - YouTube
- video explains how to create a submit button for html forms. It applies to Module 9 and is 3 minutes and 52 seconds long. how to build and grow your business, find niche opportunities, market your...
- Styling HTML forms - Learn web development | MDN
- use CSS with HTML forms to make them more beautiful. Surprisingly, this can be a little bit tricky. For historical and technical reasons, form widgets don't mesh well with CSS. Because of those...
PORTFOLIO
- How to make a personal website in 11 steps | Webflow Blog
- We know that you want to share unique interests, expertise, and personality with the world.A personal website is a great opportunity to get your personality and skills out there. We’re going to t...
- 20 Best Portfolio Websites to See Before Creating Your Own
- what distinguishes you from other creatives and how you can express this in your design, a great place to start is to search for inspiration by looking at the works of others. Before creating your...
- 5 Design Principles For Building Your First Portfolio | Dribbble
- Strategize first, write second, design lastAs a designer, it’s natural to want to jump into the “designing” part of a project. Excitement builds as you think about cool design ideas and how y...
- Six easy steps to create a successful online portfolio | Creative Boom
- "Keep it simple and remember your goalsFirst impressions do count. When someone lands on your portfolio site, you’ll want them to feel compelled to stay and, ultimately, decide to hire you.I...
WRITE
- The Complete Guide to Cross-cultural Design | Toptal
- When designing cross-cultural products, designers not only have to contend with different languages, dialects, and dimensions of national culture, but also cultural differences in color psychology...
- Cultural factors in web design | Creative Bloq
- People need to feel at home with the cultural references in our designs. By using the variables above, we can create culturally responsive sites that are accepted and used by people across the glob...
- Webmaker/WebLiteracyMap/Building - MozillaWiki
- "Composing for the WebCreating and curating content for the Web Inserting hyperlinks into a web page Identifying and using HTML tags Embedding multimedia content into a web page Cr...
FINANCIAL LITERACY
Dilbert’s One-Page Guide to Everything Financial
- if you like Dilbert and understand the corporate hell that he lives in. Otherwise, without further ado, here is Dilbert’s One-Page Guide to Everything Financial: Make a will. Pay off your credit cards. Get term life insurance if you have a family to support. Fund your 401k to the maximum.
- How to pay off credit card debt | U.S. Bank
- "With a few simple tips, you can learn how to tackle credit card debt and create a payment plan that works for you.If you’ve accumulated some credit card debt and are looking to pay it off o...
- 11 Free Personal Finance Excel Templates for Budgeting
- efficient, easy-to-use and free Excel template for personal budget or personal finance, Managing personal budget and finances are the necessary actions that help you save money. However, managing p...
- Monthly budget template: Track your spending by month | QuickBooks
- "essentially the first step towards financial stability. Having a working budget in place will help you identify exactly where you stand with your finances. If you’re ready to create your bu...
9. Beyond HTML
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
-
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtaylor/seo' rel='tag'>seo<... - 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
- 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."
<p class="diigo-tags"><strong>Tags:</strong> <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
-
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtaylor/beyondhtml' rel='tag'>... - 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...
10. Site Planning
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 21 Getting Your Website Online . Chapter 22 Testing Your Website . Chapter 23 Improving Website Performance . Chapter 24 Web Accessibility
Examples
- Learning Resource - Site Plan
- "Learning ResourceProject Site PlanPurpose and Intended AudienceThe purpose of thi...
- Photography Portfolio
- "Purpose and AudienceMy final project is going to my photography portfolio. This y...
- Project Plan
- "Project PlansProject Statement and PurposeMy project site would be to recreate/co...
SITES - overall design considerations
- Google My Business - Get Your Free Business Listing on Google – Google
- Attract new customers with your free Google listing. Your listing appears right when people are searching for your business or businesses like yours on Google Search and Maps. Google My Business ma...
- 7 Proven Ways to Know Your Audience Better
- Review any current data and analytics Look to previous successes among your audience Create buyer personas Conduct surveys Keep an eye on your competitors Monitor audience feedba...
- Designing a new Foundation: Spotify for Desktop | Spotify Design
- The new Desktop app has rolled out, replacing one of Spotify’s oldest and most loved clients. As a Design Team, it's often difficult (sometimes impossible) to take big risks in order to build...
Usability considerations
- Accessible Websites: Best Practices for Educators | Tech & Learning
- "If you have an accessible website, guess what? You’ve reached the widest possible audience,” said Laura Ogando, program manager digital literacy and inclusion for the New York City Depart...
- 10 Principles Of Good Website Design — Smashing Magazine
- January 31, 2008 Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and theref...
Rubric - website development
- How to Plan a Web Development Project - YouTube
- Having a website project management plan is crucial to maximizing success when you are working on a web development project. Stay on top of your web dev projects and ensure you don’t miss any imp...
- Website Design Checklist: The Blueprint for a Perfect Site | UX 4Sight
- The website design checklist ensures that your site is visually appealing, user-friendly, and well-optimized. Also, it ensures that no aspect is overlooked, guaranteeing a high-quality and effectiv...
HTML validation tools - check your code
- The W3C Markup Validation Service
- Markup Validation Service Check the markup (HTML, XHTML, …) of Web documents. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. there are other valida...
- 15 Most Popular HTML Validator Online Tools in 2020
- HTML Validator can be defined as the process to validate HTML web elements for any syntax or format errors.Why validators came into the picture?When a developer designs a perfect web page, then he...
Hosting and domain registration - some examples - there are 100s
- The Best Web Hosting Providers for 2020 - CNET
- Find the best web hosting providers using price comparisons and reviews from our expert hosting editor. You can also find hosting for different needs like e-commerce, enterprise, specific content m...
- BEST WEB HOSTING SITES • TOP 10
- with hundreds of web hosting companies offering all kinds of hosting plans, it has become challenging to find balance between price, features, performance and support. On this page you will find a...
WEBDEV Web Developers tools
- 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...
- Ko-fi - Get Donations, Memberships and Shop Sales. No Fees!
- "Accept donations, monthly memberships and shop sales - all in one placeStart accepting donations in 60 seconds. Grow your income by opening your Ko-fi Shop, offering memberships or selling co...
11. Web Site Projects
Examples
- Portfolio
- "Welcome!Check out the projects I've created over the course. For more informa...
- Profolio Template
- I'm CD3. I believe in connecting people and creating new experiences together throu...
- Kaede gallary
- Kaede gallary Home News Contact AboutMiss No Mask DaysRead moreSimple Campi...
As a web developer, you need to be ready for the constant stream of changes within the industry. Here are some examples of areas of interest.
BEYONDHTML
- 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
-
<p class="diigo-tags"><strong>Tags:</strong> <a href='https://www.diigo.com/user/vtaylor/beyondhtml' rel='tag'>... - 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...
WEBWORK
- 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...
- 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...
- 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...
12. Summary, Peer Review
Something to think about - creativity
- Creativity Rubrics | MyPBLWorks
- 2022 Creativity Rubric These research-based rubrics are designed to provide useful, formative information that teachers can use to guide instruction and provide feedback to students on their overal...
- Triarchic theory of intelligence - Wikipedia
- "Synthetic giftedness is seen in creativity, intuition, and a study of the arts. People with synthetic giftedness are not often seen with the highest IQs because there are not currently any te...
- Adora Svitak: What adults can learn from kids | TED Talk
- Child prodigy Adora Svitak says the world needs "childish" thinking: bold ideas, wild creativity and especially optimism. Kids' big dreams deserve high expectations, she says, startin...
Peer review, collaboration
- Peer Review: 5 Smart Tips for Providing Constructive Feedback - Enago Academy
- Constructive criticism can vary across reviews, but the underlying motive is to support and strengthen the writing in progress. Referees must walk a proverbial tightrope to provide strategically ar...
- How-to: Peer Feedback 1 - YouTube
- In this four-part series, we will introduce you to the concept of Peer Feedback (PF) and cover how to use it to enhance your own language learning. Part 1: Why Peer Feedback (PF)? https://youtu...
- 60-Second Strategy: TAG Feedback | Edutopia
- TAG feedback. T, tell something you like. A, ask a question. G, give a suggestion.always start with a positive, something that the student did well. Then A, ask a question. Why did you make this de...
