Web Design

Hello everyone and welcome to Web Design!  This is a project-intensive course designed for students who have a demonstrated aptitude for computers.  Students will investigate, use and evaluate the Internet as a learning tool. 2012 Examples!  2013 Examples!  2014 Examples! 2015 Examples!  2016 Examples! They will complete a 5-page website.

The following codes and programs will be taught during in the beginner course:

  • Background information on web design
  • How-to setup web pages
  • Creating code using notepad as our editor
  • Color theory and graphic creation using Photoshop CS6, Photoshop Elements 9, and cloud photo sites
  • Codes: hyperlinks, picture links, spacing, layout, invisible comments, picture comments, JavaScript, meta tags, body properties, scrollbar, cursors, bulleted lists, image maps, marquees, page anchors, tables, rollovers, horizontal rules, font features, and more! Mastered Codes List.

The following codes and programs will be taught during the advanced course:

You and I are a team in this class with the same objective– for you to learn the material and to receive a passing grade in the class.  We must work together as a team.  Your job on our team effort is to give all assignments your very best effort and ask for help when needed.  My job is to insure that you learn the material.  Do your part as noted above and I commit that you will pass.  However, don’t take my commitment as meaning you can pass with minimum effort; it won’t happen.  You are responsible for you and no one else.  If you do not succeed, you can blame no one but yourself.   Together, as a team, you can expect an A!


