r1cep / dev-challenges-edie-homepage

devChallenges - Responsive Web Developer Edie homepage

Edie homepage

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
• Acknowledgements
• Contact

Overview

Desktop

Mobile

Built With

• HTML: HyperText Markup Language | MDN
• CSS: カスケーディングスタイルシート | MDN
• Node.js: 18.7.0
• Vite | 次世代フロントエンドツール: 3.0.7
• Sass: Syntactically Awesome Style Sheets: 1.54.8

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.

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/r1cep/dev-challenges-edie-homepage.git

# Install dependencies
$ pnpm i

# Run the app
$ pnpm dev

Acknowledgements

☺️

Contact

• GitHub @r1cep

dev-challenges-edie-homepage's Issues

ページ作成

作業内容

• 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

画像をWebPに変換する

作業概要

Lighthouseのスコアが低いので、提供画像をWebPに変換する

画像変換のライブラリは3つを試した

• TinyPNG
• @squoosh/lib, @squoosh/cli
• sharp

TinyPNGはRaycast拡張で簡単に変換できたがWebPオプションがよくわからなかった事と、Nodeでやりたかったので見送り。

@squoosh は 　Node18の環境が原因なのか動作しなかった。

なのでsharpを試す