This project provides you with great practice making MODERN LOOKING web apps by cloning the "Conquer" Website Template in HTML/CSS/JS WITHOUT Bootstrap, jQuery, or other libraries (like Materialize)!
When you download it to check out, the design is made using Bootstrap and jQuery, but we want you to make it without those libraries, just using your mad HTML, CSS, and JavaScript skillz!
When you are done, this type of template looks terrific and gracefully responds on all devices. You could make different versions to use in future web apps you develop!
If you aren’t yet a member of Chingu we invite you to join us. We help our members transform what they’ve learned in courses & tutorials into the practical experience employers need and want.
Our remote team projects let you refine your technical skills and put them into practice while gaining new “soft” skills like communication, collaboration, and Agile project management. The types of skills that help real-world teams get things done!
You can learn more and join us at chingu.io.
For this project you must use Native (Vanilla/Plain) HTML5, 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.
General instructions for all Pre-Work Projects can also be found in the Chingu Library.
Structure
-
Explore the Conquer Template demo, then download it (FREE) to your computer
-
Make files for your app, such as an
index.html, stylesheet, and.jsfile.You may download the Conquer template and use its `index.html` for testing. This will allow you to compare what you've implemented against the screenshot we've provided. However, you'll need to come up with your own implementation of the CSS and JS. -
Make sure you have HTML containers for each section. For instance a navigation, header, footer, sections, divs
-
Footer section with your developer information
Style
-
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. -
Choose some images for your template sections at Unsplash or another free image/video site
-
Which fonts and colors do you want to use? Add these and media queries (to look good on mobile) to your stylesheet, which you need to add to your
index.html -
For the card sections of the page, categories, etc. decide on a layout strategy and use it consistently, such as CSS Grid and/or Flexbox
-
Design your buttons and other elements. Remember to use a consistent design so buttons all look like buttons, links all look like links, etc.
Functionality
-
Make your buttons scroll to the page sections. The scrolling that gracefully eases in instead of jumps is a good thing to try with JavaScript
-
Implement a Parallax effect for your page.
You are going to need to research how to write the JavaScript and CSS for the PARALLAX effect. It is recommended, because it is an effect in high demand! "Parallax" scrolling is when the background appears to move at a different rate of speed, or in a different direction, than the rest of the page.
Other
- Your repo needs to have a robust
README.md - Make sure that there are no errors in the developer console before submitting
Extras (Not Required)
- Make your design fully responsive (small/large/portrait/landscape, etc.)
- Anticipate and handle any edge cases
- Use Accessibility techniques (i.e. a11ly) to improve your site for users with impairments
- Add a
CONTRIBUTING.mdfile with instructions on how to contribute to your project - Each category could have a different background! You could use different free images from Unsplash for this.
- Implement service workers to improve performance by relying on cached data