Code Monkey home page Code Monkey logo

santafied's Introduction


UPDATE: Project Archived!

This project has been archived to preserve its state at the end of Hacktoberfest 2019. Thank you to everyone that participated and made this project what it is tody and we look forward to seeing you all at Hacktoberfest 2020! Interested in more events? keep an eye on our Events page HERE


Santafied - Hacktoberfest 2019

Santafied

Welcome to this year's HTML challenge for Hacktoberfest (What is Hacktoberfest?). A project with beginners and aspiring developers in mind, utilizing HTML, CSS & maybe a dash of JavaScript to achieve a simplistic yet elegant Christmas themed website.

Everyone is encouraged to participate, regardless of your skill level. This is a practice project and should be considered a playground. This project has plenty of options for collaboration, here are just a few of the many that we welcome pull requests:

  • HTML elements
  • CSS styling
  • Images
  • Text/Copy
  • Documentation
  • Fix Typos, Code Bugs or Accessibility oversights

Project Brief

Over the years Santa Claus has noticed a decline in the Christmas spirit and is in desperate need of our help! Santa and his elves have put together a basic design concept for a brand new website they want to be able to launch in November.

The website should provide visitors with the following:

  • A page for Christmas information and facts.
  • Recipes page for traditional food and drinks of Christmas
  • Gift suggestions for secret santas
  • Lyrics for Christmas songs ๐ŸŽต
  • Christmas games ๐ŸŽฎ
  • Christmas Films ๐ŸŽฅ
  • Christmas Books ๐Ÿ“š
  • Christmas Activities ๐Ÿคช
  • Christmas themed party costumes ๐Ÿ‘ป
  • Christmas themed backgrounds ๐Ÿ—ป
  • Christmas themed name generator webapp ๐Ÿ“ฑ

Suggestions & Ideas

Santa and his elves are very much open to ideas and suggestions for new content. Please create a new issue here, ensuring that you indicate if the task is "up for grabs" or you wish to take up the task yourself.

Getting Started

Ok, so you have read the brief and checked out the designs. Ready to contribute, but not sure how or where to start?

If you've never made a pull request before, or participated in an open-source project, we recommend taking a look at our Start Here Guidelines. This repo has everything you need to learn about open-source, with a step-by-step guide to making your very first PR. Once you've got your feet wet, you're ready to come back and dive into Hacktoberfest fun!

  1. First up you need to fork (make a copy) of this repo to your Github account.
  2. Clone (download) your fork to your computer
  3. Set your streams so you can sync your clone with the original repo (get the latest updates)
  • git remote add upstream https://github.com/zero-to-mastery/Santafied.git
  • git pull upstream master
  • The above 2 commands will synchronize your forked version of the project with the actual repository.
  1. Find a task here or create a task
  2. Create a branch for your task and complete the task
  3. Commit and push the code to your fork
  4. Create a pull request to have the changes merged into the origin

All discussions around this event can now be had in our #hacktoberfest-2019 channel on Discord!

Congratulations! You are now one pull request closer to getting that free t-shirt. Repeat steps 4-7 until you have made at least 4 qualifying pull requests. You can check how many qualifying pull requests you have made at https://hacktoberfest.digitalocean.com/profile Have Fun and Happy Coding Guys!

To ensure everyone has the best chance at participating in this project. Please follow these simple guidelines where possible:

  • Simplicity is key: There is not much need for React, Sass etc here. Lets stick with vanilla HTML, CSS & JavaScript.
  • Commenting: Try to comment your code, so everyone can understand whats going on and could learn a thing or two.
  • Respect Content: Only use images/content that we are licensed to use.
  • Issues: Use Github issues, to create/find/solve ideas and bugs.

santafied's People

Contributors

