Intermediate CSS Concepts
Learning Goal: I’m working on a html / css exercise and need a sample draft to help me learn.
In this activity, you will refine your ability to position elements on the page with precision by working with intermediate-level CSS tags. Resources to help you are included in the activity guidelines document.
Overview: Web designers use CSS to control the layout, organization, and alignment of elements on a webpage. In this activity, you will position elements on the page with precision by using intermediate-level CSS tags.
Prompt: For the purposes of this exercise, you will start with the “after” (or finished) version of the index.html file and add several additional pieces of content and styles based on what you have learned from the module resources on how the index.html and site.css files were edited and expanded to create the final version of a webpage.
Specifically, the following critical elements must be addressed:
I. Position a logo using the fixed class selector.
II. Position a graphic using the float class selector.
III. Create an inline box on your webpage. Guidelines for Submission:
You must submit the zipped folder you created as a result of this activity, including all of your files for your webpage.
Overview: The final project for this course is the creation of a website. Just as it is important to have a high-level plan for the content and rough design of your final project website, it is equally important to plan in a slightly more detailed fashion for the overall site structure and navigation for your site. As a reminder, your final project website should consist of at least five different pages and should showcase most of the features that you will learn throughout the course. Note: You may complete this assignment in a separate Word document.
If you choose to do so, be sure to number your responses to match the questions provided in the worksheet.
1. Proposed Site Structural Theme Information on websites at times makes more sense when the pages are arranged in sequences (e.g., sequential ordering in terms of chronology, general to specific content, alphabetically) or in hierarchies (e.g., a landing page “hub,” with the subpage “spokes” extending in no particular order from that hub). While the majority of websites across the internet employ the hierarchical structural theme, there are instances where a more linear and sequenced site structural theme makes more sense. In 2–3 sentences, explain which structural theme you plan to use on your final project website and why you think that is the best approach for your site.
2. Proposed Site Structure In the embedded object below, sketch out a potential structure for your final project website. Remember that your site structure is still very fluid at this point. Be sure to balance logical and feasible considerations when making your choices. You may either select the object, copy/paste to duplicate existing text boxes and lines, and then drag them around to your liking, or you may click on the Insert tab on Word’s ribbon and select the shapes you wish to use under the Shapes menu. A “home page” box linked to a page has already been included to get you started. Home Page Secondary Page
3. Proposed Site Navigation Wireframe In the field below, provide a brief overview of your proposed navigational wireframe. Name at least five specific pages (e.g., Home or About This Site) and provide a brief, 1- to 2-sentence description of what kind of content each page will offer (for example, About This Site informs visitors about the products my uncle’s business sells, along with some company background). You may separate your page names and descriptions with semicolons. Remember, this does not have to be “set in stone” yet. It will likely change as you continue to plan, design, and build your site.