Edie homepage

Solution for a challenge from Devchallenges.io.

Demo

*The site is now closed, but this assignment was originally posted at https://legacy.devchallenges.io/solutions/EQJ91PQg8nr6B3yfAPf1.
（My assignment submission page at the time: https://legacy.devchallenges.io/challenges/xobQBuf8zWWmiYMIAZe0.）

Table of Contents

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

Overview

Desktop

Mobile

top

menu

Built With

• HTML
• CSS
• JavaScript
• Node.js: 22.13.1
• Vite

Other major libraries

• postcss-preset-env
• material-design-icons
• wicg-inert

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
• User story: I can see a page on mobile following the given design
• User story: I can go to certain locations by selecting links in navigation or footer

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-edie-homepage.git
or
git clone git@github.com:h-yoshikawa44/ch-edie-homepage.git

# Install dependencies
npm install

# Run the Vite
npm run dev

learned/improved

• Better, how to control the button outline during focus except for keyboard operation.
• Shifting techniques using negative margins.
• How to scroll with in-page links.
• How to set up a better fade-in, fade-out animation.

Acknowledgements

• Twitter - @NicMakesStuff - outline-color: transparent
• 画面幅いっぱいに画像をはみ出す方法
• 【jQuery無し】素のJSでページ内リンクをスムーススクロールさせる方法
• 【HTML/CSS】たかがフェードイン/フェードアウトするだけの挙動に全力で取り組んだ結果、最強のCSSができてしまった話【最強】

Contact

• Website: h-yoshikawa44.com
• GitHub: @h-yoshikawa44
• X: @yoshi44_lion