Learning Goal #6
Students will be able to design a collection of original websites with creative section elements managed through an external, cascading style sheet.
PART 1: DeadlinesRead More
Below are your deadlines for Learning Goal #6: Mastering the Box Model with CSS3. If you complete approximately 1.5 lessons per week, you should be able to keep up with the deadlines.
- April 12, 2019:
5 Lessons Complete (6.1 through 6.5)
- May 3, 2019:
6 Lessons Complete (6.6 through 6.11)
- TO BE DETERMINED (May 2019):
ICT Final Exam (Web Essentials)
- May 6, 2019 through May 28, 2019:
LG6 Final Project
REMINDER: In order to earn an A for each lesson, you need to complete each assignment within the lessons. At the end of each lesson, you will take a short quiz on eCampus and confirm that you have done all the assignments. If you only do some of the assignments, you can still do okay, but it is in your best interest to complete them all. Your grade depends on how much you get done within the time you are given.
PART 2: OverviewRead More
By this point in the semester, you already know how to set up a background because you’ve had to use backgrounds in multiple projects and pages. What you may not know how to do is manipulate the size and placement of that background. For example, what if you want a background image to start a little bit below the top or a little bit right of the border? As you move into the lesson, this may be the most challenging design project you’ll ever do in this class.
Below are some helpful tips and resources that you can use during and after this lesson is over.
CSS Style Tips to Remember
- Like any other color style, background-color can be written with color names (140 choices), hex values (#ffffff), or RGB values ( rgb(0,100,255) ).
- Even though there are lots of background properties to choose from (background-image, background-color, etc), just using background alone (background:…) is a simpler shorthand for most of those other properties, especially the background-image property.
- By default, if you use the background-origin property, the background will begin within the padding-box (just inside the border), but you can use this property to adjust the starting point.
- The background-origin and background-clip properties are almost identical. The only main difference is that background-clip is typically used with color backgrounds (like painting).
- For a quick review of color gradients, refer to the summary from Lesson 6.9.
- When using the list-style-image property, it’s best to use a small png icon since the list is just a series of bullet points.
- Anchor links can be far more interesting than the basic HTML structure you learned in LG#5. With CSS, you can add selector states (:hover, :active, etc) to your anchor links so that when you hover over, click on, or go to a link, the color or design will change.
- Table styles are perfect for organizing content in a creative way on your webpage, but remember from LG#5 that your entire webpage should NOT be built with tables.
PART 3: AssignmentsRead More
Assignment #1 (1 Point): SoloLearn Lessons
Log into your SoloLearn account and find the Course called CSS Fundamentals. Inside of this course, watch the following lessons (you will need your headphones), but when you finish, be sure to make note of how many SoloLearn points you have earned. Points are based on how many sections you complete and how many questions you answer correctly after each section.
- Styling the Lists
- Styling the Tables
- Styling the Links
- Customizing the Mouse Cursor
- Module 3 Quiz
Assignment #2 (2 Points): Design Project
Looking at the picture on the right (click to enlarge), you might think this will be a really easy design. It won’t. You are being asked to combine a number of skills that you’ve learned from the last several lessons all at once. The purpose of this design is not to trick you, but to push you toward your absolute best. It won’t work for you to cut corners or look for an easy way around. Decide that you can get this done before you start and don’t give up until you actually get it done. Are you ready? Give it a go…
- STEP 1: Take about 20-30 minutes and study ALL of the information in the overview. All the style tips. All the link states. All the properties. All the values. All the resources. Don’t rush it. If you think this is a step you can just skip because you don’t need it, you’re absolutely wrong. Study EVERYTHING in that overview so that when you reach a later step in the design, you’ll be fully prepared to handle it.
- STEP 2: Go into your CSS subfolder and create a new folder called 6.5_sunrisechallenge.
- STEP 3: Inside of your new 6.5_sunrisechallenge folder, create three HTML documents (day1.html, day2.html, and day3.html) and one CSS document (style.css).
- STEP 4: Choose three consecutive dates in 2016 and find out when the sun rises on those three days. This will be the information you need for day1.html, day2.html, and day3.html.
- STEP 5: Go to Google and get 3-4 sunset images that are LARGE enough to be a background for your screen resolution. And while you’re at Google Images, go ahead and find a sunset icon to use for your favicon.
- STEP 6: Copy/paste the source code from this page into your three HTML files, then change the areas in ALL CAPS (like DATE, TIME, FAVICON). Make sure the date and time information is based on consecutive days (such as June 1, June 2, June 3).
- STEP 7: Now comes your biggest challenge of the semester. Build a style.css that makes your website look something like this.
- You MUST use background-position, background-size, background-color, and of course, plain old background ( url() ). You MUST push the BODY background down and to the right (using body-position).
Here is a list of the 10 things your style.css SHOULD and SHOULD NOT have:
- STEP 8: When you have finished designing the style for your three pages, check to see that all three pages work, that all three pages have different background images, and that all three pages are based on consecutive dates.
- STEP 9: Take a deep breath. You just overcame the most difficult challenge of the semester. The next lesson won’t be quite so tough.
Assignment #3 (1 Point): Update Your Index
Similar to the last lesson, take the time to add your new design to your index page using a screenshot and a link. Remember that since you built a three page website, you do not need to provide a link to all three pages. All you need to provide is a link to the first page, which already links to the other pages. Also, remember that the links will have to point into the folder you made.
Assignment #4 (1 Point): Review and Quiz
Look over the 6.5 Review Sheet. Read over the vocabulary terms. Look over the questions. Make sure you know how to answer each question. Then go to eCampus, find the quiz for Lesson 6.5, and take it. This is a way for you to show the teacher that you have finished this lesson.
If you have finished the assignments in this lesson, you will need a new password so that you can enter Lesson 6.6. Feel free to ask the teacher and don’t be afraid to raise your hand or go up to ask. If you are actually finished with a lesson, you will get an answer.