Overview For this assignment, you will create an external, common CSS stylesheet to give you pages a consistent style (typography, colors, margins, etc.). The focus is on styling the color scheme and typography. Upcoming assignments will make use of CSS page layout techniques, so steer clear of CSS declarations such as display: flex; and display: grid.
Preparation Take some time to plan a color scheme for your site. The following guidelines will help you: The color pallet should be limited to three to five main colors. Black, white, and gray are colors, too. Maintain good contrast so the text of the page is readable. Be consistent in the use of colors for parts of the page (use the same heading colors, all buttons should be the same color, apply the same colors for the navigation, etc.). You may want to use Google Fonts for you site so that all users see the same font, regardless of the platform. Go to Google Fonts and select your font(s). It is fine to use more decorative fonts for headlines but choose plainer fonts for the text of the page. For best results, do not use more than two fonts. On your desktop (or other location that you can find easily), create an empty folder named IT3240_Week_3. Copy your files from the Week 2 assignment (including images). Open this folder in Visual Studio Code. Adding the CSS Add a .css file to your site’s directory with the file name style.css. Add appropriatetags to the HTML files so that all pages use the same CSS. All CSS rules will go in this file (do not include any style rules or <style> tags in the HTML (other than the tags required to use Google fonts, if you choose to use them). Using a combination of selectors for tags, classes, and ids, add at least ten CSS style rules to the .css file. When using class and id selectors, you will need to add the corresponding class and id attributes to the HTML tags. Aim for a consistent look and feel for all pages. There may occasionally be a style that is specific to an element on a particular page, but avoid writing separate styles for the index page, the about page, and the contact page. Only use
…and … tags in the HTML when there isn’t a semantic or text element HTML tag that applies. Use relative units when specifying most sizes in CSS to produce a more responsive design. Sizes in pixels are often too rigid to work well at different resolutions. It is important to document the CSS with comments. Include at least one comment for each CSS style rule. Verifying Your Work After you are done working on your pages, test them in two different browsers to confirm they work as expected. In a Word document, state which browsers you tested the pages in. You do not need screenshots of the pages displaying in the browsers. Any HTML files where you made changes, need to be revalidated. Go to the Nu HTML Checker tool validator.nu to verify the HTML. In the “Check by” dropdown menu, select “file upload.” Then, click the File Upload button to upload the .html file to be validated. After the file has been uploaded, click the Check button. Repeat the process for each HTML file with changes. Fix any errors noted by the tool and correct the causes of any warnings. Validate the CSS file using the CSS Validation Service. The process is essentially the same as the HTML validation (use the “by File Upload” option). Correct any errors in the CSS identified by the validator. You are welcome to use an AI chatbot to assist with understanding the problems and to suggest corrections, but you need to decide on the corrections to be made, and you must type in the code yourself. Do not copy and paste code from the chatbot or allow the AI to modify your code. Re-check the edited .html files and revised .css file as needed until all issues have been addressed. Take a screenshot of the Nu HTML Checker results for each page showing successful validation and add it to the Word document with the statement of which browsers you tested the page in. Add the CSS validation screenshot showing successful checking of the CSS to the same document. Submission Requirements Add the Word document to the folder containing the three .html files, the .css file, and the image files. Please do not include any extra files in your submission. Compress the folder and submit the zip file as an attachment to your submission. Competencies Measured By successfully completing this assignment, you will demonstrate your proficiency in the following course competencies and rubric criteria:
Competency 2: Style web page content using current CSS. Create and link an external CSS file. Add CSS rules in .css file to style colors and typography, with sizes specified in relative units. Use color scheme with good contrast and visual appeal. Use appropriate fonts for readability. Document CSS and HTML with comments. Validate HTML and CSS.