Module4

Week 4 Module–CSS Part 2 and Portfolio Homepage

Learning Objectives

  • To continue to work with different style options for formatting your elements using CSS
  • To learn and research about web design concepts

Task 1–Leaning and Applying Advanced CSS Elements

  1. Go to W3school’s CSS tutorial and go through the following sections:
    • CSS Color
    • CSS Background
    • CSS Borders
    • CSS Margins
    • CSS Padding
    • CSS Height and Width
    • CSS Text
    • CSS Navigation Bar
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Backgrounds
    • CSS Gradients
    • CSS Shadows
    • CSS 3D Transforms
    • CSS Transitions
    • CSS Style Images
    • CSS Columns
  2. Use the css file you created for the last module and add the css elements above. 
  3. Use the practice html file you created for the last module and add more html elements to the file so that the advanced css style elements you added in the css file can be applied to the new elements in the html file.   Your resulting html page should contain the following elements:
    • A heading that’s centered (CSS Text)
    • In your code, link this file to the css file you’ll create in the next step.
    • A horizontal navigation bar that links to all the other modules you have completed so far (hint: refer to the CSS “Navigation Bar” and “Website Layout” sections)
    • A rounded-corner border with a color other than white or black using RGB values (CSS Colors and CSS Borders)
    • An image in the foreground that floats on the right, with text wrapped around (CSS Float)
    • One or more hypertext links that have different colors for a:link, a:visited, a:hover, and a:active, with NO underline for the link text (CSS Links)
    • A dropdown menu with at least three items in the dropdown selection (CSS Dropdown)
    • A box with rounded corners (CSS Rounded Corners)
    • Two background images, one repeated endlessly, and one no repeat and placed top right or bottom right (Be careful in choosing your repeat background image. Make sure it’s not too busy and interfering.) (CSS Backgrounds)
    • One div element with a gradient background (CSS Gradients)
    • Some text element with a shadow effect (CSS Shadows)
    • An element with 3-D rotation (CSS 3D Transforms)
    • An element that transitions to at least twice the size when hovered over (CSS Transitions)
    • A responsive image that automatically adjusts to the size of the screen (CSS Style images)
    • A section with three columns (CSS Multiple Columns)
  4. Build a CSS file and name it “module4-YourLastName.css,” e.g., “module4-Johnson.css.” For this css file, add the style declarations that will satisfy all the requirements in the previous step.
  5. On your “default.html” page, add an internal link to your “module4.html” page.

Task 2–Complete Your Reading Responses for Chapters 7 and 8 of  Web Style Guide

  • Read Web Style Guide Chapters 7 and 8 and complete your reading responses. Please note that you need to complete a separate reading response for each chapter. 
  • Post your reading responses to the Reading Response page. 

Task 3–Complete the Design of the Portfolio Homepage
In designing the homepage (and other pages) of your portfolio, keep the following in mind:

  • You may use any design tool to design the portfolio. Yes, you’ve been learning and practicing hard coding with html and css, but you’re NOT required to use ONLY html and css for designing the portfolio. You’re free to choose any tool, including WYSIWYG programs (such as the templates in WordPress). 
  • The elements on your portfolio homepage should be able to give your readers a good snapshot of your professional credentials, such as a summary of your major qualifications, a brief bio/description of yourself, a good tagline that projects a theme/image about your professional credentials, the type of job you’re applying for, as well as your basic contact info,  etc. 
  • The portfolio as a whole is the total package that sells you for the job. In other words, it should contain all the information your prospective employer would need in determining not only whether you’re qualified for the job but also why you’re the best candidate for the job. 
  • For some of you, especially those of you who are artists and designers, your portfolio may not be designed for a specific full-time job,, but to promote your artifacts so that your reader may purchase your work or hire you for a freelance gig. Either way, you may need to provide not only your professional credentials and work/writing/design samples but also background information about you so that your readers get a more complete picture of you both as a professional and as a person.