abdus avatar akmalist avatar alansarluv avatar anirudh-kac avatar bbtora avatar blips5 avatar carmeniancu avatar chimachinedum avatar ckanelin avatar cschmidt10 avatar earle-poole avatar garrettkucinski avatar jameswhitney avatar jimbratsos avatar levanisart avatar miguelmachado-dev avatar mrzahidjabbar avatar niass avatar notankur avatar oliver-gomes avatar pavelisp avatar ronan-f avatar shafer949 avatar shamseena-dev avatar shruti49 avatar stanleyume avatar sunitasen avatar t-kowalewski avatar vrajkd avatar yglez avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

santafied's Issues

Issues on Facts page

There are many issue on facts page ... mostly related to improper Html tags

I think we need to revert back some previous merge for facts pages.

Fix Books layout

Looks like there is an issue with the way cards are being displayed. Only one card on the right hand side should be displayed at any one time:
image

Also the footer should remain full width:
image

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

[CREATE] Facts Page

Create the basic page skeleton for the fact page, inline with the design.

[Enhancement] - Change Navbar Style inline with new design

Santa decided the navbar looks too crowded and would just like to add all the links to a single drop down and add a email subscriber form.

Adjust the navbar on all pages to reflected the updated design, found here

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Features section doesn't look good in smaller devices.

Issue:
On smaller screens the individual features on 'Features' section in home page overlap each other.

Proposed solution:
Display individual features one per row on small devices, and 3 per row an large devices.

[UPDATE] Index Carousel

We seem to have two carousels for the index page, we only need one, ideally it should match the design as closely as possible ๐Ÿ˜„

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Activities Card Design

These cards look a little plain, perhaps we could spice them up with some styling or images maybe

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Elf name generator

This page might benefit from some further styling to make it stand out a little more.

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Javascript navbard dropdown generator function

Updating the links on each page is becoming a real headache, causing a lot of broken links.

In this task you need to create some Javascript that will have all the page links, generate the links for the new navbar drop down (see issue #207) and then inject them into the headers dropdown on each page.

This way when a link needs adding or updating it can be done from the JS file.
Ensure that you comment each navbar so other contributors know how to go about adding/editing links.

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

[CREATE] Activities Page

Create the basic page skeleton for the Activities page, inline with the design.

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Correct gifts page layout

The background images and colored background should reach each side of the page:

image

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Use Compressed Images

The images used in this webpage are way too large. Usage of mozjpeg image encoder will help to reduce its size while keeping the quality.

[CREATE] Games Page

Create the basic page skeleton for the games page, inline with the design.

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Index Carousel

The index Carousel is again overlapping all the content when viewed on a mobile screen.
Screenshot_20191001-180231

[UPDATE] Gifts Page

I think it would be awesome if changed up the gifts page slightly. Lets have:

  • The "categories" as a nicely sized <h2>'s
  • <h3> or <p> Subtile
  • Then use the Card Varient 2 for the designs to list some products, for example:

Plush Toys

Plush Toys are always the cutest gifts. Especially kids would love them for sure.

<Card Plush 1> <Card Plush 2> <Card Plush 3>


IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Fix Index Carousel

Carousel overlaps the intro image and text on small and medium screen size:

Screen Shot 2019-10-01 at 07 50 26

[CONTENT] - Add page content - Ongoing task, everyone can do this

This task is on going, we can never have enough content ๐Ÿ˜„

Several pages are in need of some content cards. You can add as many as you like for any of the following:

  • Recipes
  • Songs
  • Films
  • Books

Once the following pages have been created they will also likely need content too:

  • Facts
  • Games
  • Activities

Activities page layout

The cards could do with being spread across the page a little more removing the white space towards the right hand side

image

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Create page cards on the index

The main content area of the index page should have a card for each page the website has.
The design and layout for this is up to you, but remember it also needs to be responsive for different screen sizes.

IF YOU WISH TO WORK ON THIS, PLEASE CHECK NO ONE HAS CLAIMED IT BELOW, IF NOT CLAIM IT BY COMMENTING

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.