Giter VIP home page Giter VIP logo

codingblocks.com1's Introduction

coding-blocks.github.io

Deploys

Netlify
Commits to master and PRs are automatically built and deployed by Netlify

Contributions and PR

  • PRs should be generated against master
  • Wait for @codingblocks-bot to deploy site and paste link of preview
  • Check preview. If all good, then only PR -> master merge is made

Build Setup

# install dependencies
npm install

# build for production with minification
npm run build

Tasks

# minify src images
gulp compress

# clean tmp and dist
gulp clean

Project Structure

.
├── dist                    # Compiled files (auto deployed to master)
├── gulp                    # Gulp tasks and config
├── src                     # Source files
└── ...

Gulp Structure

.
├── ...
├── gulp
│   ├── tasks               # Task.js files
│   └── config.js           # Exports module for tasks config
└── ...

Src Structure

.
├── ...
├── src
│   ├── ...
│   ├── assets              # assets for the website
│   │   ├── fonts
│   │   ├── images
│   │   ├── scripts
│   │   ├── styles
|   ├── data                # Common JSON data for all pages
|   ├── helpers             # Handlebars helpers (js exporting a function in module)
|   ├── partials            # Handlebars partials (hbs template)
|   ├── index.hbs           # HBS template file 
|   ├── index.json          # JSON file for the HBS (/src/index.hbs)
│   └── ...
└── ...

Data

Common JSON data for all pages

.
├── ...
├── src
│   ├── ...
│   ├── data             
│   │   ├── bootcamps.json      # Bootcamps data (price table and upcoming batches)
│   │   ├── courses.json        # Courses data (price table and upcoming batches)
│   │   ├── footer.json         # Footer imgSrc data
│   │   ├── navbar.json         # Navbar imgSrc data
│   │   ├── reviews.json        # All reviews data
│   │   ├── team.json           # All team member's data
│   └── ...
└── ...

Helpers

Js files export modules with a single function.

.
├── ...
├── src
│   ├── ...
│   ├── helpers             
│   │   ├── ifEquals.js     # In-case Sensitive matching of a string
│   │   ├── relativePath.js # Generate relative path from two absolute path strings
│   │   ├── removeComma.js  # Remove commas from a string
│   └── ...
└── ...

Example:

module.exports = function (..., options) {
.
.
.
}

Partials

Handlebars Template files

.
├── ...
├── src
│   ├── ...
│   ├── partials                        
│   │   ├── bootcamps.hbs               # Bootcamps section
│   │   ├── centerlocation.hbs          # Center location & contact Box
│   │   ├── course.hbs                  # Course price box 
│   │   ├── coursecontents.hbs          # Course content section
│   │   ├── courseenroll.hbs            # Upcoming batches and price box section
│   │   ├── coursefaq.hbs               # Course Faq section
│   │   ├── coursehighlights.hbs        # Course Highlights section
│   │   ├── courses.hbs                 # Courses section
│   │   ├── courseSchema.hbs            # Course JSON-LD Schema
│   │   ├── footer.hbs                  # Footer container
│   │   ├── head.hbs                    # Site-wide head dependencies
│   │   ├── header.hbs                  # Page header section
│   │   ├── map.hbs                     # Contact form with map section
│   │   ├── meta.hbs                    # Meta & open graph tags
│   │   ├── navbar.hbs                  # Navbar section
│   │   ├── numbers.hbs                 # Numbers Speak Louder section
│   │   ├── overview.hbs                # Course overview section
│   │   ├── readmoretestimonials.hbs    # Read more reviews buttons section
│   │   ├── registration.hbs            # Registration iframe section
│   │   ├── scripts.hbs                 # Site-wide body bottom JS dependencies
│   │   ├── slider.hbs                  # Slider section
│   │   ├── team.hbs                    # Team section
│   │   ├── teamMember.hbs              # Team member box
│   │   ├── whatstudentssay.hbs         # Reviews Section
│   └── ...
└── ...

codingblocks.com1's People

Contributors

abhishek97 avatar aggarwalpulkit596 avatar ananay avatar architkshk avatar bipinkalra avatar championswimmer avatar dhroov7 avatar firefinchdev avatar flaredragon avatar hardikv1 avatar himankbhalla avatar hitesshbajaj avatar jatinkatyal13 avatar kartik-mathur avatar kasif911 avatar keenwarrior avatar kumailzaidi12 avatar lazy-god avatar omerjerk avatar pg07codes avatar prajjwal avatar prateek27 avatar rishabh-bansal avatar sarthak-1998 avatar sd5869 avatar shaktisingh96 avatar thenamankumar avatar till-tomorrow avatar vdvibhu20 avatar witty123 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  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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

