soloproject-tier1-website-template

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

soloproject-tier1-website-template

★ 17 Open GitHub ↗

Chingu Solo Project - Tier 1 - Website Template

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Chingu Solo Project - Tier 1 - Website Template

![Tier1 Website Template](https://raw.githubusercontent.com/chingu-voyages/soloproject-tier1-website-template/master/assets/Tier1_Website_Template.gif)

## Overview
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!

## About Chingu

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](https://chingu.io).

## Instructions

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](https://separated-pruner-c0c.notion.site/Solo-Projects-bcb04a220e564a80b835557e803c0a5e).

### Requirements

*Structure*
- [ ] Explore the [Conquer Template demo](https://www.free-css.com/free-css-templates/page196/conquer), then download it (FREE) to your computer
- [ ] Make files for your app, such as an `index.html`, stylesheet, and `.js` file.

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](https://unsplash.com/) 
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.md` file with instructions on how to contribute to
your project
- [ ] Each category could have a different background! You could use different 
free images from [Unsplash](https://unsplash.com) for this.
- [ ] Implement service workers to improve performance by relying on cached data

soloproject-tier1-website-template

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README