CIS89A - 1. Getting Started
From WikiEducator
Getting started - Welcome!
- All web pages are built using a few essential elements. Through practice coding projects, reading and discussions, you will learn to develop entire web sites and control the appearance, formatting and contents of your sites using these elements.
Webmaking - More than just coding, webmaking is the act of creating, understanding, and promoting content on the Web
- The key skills of web development are teamwork, attention to detail, debugging, project management, distributed version control, the agile process, accessibility and usability, user needs analysis, user testing, and much more. You will have an opportunity to practice all of these as well.
This a 4.5 unit course, so you should expect to spend 12-18 hours on course work each week. The activities can be completed throughout the week. Don't try to do all the work at one time. Spread the work out through the week.
Learning outcomes
- explore the HTML language and the associated CSS formatting and element structures
- use the basic HTML elements for a simple web page
Keywords
- HTML, CSS, web, internet, element, tag, formatting, hypertext, markup language
Reading guide
- What is the origin of the HTML structure?
- Who is Tim Berners-Lee?
- What is the World Wide Web Foundation?
- Who controls the HTML and CSS standardization?
- Why is standardization important?
- Why do the HTML and CSS standards change? What is the process for making changes?
Contents
Assignments
NOTE: To remain enrolled in this course, ALL these assignments, activities and discussions must be completed by the due date for Module 1.
For each topic, there are a number of activities listed. These are all related to web development - coding practice, examples of design, user interface, accessibility, development tools and industry knowledge.
Assignments - overviews, descriptions, activities, discussion prompts, references, etc. are listed together on separate web pages for each Module. Links to the module pages are located in the Canvas Modules outline section with all the links for that module. To display the Modules outline, click on the Modules link in the left navigation menu on the main Canvas course page.
- Due Dates : ALL activities - discussions, quizzes, assignments, for a module are due on the due date for the module.
- College-level writing :Your responses to all assignments will be graded for college-level writing. Spelling and grammar errors will result in deductions.
- For full credit for discussion participation, complete and thoughtful replies must demonstrate original thinking and personal experience. Late submissions may be accepted for partial credit. An extension may be granted if requested prior to the due date.
Discussion participation
- Review - Just read what others have posted - No comments or reply required. There are good resources here if you are interested in learning more about the topic.
- Reply / Respond / Comment - Discussion participation - Post to this discussion with additional questions or comments.
Here are the activities for this module.
- Read the CIS89A: Web Page Development - Syllabus. There is a lot of important information in the syllabus including participation expectations and due dates for assignments. Please confirm that you have read the entire Syllabus and agree with everything in the I Read the Syllabus assignment. Note one specific item that you need to know to be successful in this course. If you have questions, please ask.
Important: This counts as having attended the first day of class.
- Learn about the Canvas course management system and online education. Complete the Online Education Center Orientation. Submit Online Orientation assignment.
. Other resources : Using Canvas . Canvas Resource Library for Students provides links to other DeAnza resources. Canvas Student Guide provides in-depth information about the Canvas learning management system.
- Introduce yourself to your classmates. Write a brief introduction in 140 characters or less.
For example, here is my introduction.
Valerie Taylor - always learning something new, sharing important and interesting ideas
Add 2-3 sentences telling us about you. What are your strengths? Are you interested in art, music, computer games, travel, cooking? What can we learn from you? Why you are taking this course and what do you hope to learn in the class? Post your introduction as a Reply to the Introductions and expectations discussion.
This is also an opportunity to meet classmates with similar interests. Ask others about their introductions using the "Reply" link to follow-up.
- Add a picture to your Canvas profile. Go to My profile setting, select Edit profile, and add a picture. This will show up as the little picture next to your discussion posts.
- Think about what you already know about the topic - Web Development. Write a sentence or two about this in the I know... discussion.
- Digital literacies - Can you identify these technologies and recognize how they may be of benefit to you and your web site audience. Complete this quick 30 question Digital Literacies quiz spanning six different genres, which suggests ways you can improve how you use technology.
This is a good quiz if it is accessible. Unfortunately, its html file contains code that is old and is not being handled by some browsers. This happens and makes web maintenance an ongoing process. Old pages are still relevant but the browsers get new and improved features that don't display the old code properly.
If you can access the Digital Literacy quiz, were your results interesting or surprising? Include a sentence about the results in your Introductions and expectations discussion post - you can reply to your post to add this note.
If you can't access the quiz, post a note with your computer and browser.
Digital Literacies Quiz http://wip.exeter.ac.uk/collaborate/itest/#questions
- Review the Keywords and Reading guide at the top of this page. These will help you look for important ideas in the rest of assignments for this module. Review the Media section (below - scroll down) for links to resources for this module.
- Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Introduction . Chapter 1 What Are HTML and CSS? . Chapter 3 HTML Syntax . AND Chapter 11 Introduction to CSS
NOTE: Online Content. Your purchase of this Visual Quickstart Guide includes online materials, code samples and video tutorials provided by way of your Account page on peachpit.com. You must register your purchase on peachpit.com in order to access them - see Introduction for details.
- View Page Source - Peek behind a website display view to see the HTML and CSS code used to create the website you see in your browser. Most browsers provide this function. For example, using Firefox to view the "source" - the HTML for the page - From the top menu Tools > Web Developer > Page Source. Or right-click and select View Page Source. When you activate the Page source option, all the behind-the-scenes HTML is displayed.
* Display any webpage in your browser window.
* Find the "display source" or tool to show the source code.
* Look through the HTML coding and see if you can determine how the HTML tags are being used.
Cascading Style Sheet .css file - also look for links to the external stylesheet file. link rel="stylesheet" href="style.css" This statement should be in the head section of the HTML source. Follow the link and look at the source code for this file too. This is a shared description for the display of any pages that link to this .css file. Complete the View HTML and CSS source code quiz.
- Professional web pages - Find a web page with a nice layout and good functionality. In the Learn from the Pros discussion, post a link to a web page that you like and give a brief description of the overall design and elements of the page. Make a note of this page as you will be learning some best practices of professional web development by analyzing the source code and evaluating the design of the site you selected throughout the course.
Review the pages suggested by 3 other students. What did you think about the pages they selected? Do you have any questions about their selection and summary? Think critically about site design and how these sites are constructed.
NOTE: Review means just that - read the description, follow the link and look around - that is a "review" for the purposes of this course. If you have a question or something to add to the discussion, you can reply to the post. Otherwise a reply is NOT necessary. The discussion is a handy way to share links to interesting sites. The objective is to visit many different examples of web sites, web-based applications, online tools and current technologies.
- CSS Demonstration - CSS Zen Garden {Verde Moderna} shows the power of CSS (Cascading Style Sheets). CSS provides complete and total control over the style of a hypertext document. See for yourself. The content HTML on all these "sites" is the SAME. Only the CSS file is different. Check it out!
View some of the existing designs - Mid Century Modern, A Robot Named Jimmy or select from the list on the page. Clicking the link loads the style sheet into this page. The HTML remains the same. The only thing that has changed is the external CSS file. Drag the corner of your browser window to make the window narrower and wider - watch for changes based on screen window width.
Look at the source code of each page. Look for the link to the .css file in the head element of the web page. This is the connection between the .html file and the styling information in the .css file.
Which 2-3 views did you access? What are some of the changes between views? Do you get it? Are you impressed? Post a brief comment about your experience in the CSS Experience discussion.
CSS and HTML - CSS defines styling and presentation display. HTML is for content. Web Developers need to use both. So we will be learning HTML and CSS together starting NOW. Starting with Cascading Style Sheets (CSS) is a big change from how Web Development has been taught in the past, when CSS was just an add-on. With all the new and improved access to information on the internet, it is essential to develop websites using the powerful features of both HTML and CSS. For ALL coding projects, use a .html file for content and place all styling in the linked .css file.
See Textbook Chapter 1 What Are HTML and CSS? AND Chapter 11 Introduction to CSS as well as resources in the Selected Media below.
- Browser check - Everything for CIS89A happens on the web. Not only do we publish on the web, but many of the tools we use exist as web applications rather than installed programs on our computers. De Anza Online Education recommends all students use the newest version of Firefox, Chrome or Edge when accessing Canvas. For CIS89A, we will also be using a number of HTML5 functions. Always keep your preferred browser up to date.
Check out your browser with the openSUSE html5test. If necessary, download and install a browser that works well with Canvas and HTML5.
https://html5test.opensuse.org/
- Online Web Editor - Glitch https://glitch.com/ is web-based so there is nothing to download. Use with any browser. Free to use the basic web editing required for this course. Premium version is available for a fee but not required for the course.
Glitch - Getting started (below) - Descriptions and examples include creating an account, online tutorial, copying an existing project example or template, creating a new project, coding html and viewing, coding css styling, saving, sharing and submitting your coding projects, downloading to your computer, important considerations.
Complete all the activities listed
- Visitor and Resident - Read the article or view the video or listen the podcast interview with David White. Residents are contributors, not just consumers of content. How important is it that "anyone" can write / publish to the web? What can be done to ensure that "everyone" can be found? Whose responsibility is this? Post a brief summary of your thoughts and questions to the Visitor and Residents discussion. Review 2 others.
- Complete the Getting Started survey. This will help determine how quickly we move through the course and how many related topics to explore along the way. This is an introductory course, so we will start at the very beginning and work up to more complex web page development. There are more challenging projects for students who already know how to build basic web pages and want to learn more advanced techniques and technologies.
- Module 1 in review - The first week of any class is pretty chaotic, so this is a chance for you to stop for a few minutes and think about the CIS89A Web Page Development course. What was one pleasant surprise? What is one question that didn't get answered? In 1-2 sentences, answer these 2 questions about your CIS89A 1. Getting Started experience. Submit your comments and questions as the Module 1 in review assignment. Be sure to click the "Submit" link as well - this puts your answer in the "ready for grading" status.
Glitch - Getting Started
Glitch Web App Editor - Coding projects can be completed using Glitch - a free online Web Development Editor, so you don't have to have a separate application installed on your computer.
NOTE: The Glitch information may have been moved around as they add new features to Glitch and the other web based development tools - this happens frequently. Please let me know if there have been any changes.
- Getting Started https://help.glitch.com/hc/en-us/sections/16285895402765
- Getting Started: Part 1 - The Project Editor. https://help.glitch.com/hc/en-us/articles/16287564744461-Getting-Started-Part-1-The-Project-Editor
We are only going to be developing Simple websites that use html and css. There are many more features within Glitch that are beyond the scope of the course.
- Getting Started with HTML using Glitch.com (video 7min) https://youtu.be/T3KzeJMTFQE This tutorial will show you how to login to Glitch.com and start working with a basic HTML file
There is a lot more to Glitch that we will not be using in this course.
- Learn the Glitch basics with this introduction and Glitch Getting Started to learn more about the tools. Explore the site.
Create a Glitch account.
- Remix - Glitch will automatically create your own copy of an existing project that you can modify and rearrange as you wish. View the Glitch Six-Word Summer sample project. Find the Remix button. Click this button to get your own copy. Glitch starts you off with the main .html file named index.html which is the content - usually text, images, media. Change the text on the index.html page. Keep this simple for now. The tutorial.html file has examples of the html code to help you. Add a description in the description box under options under the project name - upper left. You have done it. You have created a web page!
- Style - style.css - Glitch automatically sets up an external Cascading Stylesheet style.css file for you in your project - listed in project files list on left. This is where the style descriptions go. Although there are other places to define styling, using this external styleheet is an important part of the CIS89A Web Development course.
Select the style.css file and try out different values for the #banner properties - background-color, font-family, width, padding, margin-top. Glitch provides help as you start to change the options. Include comments in your code - the format for comments is different in .css code.
Look at the code in your project index.html for the link to this style.css file. This is the connection that browsers will use to determine how to display your coding projects.
Here is my "remix" of My Six-Word Summer which I changed to My 140 Character Introduction - Share your Glitch - Display your project. Select Preview - in bottom of screen, and select Preview in a new window. Copy the web address of this display. Paste the web address and post it along with a short summary (2-3 sentences) about your "test drive" experience to the Glitch project discussion.
If you have questions about Glitch, please ask. This is intended as an easy, fun activity so you can "create" a web page in the first week of class. There is a lot more to web development, so keep this simple. Make a few small changes and make sure it continues to display ok.
To submit coding projects, provide the "Show" link to your Glitch coding assignment project.
- ALSO Submit the Share web address link for your Glitch coding project to the 1. Glitch project assignment. There is a rubric describing points for the coding assignment. Yes, this is the same as what you shared in the discussion. The discussion is for the class to see. The assignment is for detailed feedback to you.
Examples
- My Six-Word Summer
- My Six-Word SummerCessna plane in the skyEating Healthy. Staying Active. Flig...
- My Six-Word Winter
- My Six-Word WinterWinterHomeSnowboarding.Pho.Hot Coffee.Campfire Socials. &qu...
- My Six-Word Summer
- My Six-Word WinterChessVideo Games.Basketball Practice.Chess Theo
...
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...
Web Design
While the course does TEACH some "web design" skills, you will LEARN a lot about web design throughout the course. Many of the course activities include research and accessing existing web sites. Every site you visit for any course activity is an opportunity for you to practice your web site review and evaluation skills. In addition to the explicit activity requirements, critically examine every site you visit. What is the overall effectiveness of the site? What were the important elements of the user experience? Navigation? Content information presentation? Design - fonts, color, use of white space? Are these appropriate to the purpose of the web site? There are few "rules" so it is important that you learn web design from these evaluations. If there are features that you like but don't know how to produce, spend some time reviewing the page source as well. If you were the site developer's critical friend, what would be your feedback? Discuss these with the class. We are all here to learn.
Conventional HTML and CSS development
If you have web development experience and are familiar with the DeAnza CIS Voyager development environment, you are welcome to complete all the coding projects as HTML and CSS files uploaded to your Voyager public html directory. To submit your coding projects, provide the link to the main html page for that coding project, which should include a link to your associated css file.
Ready for more challenge?
If you already have experience using HTML and want to work ahead, please do. All the assignments are open throughout the course. If you have questions about more advanced topics and assignments, please ask.
2019.8 0 . 2020.6 6010 . 2020.9 7900 . 2022.4 10433
