In this project, you will create a simplified version of the 100 Days of CSS desktop landing page. In this landing page clone, you will include a couple links to your own Code Pen that will be a very simple implementation of a unique image or animation created with soley HTML and CSS.
You are only creating one unique image or animation that will be shown TWICE on the clone page. See the original landing page for inspiration.
For this project you MUST use vanilla (plain) HTML/CSS and JavaScript. You are encouraged to use CSS grid, flexbox, media queries, a naming system like BEM, semantic HTML tags, or other modern techniques. You may not use frameworks or libraries such as Bootstrap.
You may NOT use frameworks or libraries such as Bootstrap.
For this specific clone, you are only expected to replicate the desktop version of the site and you are NOT expected in any way to make the landing page responsive.
General instructions for all Solo Projects can also be found in the Chingu Library.
Cloning means to create a web page with a layout as identical as possible to the template. Fonts, colors, and images are not important. The layout of the web page on the other hand should be the same. A suggestion would be to compare the way the template looks face to face to the clone.
Structure
- Explore the 100 Days of CSS landing page and identify the components that make it up
- Create your own solution without looking at the site's page source
- Timer
- Should include a clock icon/svg and does not have match the one shown on the landing page exactly
- Codepen
- Have two embeds of single the codepen you created on the page using this link's instructutions
Style
- Since the goal of this project is to create a clone of the Initab page you will want to make sure that your app mimics the layout, fonts, color scheme, and visual elements in the original Initb app. Because it is a clone you may not change the style, even though it may run counter to your personal preferences.
- What will you use for your layout: floats, flexbox or grid?
- Once you decide, start by creating the structure of the webpage and then add the styles (e.g. colors, fonts).
- You should use native CSS or CSS preprocessors like SASS or Stylus. You may not use a CSS library like Bootstrap.
- Any links or buttons on the site should be indicated upon hover matching the style of the landing page. These do not have to lead anywhere.
Functionality
- You are required to implement your own timer via vanilla JavaScript
- The Codepen embeds should work as shown in the landing page
Other
- Your repo needs to have a robust
README.md(see Keys to a Well-Written Readme) - Make sure that there are no errors in the developer console before submitting
- Deploy your website
Once you're done with the requirements and the console is free of errors, deploy your application. You can use services like GitHub pages, Netlify or Heroku. It's up to you!
Extras (Not Required)
- Include multiple variations of the image/animation that you chose to implement with CSS on the landing page
- Create additional image/animations that would be visible after changing the day with navigation of your choice on the landing page
- Make your design fully responsive (see Responsive Web Design Basics)
- Anticipate and handle any edge cases
- Use Accessibility techniques (see The A11Y Project) to improve your site for users with impairments