404 Not Found

Solution for a challenge from Devchallenges.io.

Demo | Solution | Challenge

Table of Contents

• Table of Contents
• Overview
  • Desktop
  • Mobile
  • Built With
• Features
• How To Use
• learned/improved
• Acknowledgements
• Contact

Overview

Desktop

Mobile

Built With

Base

• HTML
• CSS
• Node.js：18.17.1
• Vite：4.4.9

Other major libraries

• postcss-preset-env

Features

This application/site was created as a submission to a DevChallenges challenge. The challenge was to build an application to complete the given user stories.

• User story: I can see a page following the given design

How To Use

To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/h-yoshikawa44/ch-404-not-found.git
or
git clone git@github.com:h-yoshikawa44/ch-404-not-found.git

# Install dependencies
npm install

# Run the Vite
npm run dev

learned/improved

• A new way to prevent the footer from rising to the top when the amount of content is low.
• BEM Naming Conventions
• When deploying to github pages, it is necessary to change the src path of img from / to ./.

Acknowledgements

• 一番詳しい CSS 設計規則 BEM のマニュアル
• Twitter - @ixkaito - コンテンツが少ないときでもフッターを画面下部に表示させるいくつかの方法
• stack overflow - Image error 404 on GitHub Pages

Contact

• Website：h-yoshikawa44.com
• GitHub：@h-yoshikawa44
• Twitter：@yoshi44_lion