Week 1 (1/23)
Topics + Learning Objectives
- Overview/Introduction to the class and syllabus
- Web basics
- The Code View within Dreamweaver
- Working with Code in Dreamweaver
- Emmet and DW
- HTML for Structure, CSS for Presentation
- Basic HTML Tags
- CSS Selectors, Properties, and Values
- Styling with CSS
- Internet History
Required Assignments + Tasks
- Review the class syllabus and grading details
- Read the FAQs
- Upload a photo/avatar and optionally customize your profile in Canvas
- Check in on Canvas by responding to the Introduce Yourself Forum Discussion
- Get the Adobe CC software ( see the class FAQs for more)
- Complete Assignment #1 (due Tuesday, 2/6)
- View the Week #1 Videos and Tutorials below
REcommended or OPTIONAL Tasks
- MiraCosta Student Online Academic Readiness (SOAR) Workshops (optional; recommended if new to online learning)
- Check out this Canvas Student Orientation (recommended if new to Canvas)
- Get the latest version of Firefox (recommended)
- Download the Web Developer Toolbar Extension for Firefox (recommended)
Assignment #1: A Recipe for HTML and CSS (50 Points - Due on Wednesday, 2/6)
Using hand-coded HTML markup, create a "recipe" web page about how to make food that you enjoy. This can be your own recipe, a family recipe, or content from a recipe that you find somewhere (give appropriate credit). Using Cascading Style Sheets (CSS), hand-code your own CSS styles in an external style sheet to add style and visual formatting to your page. In addition, add at least one image to the page.
Make this a 'recipe book' of sorts by including links (<a>) to both the previous and next student's recipe as per the Index of Student Work (i.e. include links to Assignment #1 for the both the student above and below you in the Index of Student Work such that we can progress forward and back through all of the recipes/exercises).
Use the exercise to review HTML and CSS basics. Your focus should be on using HTML to appropriately structure your content and CSS to effectively style and format your typography.
At minimum, your recipe content should include:
- A title for your recipe or the name of the dish
- At least one picture (of the dish or any of its main ingredients, or any photos or images that relate)
- Description, background, or introductory information (some kind of narrative about the dish, its history, why you chose it, or anything about it)
- Ingredients list
- Cooking or preparation instructions or steps
- Yield (how many servings?) and prep time (how long does it take?)
- At least one additional section/element of your choice such as: serving suggestions, beverage pairings, nutrition information, quotes, tips, etc that can apply to your content and allow you to further explore CSS formatting.
At minimum, your HTML page should include:
- A page title (<title>)
- A link (<link>) to your External CSS Style Sheet
- At least two structural tags such as an <<article> or <section> to contain your recipe content, a <header> for header content, a <footer> for footer content, and/or <div> tags for generic containers
- A header (<h1>) with the title of dish/recipe
- Paragraph (<p>) tags with the description information
- Sub-heads to divide up the content (<h2> or <h3> as needed)
- An ordered (<ol>) or unordered (<ul>) list (<li>) of the ingredients or steps involved
- At least one image (<img>)
- Links (<a>) to the previous and next student's recipe exercise
- And, any other tags you feel are appropriate
At minimum, your CSS should include:
- The use of element selectors (also called tag or type selectors), id selectors, and class selectors (explore the use of all three)
- Text formatting using: font-family, font-size, font-weight, and font-style
- Alignment using text-align
- Spacing using line-height, letter-spacing, and margins or padding
- Color including text (color) and background (background-color) colors
- CSS for lists including list-style-type, list-style-position, or list-style-image
- At least two of the following extras (text-decoration, text-transform, font-variant, word-spacing, or text-shadow) and any other CSS that you feel is appropriate
If any of the required HTML tags or CSS properties are unfamilar to you, look them up in the HTML Reference or CSS Reference.
Create a root folder/directory called "assignment1". Save your HMTL file as "index.html" and include your CSS file(s) (ie "styles.css") and image file(s) (ie "images/photo.jpg") within this "assignment1" folder. Using FTP, upload your "assignment1" folder/files into your "Lastname_Firstname" folder on the MAT server. See Publishing Instructions and FTP Info for the MAT Server for detailed FTP instructions and video tutorials about how to accomplish this.
After completing and uploading your exercise, participate in the Assignment #1 Review and Reflection Discussion in Canvas.
VideoS + Tutorials
The Technologies Empowering the Web (Required)
Coding in Dreamweaver (Recommended)
Review of HTML, CSS, and Assignment #1 (Required)
- Introduction to Assignment #1 (8:16)
- Content is King, Defining a Site, the HMTL Skeleton, External CSS (9:44)
- HTML Markup for Structure, Part 1 (16:04)
- HTML Markup for Structure, Part 2 (17:46)
- CSS for Presentation (26:16)
Publishing and FTP in Dreamweaver (Required)
History of the Internet (Recommended)
- The Birth of the World Wide Web (video from the Computer History Museum)
- The History of the Internet in a Nutshell (article)
- Internet History 1962 to 1992 (Online exhibit/article from the Computer History Museum)
Additional Tuorials if You Need to Brush Up on HTML and CSS (Optional)
- Review the HTML Beginner Tutorial at HTML Dog (from HTML Dog)
- Review the CSS Beginner Tutorial at HTML Dog (from HTML Dog)
- Getting Started with HTML (from the Mozilla Developer Network)
- Getting Started with CSS (from the Mozilla Developer Network)
Links + Resources
- Assets from the Exercise #1 Demo (.zip)
- FAQs (Questions and Answers about the Class)
- The best price on the software: http://store.collegebuys.org
- Index of Student Work
- Index of Video Tutorials
- Publishing Instructions and FTP Info for the MAT Server
- CSS Reference (MDN)
- HTML Reference (MDN)
- HTML Dog: HTML and CSS
- W3 School Tutorials (HTML & CSS)
- CSS Property List (W3)
- CSS Properties (HTML Dog)
- Web safe colors and tools
- Web Developer Toolbar
- Firefox Developer Tools (Inspect Element)
These and other great books are free from O'Reilly (formerly Safari) Books Online using your Miracosta Surf ID and Password: