Savva Prokofev - Portfolio
Explorer
Open Editors
Portfolio
.nuxt
node_modules
public
README.md
src
apps
ShortqixWebBidNews TemplateThesis
extensions
HomeDash
packages
nuxtignore-dev
.gitignore
nuxt.config.ts
package.json
pnpm-lock.yaml
tsconfig.json
Outline
Timeline
Scripts
News Template

News Template

Comlex news template

Industry
Media
Year
2021
Service
News

Overview

News Website Template is a modern recreation of the HotMagazine template built with vanilla web technologies. While visually similar to the original 2015 template, this implementation features significant architectural improvements and modern CSS techniques for enhanced responsiveness and performance.

The project is developed using HTML (76.5% of codebase), SCSS (14.7%), JavaScript (8.5%), and CSS (0.3%) with Webpack for build tooling and Babel for JavaScript transpilation. The template focuses on custom implementations rather than external libraries, providing better control over functionality and performance optimization.

Key improvements over the original template include custom carousel implementations developed from scratch with full customization and responsiveness support, modern CSS technologies like Flexbox and CSS Grid for complete responsive design, and optimized build process with Webpack for efficient asset bundling and code splitting.

  • HTML5 semantic markup structure
  • SCSS for advanced CSS preprocessing
  • Vanilla JavaScript for carousel functionality
  • Webpack with Babel for build optimization
  • Custom carousel implementations
  • Flexbox and CSS Grid layouts
  • Fully responsive design
  • PostCSS configuration for CSS processing
  • Modern CSS architecture

The template architecture emphasizes custom development over library dependencies, ensuring lightweight performance and full control over interactive elements. All carousels are built from scratch with comprehensive customization options and mobile-first responsive design principles.

The development workflow includes Webpack configuration for asset bundling, PostCSS for CSS processing and optimization, and modern JavaScript features with Babel transpilation. The project serves as both a functional news website template and a demonstration of modern vanilla web development practices without external framework dependencies.

Technologies

  • HTML5
  • Sass
  • JavaScript
  • Babel
  • Webpack
Live Preview
websavva.github.io/news/
Source code
github.com/websavva/news