As a web developer, there is no need to "reinvent the wheel", you can meet your deadines easier by working with libraries and frameworks. What you are thinking of might have beeen done already, so why do it all over again..such a time waste!. Below are some useful libraries that can make your front-end development fun.
FRONTEND FRAMEWORKS Instead of building your Html, CSS & JS from scratch why not use framworks?.Learning a good web framework makes your life much easier.
- Bootstrap:(www.getbootstrap.com)
- Foundation (http://foundation.zurb.com/)
- Material Design()
- Symantic Ui (https://semantic-ui.com/)
- UIKit (https://getuikit.com/)
- Anchor Bootstrap Kit (https://wowthemesnet.github.io/Anchor-Bootstrap-UI-Kit/index.html)
FRONTEND FRAMEWORK EXTENDED LIBRARIES These are popular extended frameworks on steroids!They usually contain anditional functionality or enhanced tweaks in styling from base framework they derive from.
- FuelUx (http://getfuelux.com/)
- Material Bootstrap (https://mdbootstrap.com/material-design-for-bootstrap/)
- MaterialCss[Beta] (http://materializecss.com/)
USER INTERFACE SNIPPETS
- Codepen (https://codepen.io/)
- Bootsnip (http://bootsnipp.com/)
COMMUNITIES
- StackOverflow (https://www.stackoverflow.com)
- Codepen (https://codepen.io/)
TOOLTIP
- Popperjs(https://popper.js.org)
- Opentip (http://www.opentip.org/)
- Tipped (http://www.tippedjs.com/)
PROGRESS BARS
- NProgress (http://ricostacruz.com/nprogress/)
- Pace (http://github.hubspot.com/pace/docs/welcome/)
ICONS
- FlatIcon (http://www.flaticon.com/)
- Material Icons (https://material.io/icons/)
- Font Awesome Icons (http://fontawesome.io/icons/)
NOTIFICATION
- NotifyJs (https://notifyjs.com)
- Toastr (https://codeseven.github.io/toastr/)
ANIMATIONS
- AnimateCss (https://daneden.github.io/animate.css/)
- Hover.Css (http://ianlunn.github.io/Hover/)
- Texilate.JS (http://textillate.js.org/)
DATAGRID & Lists
- Bootstrap Table (http://bootstrap-table.wenzhixin.net.cn/)
- JSGrid (http://js-grid.com)
- AgGrid (https://www.ag-grid.com/)
- JTable (http://www.jtable.org/)
- List.js (http://listjs.com)
- Datatables (https://www.datatables.net)
FORM VALIDATION
- Form Validation (http://formvalidation.io/)
- Parsley (http://parsleyjs.org/)
CHARTS
- ChartJs (http://www.chartjs.org/)
- Flot Charts (http://www.flotcharts.org/)
- Morris.js (http://www.flotcharts.org/)
- DyGraphs (http://dygraphs.com/)
IMAGE
- Jsor (www.jssor.com)
- Placehold (https://placehold.it/)
- Lorempixel (http://lorempixel.com/)