{"id":553,"date":"2023-12-07T10:14:20","date_gmt":"2023-12-07T10:14:20","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=553"},"modified":"2023-12-07T10:14:59","modified_gmt":"2023-12-07T10:14:59","slug":"assignment-title-advanced-html-skills-assessment","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/assignment-title-advanced-html-skills-assessment\/","title":{"rendered":"Assignment: Advanced HTML Skills Assessment"},"content":{"rendered":"\n<p><strong>Objective:<\/strong> This assignment aims to assess your proficiency in HTML, including advanced topics such as forms, multimedia integration, and CSS styling.<\/p>\n\n\n\n<p><strong>Instructions:<\/strong><\/p>\n\n\n\n<p><strong>Task 1: Complex HTML Structure (15 points)<\/strong><\/p>\n\n\n\n<p>Create an HTML document with the following structure:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Declare the document type and HTML version.<\/li>\n\n\n\n<li>Implement a multi-column layout using semantic HTML5 elements like <code>&lt;header&gt;<\/code>, <code>&lt;nav&gt;<\/code>, <code>&lt;main&gt;<\/code>, <code>&lt;section&gt;<\/code>, and <code>&lt;footer&gt;<\/code>.<\/li>\n\n\n\n<li>Use appropriate attributes and labels to ensure the structure is semantically meaningful.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 2: Forms and Input Elements (20 points)<\/strong><\/p>\n\n\n\n<p>Inside the <code>&lt;main&gt;<\/code> section:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Develop a complex form that includes text inputs, text areas, radio buttons, checkboxes, a dropdown select box, and a submit button.<\/li>\n\n\n\n<li>Utilize the <code>&lt;label&gt;<\/code> element to associate labels with form fields.<\/li>\n\n\n\n<li>Implement form validation using HTML5 attributes like <code>required<\/code>, <code>pattern<\/code>, and <code>minlength<\/code>.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 3: Multimedia Integration (15 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Embed a video from an external source (e.g., YouTube) using the <code>&lt;iframe&gt;<\/code> element.<\/li>\n\n\n\n<li>Include at least two images, one of which should be responsive (adjust to different screen sizes) using appropriate HTML and CSS techniques.<\/li>\n\n\n\n<li>Implement audio integration using the <code>&lt;audio&gt;<\/code> element.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 4: HTML5 Semantic Elements (15 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use at least five different HTML5 semantic elements such as <code>&lt;article&gt;<\/code>, <code>&lt;aside&gt;<\/code>, <code>&lt;figure&gt;<\/code>, <code>&lt;figcaption&gt;<\/code>, and <code>&lt;time&gt;<\/code> to enhance the structure and meaning of your content.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 5: CSS Styling (20 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Create an external CSS stylesheet and link it to your HTML document.<\/li>\n\n\n\n<li>Apply CSS styling to format your web page, including fonts, colors, margins, and padding.<\/li>\n\n\n\n<li>Use CSS to style at least one of the form elements differently (e.g., change the background color when focused or add hover effects to buttons).<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 6: Accessibility (10 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ensure your web page is accessible by adding appropriate <code>alt<\/code> attributes for images and providing keyboard navigation support.<\/li>\n\n\n\n<li>Include ARIA attributes where applicable to improve accessibility.<\/li>\n<\/ul>\n\n\n\n<p><strong>Task 7: Responsive Design (15 points)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Implement responsive design techniques using CSS media queries to ensure your web page adapts gracefully to different screen sizes (e.g., desktop, tablet, mobile).<\/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 (images, if applicable) in a zip folder. Include your name in the file name (e.g., &#8220;YourName_Advanced_HTML_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 HTML and CSS standards, accessibility considerations, and responsive design. Ensure that your code is well-structured and well-documented.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Objective: This assignment aims to assess your proficiency in HTML, including advanced topics such as forms, multimedia integration, and CSS<\/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-553","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/553","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=553"}],"version-history":[{"count":2,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":555,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/553\/revisions\/555"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}