codingblocks.com1's Issues

Bug on Firefox browser

Due to a div's height, 2 of the card of home page on firefox browser is creating misalignment
screenshot-codingblocks com 2017-05-23 14-00-13
screenshot from 2017-05-23 14-15-48

Extra and Unusable HTML

Steps to reproduce

  • Go to codingblocks.com
  • Inspect the logo on the top left.
  • You will get some other image which is display: none make it display: block.
  • As the image have a transparent background, make the background-color: black.
    67

Expected

  • Remove the Extra image Markup from the code.

Kids and Online Course section needed on home page

Highlight the Code4Kids Course on Home Page. Create a small section.

Highlight the Online Course on Home Page. Create a small section.
( Sample Layout attached for reference)

The Design must be responsive. The text should come below image in case of mobile.

Each section has two parts - Image/ Logo on the left/right.
Content on the opposite side of image.
layout_changes

Image for Online Course
online

Image for Kids Course
kids_course_2

Suggestions: Student Testimonials Page

https://github.com/coding-blocks/coding-blocks.github.io/issues/78

Sir we can use price_table block for a single review layout, with limited content including reviewer name, pic, star rating and then on hover include separate block containing the review description, as done in team section on main page, but using price_table block rather than circular images.

After that we can filter reviews on the basis of course using portfolio filter kind of feature like: http://codepen.io/creotip/pen/dfjeF but tweaked.

Validate Signup forms cleverly with respective data types

Current sign up form is not secure, productive wise. City and College fields still accept pure numerical. And check boxes are not validated yet success message pops up (Given, name, email and Phone number are filled perfectly)

Design a Photo Gallery Page

A nice Photo gallery to share event photos and other random photos.

Suggest new features in Photo Gallery - 50 Bounty points extra.

problems in the hero slider

For issue #29

1. Found stray text

This piece of stray text was found on the homepage. I know this is silly but I am reporting this because this is easily noticeable while loading since it is on the top of the homepage.
1
3

2. Loading of sliding images

The sliding images are taking a while to load on a standard connection. All the 4 images together are 2.49mb. This is causing the page to look like the below image while loading. ( the 4 slides are displayed one below the other in gray with only text )
2

The solution could be to use vector images or to pre-load the 4 images using simple Javascript. Also a small gif loading animation can be displayed while loading these images. So now the user can scroll down and look through the rest of the site while the slides are being loaded.

Resize/Scale Down Images to reduce Loading Time and Web Page Size

Some of the images like Code4Kids, Online Course Image and may be others are having bigger file size than needed. Resize them to smaller size, no image should have size more than 150-200KB.

Just for the index.html page.

Don't delete the original files, just rename them to imagename_original.

Design a Student Testimonials page.

We have several courses, and every course has student feedbacks. We want to fetch these feedbacks from quora/ facebook and display on our page. ( They can be fetched once using the script and hardcoded for now)

Discuss features before working on the page.
Suggesting features gets 20 Bounty Points.

Find a bug / suggest a feature

Win 20 bounty points by doing either -

  • Find a bug

For this you have to mention expected result, and actual outcome, and post screenshots (if required) to substantiate. Vague bug reports that can't be reproduced will not be entertained

or

  • Suggest a feature

Suggest a feature that can be added. Flesh it out with technical details, and steps required to implement. Post mocks (if required) to explain the feature. It will be considered for bounty if the maintainers consider the feature suggestion valid and decide to work on it.


For either case, file a bug or suggest a feature by opening a new issue.

Suggestion: Photo Gallery

Some Suggestions here:

  • Event photos grouped together and displayed as albums on the main page. Separate pages for each event.
  • Event pages linked in the gallery.
  • LightBox (follow: fb style)
    • Love counter (insta style)
    • comments (disqus)
  • Social Share buttons
  • Event story on subpages(event page), describing about the event and outcomes.

Design a nice layout for achievers and success stories page.

We want to put up photos for achievers (GSOCers, students who have cracked internships and placements )

Expected Design -
There are two parts in the page - A Carosel at the top(4-5 students), followed by a grid layout(50 students)

  1. A carousel of success stories( 4-5 cards) in the top of page.
    Each success story slider will be a card having student photo, name, college and short paragraph.

  2. Grid Layout (40-50) students. Images will be shared by us.

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.