Web Design is a full year class open to all students. Students learn about the fundamentals of web design coding and layout while researching and applying the usability principles.
CSS rules can be made in a separate file, but we will place the CSS rules within the head using a <style> tag. See how it works below and then move on to practice 3 with CSS. The CSS is written in dark blue.
Directions: Create a website describing your favorite food.
1) In the <head>:
Title is “My Favorite Food"
Key words: Foods, Yummy, Favorite foods
Set the Viewport
Set the author to your name
2) Headline <h1>: “[your name]’s Favorite Food”
3) Subheadline <h2>: that says the name of your favorite food, ie: Baklava or Pad Thai.
4) Paragraph <p>: Two short paragraphs describing your favorite food. Every time you name the food, bold it. Create a link somewhere in your paragraphs that links to a website that has to do with your food (ie its Wikipedia page or something like that).
5) <hr> horizontal rule after the paragraphs.
6) <img src>: 2 images of the food. Change the width to 400px and give them alternate text.
7) Change the CSS. Look up the CSS codes here.
Directions: Create a webpage that contains the following.
1) In the head, add a title that says “My Hobby”
1a) In the head, define two key words for search engines and define yourself as the author of this webpage. Also, set the viewport of the site.
2) A headline that says “[your name]’s Favorite Hobby”
3) A subheadline that says the name of your hobby, ie: Reading, Swimming, etc.
4) Two short paragraphs describing your favorite hobby. Every time you name the hobby, italicize it. Use a line break <br> between paragraphs so that the paragraphs are formatted correctly.
5) 2 links to other websites pertaining to your hobby. Use a line break <br> so they are on separate lines.
6) Display one image on the page. Change the width and height to a reasonable size. Change the "alt" text to describe what the image is.
7) Save as yourlastname.practice2.html. Upload to Google Classroom.
Directions: Using Adobe Dreamweaver, create a webpage that contains the following steps. NOTE: Your page will not look exactly like the preview above.
Open a new html file. Make sure you choose HTML5 as the doctype.
1) <title>: Your name: HTML Practice 1.
2) <h1> that says "Using Proper Tags." Add in a subhead <h2> that says your name.
3) Put in the following text (within a paragraph tag) so your page looks like the one above: The 1st time the bold man wrote in italics, he underlined several keys words. <sup> superscript, <b> bold, <i> italic, <u> underline.
4) Add a horizontal rule <hr> after the sentence written above.
5) Add in a comment after the paragraph above, telling me your favorite color.
<!--My favorite color is blue-->
6) Add a link to W3 schools. The text should read "Click here to learn more about html code."
7) Save as yourlastname.practice1.html. Preview the HTML file in Chrome to see if it worked (click on the globe in DW).
8) Submit into Google Classroom.
Due Date: April 1st
Emoji's are a part of our everyday lives. Sony is even in the process of creating an animated emoji movie. Your assignment is to create a personal emoji! You will be using Illustrator to create it. This is an "in between" assignment that you will work on during down-time in class. You already know the tools you will need to create your emoji.
Imagery is one of the most important elements when designing and publishing for the web. In order to create dynamic content for the web, users want to see high quality imagery. We will learn basic photographic principles, manipulate photos, and also how to save these files in different formats.
Your assignment is to create a surreal self portrait using Gods & Goddesses or Native American spirits as inspiration. The Native American culture values the spirit world. Greek myths tell stories of Gods & Goddesses like Hercules and Aphrodite. What will your inspiration be?! Think of things that interest YOU. You will Photoshop multiple images to create this design. Be sure that your images work together cohesively.
To participate in this padlet critique, just double tap or click underneath the category and you can put in your comment.
Digital Illustrator Tyson Murphy recreated this scene from the Sword in the Stone. Notice how the second image from the movie looks flat, but the first image has 3-dimensionality because of the HIGHLIGHTS & SHADOWS. Where is the source of light coming from?
Due date: day of the midyear
Going along with the theme of your midyear, your assignment is to create a minimalist logo for a pop culture social media site. For example, the above logo would be used for a social media site so that people who love TMNT could connect. Choose a movie, TV show, or book for the social media site.
To be done in Illustrator with the pen tool
You may only use imagery and no text
Submit the jpeg into Google Classroom
Print it to 8.5x11 paper (letter size)
Period 2: Tuesday, January 19
Period 5: Thursday, January 21
Period 7: Friday, January 22
Social media is a HUGE part of marketing and promotion. It is no longer an option to stay out of social media; it's vital to a business's success. How do you think a photographer might use social media to promote her business?
Your assignment is to create digital content for a marketing campaign. Your campaign will promote a cause dear to your heart. For example, take a look at the campaign above, what does it say to you?
How to turn in your midterm
Things to Remember
Hashtags, SEO, [any of the elements & principles], marketing, promotion/promote, publish, share, visuals, platform, followers, pins, tweets, updates, engage, blogging
**A note about midyears: it is your responsibility to attend the midyear exam time and submit the assignment by that time. If you must miss the midyear due to illness, you must email me before the start of the exam, not afterwards. Midyears that are not turned in by the exam date will be a 0.