{"id":559,"date":"2023-12-07T10:26:11","date_gmt":"2023-12-07T10:26:11","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=559"},"modified":"2023-12-07T10:26:13","modified_gmt":"2023-12-07T10:26:13","slug":"assignment-advanced-bootstrap-skills-assessment-lawyers-portfolio-website","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/assignment-advanced-bootstrap-skills-assessment-lawyers-portfolio-website\/","title":{"rendered":"Assignment: Advanced Bootstrap Skills Assessment &#8211; Lawyer&#8217;s Portfolio Website"},"content":{"rendered":"\n<p><strong>Objective:<\/strong> This assignment aims to assess your proficiency in advanced CSS, including selectors, layout techniques, animations, and responsive design.<\/p>\n\n\n\n<p><strong>Instructions:<\/strong><\/p>\n\n\n\n<p><strong>Task 1: Complex CSS Selectors (15 points)<\/strong><\/p>\n\n\n\n<p>Create an HTML document with a basic structure containing headings, paragraphs, and lists. Then, use CSS to style specific elements using advanced selectors:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply styles to even and odd paragraphs differently using <code>:nth-child<\/code> pseudo-classes.<\/li>\n\n\n\n<li>Style elements with specific classes and IDs.<\/li>\n\n\n\n<li>Use descendant selectors to style nested elements.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 2: Advanced Layout (20 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implement a multi-column layout using CSS Grid or Flexbox. Create a grid or flex layout for navigation, content, and a sidebar.<\/li>\n\n\n\n<li>Use media queries to change the layout for smaller screens (e.g., tablet and mobile) to ensure responsive design.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 3: CSS Transitions and Animations (20 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply CSS transitions to create smooth hover effects for at least two elements (e.g., buttons, images).<\/li>\n\n\n\n<li>Create a CSS animation for an element (e.g., a rotating image, fading text).<\/li>\n\n\n\n<li>Ensure that animations are well-timed and visually appealing.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 4: Custom Fonts (15 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Include and apply a custom web font from a reliable source like Google Fonts or Adobe Fonts.<\/li>\n\n\n\n<li>Use the <code>@font-face<\/code> rule to add a locally hosted font and apply it to specific elements.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 5: Pseudo-elements and Pseudo-classes (15 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Utilize pseudo-elements like <code>::before<\/code> or <code>::after<\/code> to add decorative elements to your web page.<\/li>\n\n\n\n<li>Implement styles for links using pseudo-classes like <code>:hover<\/code>, <code>:visited<\/code>, and <code>:active<\/code>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 6: CSS Variables (10 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Define and use CSS variables (custom properties) to maintain consistency in color schemes or other design aspects across your web page.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 7: Advanced Selectors and Combinators (10 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implement complex CSS selectors, such as combinators (<code>&gt;<\/code>, <code>+<\/code>, <code>~<\/code>) to target specific nested elements.<\/li>\n\n\n\n<li>Use attribute selectors to target elements with specific attributes.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 8: Compatibility and Fallbacks (10 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure that your CSS is cross-browser compatible and include vendor prefixes where necessary.<\/li>\n\n\n\n<li>Provide a CSS rule as a fallback in case a browser doesn&#8217;t support a particular property or value.<\/li>\n<\/ul>\n\n\n\n<p><strong>Submission:<\/strong><\/p>\n\n\n\n<p>Submit your HTML file (.html), external CSS file (.css), and any associated resources (fonts, if applicable) in a zip folder. Include your name in the file name (e.g., &#8220;YourName_Advanced_CSS_Assignment.zip&#8221;).<\/p>\n\n\n\n<p><strong>Grading:<\/strong><\/p>\n\n\n\n<p>Your assignment will be graded based on the completeness, correctness, adherence to CSS standards, creativity, and responsiveness. Make sure your code is well-structured and well-documented.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Objective: This assignment aims to assess your proficiency in advanced CSS, including selectors, layout techniques, animations, and responsive design. Instructions:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-559","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=559"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/559\/revisions"}],"predecessor-version":[{"id":560,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/559\/revisions\/560"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=559"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=559"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}