AD - SBA - HTML/CSS/JavaScript
Join Shrek and friends on this journey through a very basic website!
Requirements:
In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly.
Your work will be graded based on the below technical requirements. Also, creativity always works in your favor.
Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements.
Once you got your idea, think in the user’s perspective when creating the website. You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system.
Deliverable:
A theme for your site that you feel comfortable with Complete all technical requirements for HTML, CSS, and Javascript Research for a public API that can provide you with content (Optional) Include a README file. The file should include technical specifications and a description of your website. Host on GitHub, include the link to your GitHub account in the README file(optional) Submit the project in a ZIP file Technical requirements:
HTML
Have at least 3 pages, keep the grid system consistent as much as possible Use at least 10 different HTML tags Use HTML tables Implement at least two uses for forms Dropped Down Menu Use web fonts Use different types of content in the form of text, images, videos, and GIFs Use regex validation CSS
Inline, internal, and external styling Use five different CSS selectors Don’t use too many fonts Use colors that complement each other Use Flexbox (Optional) Use SASS/SCSS (Optional) Use animations (Optional) Javascript
External scripts Use variables, if statements, loops, at least one form of collections, functions/call back, and events Use AJAX (Optional) Use JSON or XML (Optional) Use JQuery (Optional)