Module 2 CSS Coding Assignment Guide
Uploaded by
rasidun.bariModule 2 CSS Coding Assignment Guide
Uploaded by
rasidun.bariCommon questions
Powered by AIProper spacing within each section should be managed using margins and padding, ensuring text does not overlap with the section title regions. Horizontal and vertical spacing between sections and browser edges must follow mockup illustrations. The use of box-sizing as 'border-box' ensures that padding and border widths do not affect the overall width and height calculations of elements .
The assignment requires using an external CSS file placed in a 'css' folder, prohibiting inline styles and CSS frameworks like Bootstrap. However, the simple responsive framework from Lecture 24 can be used as a starting point. CSS should define layout, section spacing, background colors, and borders, with media queries to manage responsiveness .
Accurate implementation can be verified by comparing the layout with mockup illustrations for each view (desktop, tablet, mobile). Inspect tools in web browsers can assist in checking CSS properties like margins and padding to ensure they align with specifications. Adjustments are made by tweaking styles until elements fit as per mockup guidance .
In the desktop view (992px and above), all three sections should display in one row, each taking up an equal amount of space. The tablet view (768px to 991px) places the first two sections in one row, with the third section taking up the entire second row. For the mobile view (767px and below), each section occupies the entire row. Media queries should be used to achieve these layouts .
Each section and section title should have a background color that contrasts enough with text to maintain readability. The colors of titles are uniquely set for distinctiveness. A 1px black border should surround both sections and titles, aiding in visual separation and design consistency between the elements .
Media queries are essential for creating a responsive webpage by allowing the layout to adapt to different screen sizes. They enable the transition between desktop, tablet, and mobile layouts, ensuring appropriate section arrangements and widths for each view. This responsiveness is achieved by specifying CSS rules that apply only when the browser width matches specific conditions .
Managing fonts is crucial for readability and aesthetic appeal. In this assignment, setting explicit font families prevents default browser fonts, and scaling the font size by 75% for headings and 25% for section titles relative to the text ensures visual hierarchy and emphasis on important content .
Section title regions must consistently appear at the top right corner of each section in all views (desktop, tablet, mobile). This can be done by using CSS's relative and absolute positioning techniques, ensuring the layout remains correct regardless of screen size .
Excluding CSS frameworks encourages students to learn core web development skills by creating styles manually via CSS properties. This strengthens understanding of how components interact and ensures learners can build responsive designs without relying on pre-built styles, which enhances problem-solving and innovation skills when dealing with layout challenges .
To begin the Module 2 coding assignment, you must first create a GitHub.com account and a repository for the class. Follow the instructions in the Development Setup Video from Module 1 to host and view your web pages on GitHub Pages, providing the URL for peer review. Create a container folder in your repository for your solution, such as 'module2-solution', and an 'index.html' file inside it .