For week 1 (March 13-17), you will:

  • Monday: Attendance. Teacher Introduction. Syllabus. Sign up for Remind. What will you need for this class?  Paper notebook, camera, flash drive/Google Drive, creativity, awesome attendance, stack of pictures related to theme (required for Photoshop lessons), and a partner (possibly). Computer Logins, Lunches.  When is this room open for work time?  Before school by appointment and after on early release days. Discuss Previous Themes and take this survey.  LH_TC.  Letter home due on WEDNESDAY!
  • Review finalist websites (together).  See examples at top, too.
    • Login to your Weebly site or create a new one (if you have forgotten your information).
    • Add an additional blog called Web Design to your portfolio.  How?  Watch the video!
  • Tuesday: Give your Weebly URL to me (on seating chart)!  See URLs on side of this website.
  • Rules:  Common sense, Attendance, Hall passes (first 10, last 10), Cell phones, Music/Headphones, Rollercoasters (Rolling/Lineup/Push in chairs), Emergency Procedures, Computer Lab Rules. Room Walkthrough. Video Clip. The idea that your work isn’t ever good enough.  Sign up for Remind.
  • PRETESTS: Take Photoshop and Coding Quizizzes.
  • Concentric Circles/Ball Ice Breaker Activity. Partnership/Individual.
  • Wednesday: Signed letter home is due.  ADVANCED ONLY: Locate a local website that needs a complete overhaul and/or web presence.  What is it?  Describe your plan of action.  Include 4 page ideas to create.
    • Create folders on computer. ELECTRONIC FOLDERS TO MAKE:  Website, Photos, Photoshop, Codes, Other, AnimationandVideo (advanced only).
    • Download the PE9 pictures to prepare for our Photoshop lessons.
    • COMPLETE JOURNAL: Theme Brainstorm.  This is an individual assignments and the due date is on Monday at the beginning of the hour! Answer these 5 questions with at least 5-7 sentences.  EACH QUESTION (except #3) MUST INCLUDE AN ORIGINAL PICTURE.  If you use UNORIGINALS, you will receive one point instead of two points.  Fix the entry so the content and pictures look professional and presentable.  SEND PICTURES TO YOUR DRIVE and POST to your IMAGES on WEEBLY.
  1. What is your natural super power? Describe something you are good at.  Nothing is not a response.
  2. In your own life, share someone you know personally (family member, friend, coach) who has a super power. What is it?  Describe!
  3. What are your top 3 favorite super powers from this list?  Out of curiosity, who is your favorite mainstream superhero?  Why?
  4. Using your list from #3, which power would you enjoy the most? Why?  What would you do with it to make the world a better place?  What would your new superhero YOU look like?  Would you wear/hold anything?
  5. Why did you take this course?  What is your familiarity level with building websites, coding, photography, and/or graphic design?
  • Thursday: Choose a Hour of Code activity and earn your certificate! CHECK Grade 9+ and Hour. Type your name into it and save it for now. Use the Snipping Tool to save as a picture file.  YOU NEED ONE! POST THIS CERTIFICATE TO YOUR WEEBLY BLOG!
  • Friday: Hybrid day! Finish your journal and/or Hour of Code activity, from home.
  • ADVANCED SIDE PROJECTS (Typography/Canva your Resume AND logo).  resume example
  • Read about typography.  In your blog, share a 5-7 sentence reflection regarding the article and upgrading your resume.
  • Open your resume.  Redo it according to the tips.  Make a logo for yourself.  Use Canva to accomplish this!
  • 22nd Nautical Coast Cleanup   Sunday May 21st, 2017

    Art must be white thick line drawing, absolutely no gray tones (shirt color is NAVY BLUE)

    Size: 5 x 11 inches or smaller

    The year 2017 must be prominent in the design of the logo. Must also include the words  Nautical Coast CleanUp (NCCUP)

    Electronic submissions (JPEG or TIFF files only) are permissible, but they must meet the above requirements and be 300 dpi resolution or greater.

    Please email electronic submissions to   rev.jillwrubel@gmail.com  by April 4, 2017

    OR 2017 FODI LOGO Contest OR https://www.facebook.com/scsfarmersmarket/posts/692225280965005

For week 2 (March 20-24), you will:

INTRO WEB: Check in Superhero Brainstorms and Hour of Code certificates. Theme Brainstorm and Mindmap Rubric

ADVANCED WEB: Check in Weebly business reflection, Resume reflection, Canva Resumes.  Work on personal and coast logos.  Did you get your business on board with a web presence? Advanced Initial Brainstorm and Projects Rubric

ALL:  Partnerships.  Who wants one?

  • Monday: 
  • Use example websites to illustrate the requirements.
  • Create Mindmaps using this website.
  • Tuesday/Wednesday: PE9: What is Photoshop Elements? and Using Quick Fix and Photo Fix. Photoshop Journal Reflection and Picture Edits. Need two original pictures: Area selection (like flower), Eye redness/color, Teeth whitening, Black and white portion, and/or Blue skies. Picture Edits 1 RubricTURN IN PHOTOSHOP RUBRIC! Complete JOURNAL.
  • Use the dropdown box to SAVE PICTURES!  Do not type in the extensions.  Too large?  Use your snipping tool to reduce the size.
    Google Docs mini-tutorial for saving pictures. Download the Google Photo App, if possible.  It changes lives.
  • ADVANCED ONLY: Work through CSS tutorials #1-#3. Create your social media site and begin posting. GOAL?  10 followers and 10 entries with 10 different dates by WEEK 6.  Think about creativity.  Retweets do not count.
  • Thursday: Finish your photoshop lesson!
  • Begin coding! Demonstrate how-to setup webpages. Basic codes will be discussed.
  • Codes: HTML Overview, HTML Skeleton, Style Configuration, Background Stuff, BIU and Nesting, Hyperlink, Title/Alt Tags, Insert a Picture, Insert a Picture Link,  Center, Indentation, Fonts (serif versus sans serif).
  • HEX COLOR: Paletton,  Webmonkey
  • Decide on a background (1280 x 1024 OR LARGER pixels) for your pages!  Wallpaper or background, just keep it simple. POST your initial CODE+RUN to Weebly!
  • Friday: 
  • JOURNAL: Color Theory Slide.  Brainstorm your 2-3 colors that you will continuously use throughout your site.  Select 1.  Create a PowerPoint slide using the in-class example.  Finished?  Save as a .jpg and post as an image to your journal.  **IMPORTANT:  Remember your color meaning, hex code, and complementary color name**
  • DOWNLOAD THIS and CHANGE/FILL IN EVERYTHING: Color theory mini-assignment: Color Theory Slide_TC. See example:
  • slidee
    Color name?  Hex code?  What does the color mean?  (3-5 meanings) Shades that may work for you and/or colors that go well with ____(your main color)?  (Give the names and hex codes of two!) Song that resembles that color?  When you are that color, you…? <– 5-7 sentences. Note:  Feel free to use other color theory websites.
  • Homework:  Take two original pictures that represent your color and add them to your slide at the beginning of class on Monday. Post to your blog, when completed. This is an individual assignment.

For week 3 (March 27-31), you will:

ADVANCED ONLY: Mindmap is due. M, A, COMPLETE: 404 page. M, B, COMPLETE CSS lessons. See directions. Use NATALIE’S template to begin forming your own website.  Footer information MUST be different.  I want to see a layout/content that looks different from INTRO. JOURNAL: Visit a few of your favorite websites.  Find a footer look that you like.  Take a screenshot of it.  How is it different from the intro class?  Why do you like it?  What is your plan of action for your own?

  • Monday: Check-in COLOR THEORY slide (on blog). STUDY its meaning, hex, and complementary color. See color-theory-assessment. QUIZ TOMORROW!
  • Discuss Directions for Index Content. Rubric for Index Content. Candela will show examples.
  • Tuesday: INTRO QUIZZES!
  • Codes: Review. Background Stuff, BIU and Nesting, Hyperlink, Title/Alt Tags, Insert a Picture, Insert a Picture Link,  Center, Indentation, Fonts (serif versus sans serif).
  • Finish content and post to your blog!
  • Wednesday:
  • ADVANCED ONLY:  Don’t forget to create a social media account and button, similar to the pre-established one.
  • Directions for Quiz Review.
  • Thursday: WHAT’S ON FRIDAY’S QUIZ?  Anything from the QUIZ REVIEW.
  • Look and Find:  Three professional logos, on the Internet, that appeal to you.  POST ON YOUR WEEBLY.
  • Answer: What is your plan of action for drawing your logo? POST ON YOUR WEEBLY.
  • DRAW YOUR LOGO AND NAVIGATION (buttons) on a blank white sheet of paper.
      • Think about how you can incorporate superheroes/powers  into your logos/banners/nav in a creative way.   Think outside the box.  Wayyyyyy outside the box.
  • Friday: HTML/CSS Quizzes!  You know you love assessments.  Correct quizzes (together).

For week 4 (April 10-14), you will:

  • ADVANCED ONLY: Work on your animation tutorials and 5 second animation!
  • Monday: See preview tutorial video. Stop at the 7 minute mark!
  • THE BEST LOGOS capture your concept and reveal your two page ideas in some way.
    • Render your logo and navigation (icons)! Demonstrate simple brushes and render your picture(s) in Photoshop! Use most of the tools covered in each icon!  Talk about downloading icons from K drive, zooming, shortcuts, and tools.
    • No need to add text or worry about sizing right now.
    • Use different brushes, tools, and take your time! These should look polished.
    • Feel free to submit more drawings as you come up with more ideas!  I will scan them for you.  NO LIMIT.
    • SAVE AS PHOTOSHOP FILES FOR NOW (and .png if you want to see what they look like on your website).
    • To darken your pictures initially, go to QUICK and hit the AUTO button.
  • Thursday: Post your rendered logo as a picture and file. Then, answer the following:
    • What is the main color of your logo?  What does it represent?  (EX: My logo is red and, from the color theory website, it represents..) Share the hex code with me! How does your logo capture your concept and/or reveal your two page ideas in some way? (3-5 sentences)
    • Select an original tagline for your website/logo.  http://www.taglineguru.com/sloganlist.html
    • Share your thoughts regarding the rendering process.  What was easy and difficult? Which tool(s) were most helpful?  How did (this tool, brush) allow you to achieve the look you wanted? (3-5 sentences)
    • bannerex2

      • Photoshop mini-tutorial: Text (and Edit Layer Styles), Grouping pictures, Increasing canvas size. Place text on logo and navigation. Do you want your slogan to be part of your banner/logo or your subtitle? Resources: Picmonkey, iPiccy, Buttons. Rough size for logo: 500×200 and navigation: 100×100 or 111×34. Wrapped pic size: 250x250ish. Banner Video tutorial! Navigation Video tutorial! 

For week 5 (April 17-23), you will:


  • Monday:  Finish rendering!
  • Thursday: Begin setting up the real template for your webpages.  Yay!
  • Create Index, Page 1, Page 2, Page 3, and Finale pages.  Yes, FOUR PAGES.
  • Rules for naming files: Lowercase, no spaces, no symbols. Footer symbols!
  • Codes: Save 4 Pages, Meta Tags, Fonts, Secondary Navigation, Last Updated, Best Viewed, Copywrite, Change Link Color, Border Options Around Table, Hyperlink to Pages, Subheading and Content, <!DOCTYPE html>, Bgproperties (tiled background fix), Cell padding, Image wrap.  Invisible Comment Tag | ALT (Broken picture, need to know a Picture Goes Here) versus TITLE (Image: This is a picture of..”).  Hyperlink Opens in New Window.  Change your link colors to match site.  Don’t forget your ALT and TITLE tags on every image!
  • Add a word or phrase that uses our bold, italic, size, face, color.  Hyperlinks do not count!
  • BACKGROUND FIXED CODE (this goes in a style section in your head):
    body {
    background: url(/images/background.jpg) no-repeat;
    background-size: 100% 100%;
    • INTRO ONLY LINE SPACING code: <div style=”line-height: 24px”>…</div>
    • INTRO AND ADVANCED HW:  Take a real picture that can be wrapped around your main index content.  How large?  300x300ish.
  • Friday: Finish HTML setup/layout.
  • ADVANCED ONLY:  Render your social media icon and post to Weebly.  Link the icon to your social media URL. Create your favicon. How’s your layout coming along?  How’s your posts coming along?
  • Review Index page rubric.
    • Fancier text on logo tutorial with PicMonkey or iPiccy or….?

For week 6 (April 24-28), you will:

  • Monday-Tuesday: Candela will grade Index page of website on Tuesday!  FIRST TIME CHECK!
  • How did your first page of your website turn out? What is your favorite feature? Least favorite? What changes (if any) would you make in the future? Rate it! 10-0. 10=Perfect..Love! 0=Piece of Poo…Want to Change Everything. Take a screenshot of your Index page and post before or after your content! Index Reflection Rubric.  <—– COMPLETE NOW!
  • Render your navigation buttons and insert!
  • Wednesday-Thursday:
  • READABILITY JOURNAL:  Readability is such an important part of a website.  Browse this article.  Which part is most important?  Which part do you struggle with the most personally and why?
  • Codes: Place (linked) logo and (linked) navigation on website. Footer links go to created pages.
  • Rollovers.  Use Candela’s horns as an example. Show how-to make rollovers stay steady. After Rollover tutorial!
  • Fix index page errors! Copy and paste index page to all three other webpages.  Revise information as needed. Look through your images folder and go delete crazy!
  • Friday: 
  • Create a Google Feedback Form.  Google Form survey results due on Tuesday morning! Show me your results on your screen.
  • Parent/Peer Feedback with a Google Form:Please login to your Shorian.org emails.  Go to the Drive.  Create a New Google Form.  Title it YOURNAME’s Index Feedback.  Insert an Image of your screenshot.  Then, you need the following fields:
    • Name of Person Giving Feedback (text field)
    • Does the text on this webpage read easily based on font size, font color, and font face/family choices? (paragraph field)
    • Does this webpage have original graphics that are sized appropriately, professional-looking, and creative? (paragraph field)
    • Does the written content engage you?  Does it address the theme of Love Those Pets, give you just enough information to encourage you to read on?  Are there any spelling and/or grammatical errors? (paragraph field)
    • How do you feel about the overall concept/idea?  Give the author one piece of advice to enhance the site. (paragraph field)
    • Include an overall rating scale.
  • Finish your rollovers!

For week 7 (May 1-5), you will:

  •  Monday: 
  • ADVANCED ONLY: Show Candela your Favicon, if you have yet to do so.  Create a subtle background animation (like the balloons).  Create your social media icon.
  • Codes: Background fixed.  Link opens in blank window. Invisible comment tag. Rollovers stay steady.  Banner hyperlinked.
  • Table tutorial: Purpose, headings, rows/columns, spans, spacing, padding, column widths.
  • Review tables (together) with rubric.
  • Codes: Lists, thumbnail previews, Last updated and titles.  Same subheading styles, different text.  Don’t forget to gather and place your 2 original pictures that match your body content/1 per page.
    • Discuss table requirements for your website! See table example.  Don’t have the same title/caption combo.
    • Draw on a piece of paper at this point.  This paper copy due by the beginning of the hour on Tuesday and should be placed into the tray! NatalieTableExample
    • Technology Table
  • Wednesday/Thursday: 
  • Codes: Bulleted list, thumbnails.
  • Create your technology table for Page 4.
    • Go over thumbnail images within table.

      • <a href=”images/resume.png“><img src=”images/resume.pngheight=”100width=”100alt=”Image: Screenshot of my resumetitle=”Image: Screenshot of my résumé“></a>

        Friday:  Setup PAGE 4 with sections, horizontal rules, Scroll to the top (internal/page anchor link) buttons.

        • CONTENT REQUIREMENTS FOR FINAL PAGE!  See final page requirements example video. Requirements: Five separate sections.  Follow the directions for each section, after watching the video example, and complete as much as you can (without stressing out).
        • SECTION 1:  About the Webmaster: A few personal facts (taken from Weebly autobiography) What is your career path? How will technology play a role in that path?     Picture wrapped:  You dressed as your superhero/using superpower.
        • SECTION 2: Conclusion: Wrap-up paragraph.  What did you learn about animals/pets?  About web design?  What was fun?  What was difficult?  Why? Discuss your field trip experience(s). You’ll want to write a few short paragraphs for this section. Picture wrapped:  Take a picture of how you felt like you were going to die (so much work). For a past theme, it would be the cat, falling down the stairs.
        • SECTION 3: Work Samples/Rubrics/Progression: In a slideshare (or Prezi or whatever), show 10 work samples of your learning progression from beginning to end.  I’ll need a picture + 2-4 sentence caption. You may start with your mindmap…  Think rubrics, journal entries, initial drawings, mistakes, file organization (or lack there of) screenshot, peer/teacher feedback.  There’s so much you could include here.
        • SECTION 4: Computer Courses: List all classes with descriptions. Software programs must be included. This is your technology table. Revise it, as needed. 
        • SECTION 5: Watch the tutorial video: Citations. List all sources in correct format, in ABC order. See Bib MeSocial Media Citations. Describe details of self-created images and all links (statistics/facts/quotes from a website, unoriginal pictures, resources).  Original work samples are best.
            • On your HYPERLINKED citations section, share which page you used the specific website/code on.  (used on page _).







For week 8 (May 8-12), you will:

  • Monday: Intro, watch this video. Advanced, watch this video. Several people within my web classes have shared that coding is challenging;  Taking a class with a bunch of worksheets and/or defining words and memorizing their meanings would have been much easier.  I agree.  Easier.  But not being pushed to learn, to grow as a person is simply wrong.  As a teacher, it would be much easier to sit in my chair all hour and hand out sheets of paper with directions.  Instead, I race around the room on a regular basis, making every attempt to check on you because I care about you. Trust me, it would be easier to not run the contest.  Easier for me.  Easier for you.  But look at the possible payoff from your work.  And once again, I run the contest and help you meet the requirements because I care about you.  What have you gained from taking this course that a traditional class may not have granted you?  5+ sentences, please. <- This will be part of your conclusion.
  • TABLES are due TODAY! table-rubric
  • Continue working on PAGE 4.
  • Tuesday:  
  • Go delete crazy on unwanted files and images in your Website folder.
  • Return to your index page. Is the content updated?  Does it explain your reason for choosing your concept?  Does it outline your two middle pages with a thesis statement?
  • Wednesday: 
  • Work on your content (2 paragraphs): Rubric for Middle Pages-1ktggok. This will be due by MONDAY by the beginning of the hour.  Post to your Weebly, please. Place staple your RUBRIC, with your paragraphs (and labeled subheadings) into the tray. Reduce the size so that they fit on 1 page.
  • EVERYONE HW:  Work on collecting photos for your middle pages!
  • Thursday-Friday: 
  • Codes:  How-to embed Prezi, PowerPoint.
  • INTERACTIVE OPTIONS on ANY PAGE:  Video, Imagemap.

For week 9 (May 15-19), you will:

  • Monday: APE: Working In Guided Edit and Tools:  Lomo, Style Match, Fixing blemishes, Clone Stamp, Applying Filters, Adding Effects, and Using Layer Styles.
  • Tuesday/Wednesday:  Review rubric requirements.
  • Using yesterday’s Photoshop tutorials as a guide, place frames and use your preferred filters/effects on EVERY picture to create a CONSISTENT look.  On your rubric, write down which filter/effect was used.
  • Thursday/Friday:  Work on Pages 2-4
  • Remember, uniformity is important.  Be sure your rollovers stay steady, your subheadings are consistent, and you have a border around all pictures.

For week 10 (May 22-26), you will:

  • Monday: Review final website rubric. WEBSITE DUE ON TUESDAY! 
  • Your final exam will be a thorough written reflection of your themed/community website + presentation.  Another discussion point topic?  Let me know!  I have one.  Share how a specific classmate inspired you, helped you, made you eager to continue learning. Web Design Essay Final Exam | FE Part II Web Design Presentation Rubric. You will outline, from beginning to end, the results of your work using the NEW ISTE NETS or OLD NETS standards located here within your personal narrative. NEWER EXAMPLES: adv-exam-example-essays OLD EXAMPLES: Web Design Final Exam Essay Example CJ. Rebecca_Essay_ExampleFinal Exam Essay Example TC. Be careful though!  These do not meet all of our requirements!
    • NETS:  Address the most important one, to you, and explain how you accomplished it.
    • Other talking points: Screen resolution, fonts, color theory, brushes used in graphics, alt/title tag importance, readability, consistency, small details=big impact (borders around pics, same font/color), 404 page, layout, headings, favicon, multimedia, fonts, colors, social media, why you chose the order of your pages, most css codes (id/class/comment/links/ems), hex, how you know which page you’re on (rollover), outside experience/time commitment…everything on that home page.
    • ADVANCED ONLY: HOW DID YOU GO FURTHER (in your learning) from intro/adv? Basically, what is different from previous websites versus this one?
  • Tuesday:  Check in websites!
  • Wednesday-Thursday: Hybrid days!
  • Friday: Essays due! Attach the Word doc to a new WEEBLY post, title it, and submit!  Print a copy, staple it to the rubric, and TURN IN!
  • POSTTESTS: Take Photoshop and Coding Quizizzes.

For week 11 (May 30-June 2), you will:

  • Tuesday-Thursday:
  • JOURNAL prompt:  Answer #10 from Tips using 5-7 sentences.
  • Presentation Requirements: mcwt-presentation-guidelines-for-advanced-finalists-2016. You must bring in a visual!  Your entire website will be shown on the screen.
  • Turn to a neighbor: Ask what’s your biggest fear when you are presenting?
  • Nervous before presenting?  You are thinking about yourself.
  • 3 things you did well…1 improvement
  • Swim > No pool | Better presenter > Need opportunities
  • In 3-5 seconds your audience decides if they like you or not and whether they will listen.
  • Recommended: Amy Cuddy TED Talk
  • Smile Fishing game.
  • Cookies Presentation
    • Advanced Presentations.
        • Audience, use this form for each presenter: Audience Form.
        • All presenters, use this form once for your self evaluation: Self Evaluation Form.
        • Intro Presentations.
        • INTRO WEBSITE PRESENTATIONS begin! 4 minutes each. This is your final exam grade (plus essay)!  Random teams/individuals go first.  NO ORDER.  I am a terrible person.
        • Presentation guidelines for intro:  ONE DISCUSSION POINT from pages 1, 2, 3, 4.
        • Complete this form.
  • Friday: Google Form Peer Feedback Reflection.  Based on the peer feedback, :
  • 1) As a whole, what is one thing everyone could work on?
  • 2) Personal +
  • 3) Personal –
  • 4) Best piece of advice
  • 5) Peer MVP Award
  • 6) Theme selection
  • Watch Digital Nation.

Week 12 (June 5-9), you will:

Week 13 (June 12-15), you will:

  • 🙂