Made with HTML, TailwindCSS
Built with Webpack
This is a solution to the News homepage challenge on Frontend Mentor.
The challenge is to build out a News Homepage and get it looking as close to the design as possible.
See task.md for more details about the task.
Users should be able to:
- View the optimal layout for the interface depending on their device's screen size
- See hover and focus states for all interactive elements on the page
- Bonus: Toggle the mobile menu (requires some JavaScript)
- HTML5
- Semantic HTML
- TailwindCSS
- Webpack + PostCSS + Tailwind
- Grid
- NodeJS
- Webpack
- Github Pages
- Hosting
| Command | Description |
|---|---|
npm install |
Installs required npm packages. Run it before building the project |
npm start |
Builds application in development mode, launches a server that opens in a new browser tab |
npm run dev |
Builds application in development mode, results may be found in ./build folder |
npm run build |
Builds application in production mode, results may be found in ./build folder. Files are minimized, hash added to filenames to help when dealing with caching |
| Path | Description |
|---|---|
build |
Folder with files generated by Webpack |
static |
Folder with static assets (images, favicon) |
src |
Source files needed for application development |
src / index.css |
Main styles, Tailwind declarations |
src / index.html |
HTML with Tailwind classes |
src / index.js |
Entry point for Webpack + some JS for toggling a side menu |
docs |
Folder with additional information, documentation |
docs / design |
Folder with images of how the interface must look like |
docs / results |
Folder with screenshots of how the application works after being fully developed |
docs / README-template.md |
Template for README.md, don't use it (from FrontendMentor) |
docs / style-guide.md |
Style information: color palette, fonts, etc. (from FrontendMentor) |
docs / task.md |
Detailed task description (from FrontendMentor) |
docs / news-homepage-main.zip |
Initial archive provided by Frontend Mentor |
LICENSE |
MIT License |
package-lock.json |
JSON file that keeps track of the exact version of every package that is installed so that a product is 100% reproducible in the same way even if packages are updated by their maintainers |
package.json |
JSON file that holds various metadata relevant to the project. This file is used to give information to npm that allows it to identify the project as well as handle the project's dependencies |
.prettierrc |
Config for Prettier VS Code plugin |
webpack.common.js |
Contains configuration common for build and dev configs |
webpack.dev.js |
Contains configuration for development mode |
webpack.prod.js |
Contains configuration for production mode |
postcss.config.js |
PostCSS configuration file |
tailwind.config.js |
TailwindCSS configuration file |
| Package | Comment |
|---|---|
css-loader |
Is used by Webpack, resolves assets imported in css files, unites them in one file |
css‑minimizer‑webpack‑plugin |
Is used by Webpack, minifies css |
html-loader |
Is used by Webpack, resolves assets in html files. (Mode production works perfectly without it, but development mode for some reason sometimes loses some assets referred in html...) |
html‑webpack‑plugin |
Is used by Webpack, generates a html file from a template. Minifies html, adds links to js, css |
mini-css-extract-plugin |
Extracts transpiled css in a separate css file |
postcss |
Is used by Webpack, converts css written with PostCSS plugins to plain css |
postcss-loader |
Is used by Webpack, converts to css using postcss package |
postcss-preset-env |
Comes with PostCSS |
style-loader |
Injects CSS in index.html (used for dev mode only) |
tailwindcss |
CSS framework, works as a plugin to PostCSS |
terser-webpack-plugin |
Is used by Webpack, minifies js (comes with webpack, no need to install it separately) |
webpack |
Module bundler |
webpack-cli |
Required for work of webpack with v4 or later |
webpack-dev-server |
Launches developer server that automatically applies all changes in code |
webpack-merge |
Helps to merge configs (webpack.common.js + webpack.dev.js for example) |
- Undraggable photos, links
- Hover on links
- Toggle side menu on small screen
- Figma prototype (made myself): https://www.figma.com/file/nUdNrKuYGEPC0kMMLirjzX/News-Homepage?node-id=0%3A1
- Snippets for Tailwind - Highly recommend! Greatly saves time
- Tailwind Docs
- Setup Webpack with Tailwind CSS
- Prettier: VS Code plugin
- Tailwind CSS IntelliSense: VS Code plugin
- Frontend Mentor - @GrbnvAlex
- Telegram - @Arlagonix
- Github - @arlagonix