https://github.com/code-beaker/manage-landing-page-code-beaker

Manage Landing Page | A Frontend Mentor Challenge
https://github.com/code-beaker/manage-landing-page-code-beaker

frontendmentor-challenge html js scss

Last synced: about 1 month ago
JSON representation

Manage Landing Page | A Frontend Mentor Challenge

• Host: GitHub
• URL: https://github.com/code-beaker/manage-landing-page-code-beaker
• Owner: Code-Beaker
• Created: 2024-06-12T04:11:49.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-08-03T03:03:19.000Z (5 months ago)
• Last Synced: 2024-08-03T04:22:22.587Z (5 months ago)
• Topics: frontendmentor-challenge, html, js, scss
• Language: HTML
• Homepage: https://manage-landing-page-code-beaker.vercel.app
• Size: 1.03 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Manage Landing Page

This is a solution to the **Manage Landing Page** challenge from [Frontend Mentor](https://frontendmentor.io)

## Preview

Get a glance of the project solution.

![Preview of the Project](manage-readme-preview.jpg)

## Tools and Languages

Different tools and languages used to create this project.

### Tools

- Visual Studio Code

- [Vite](https://vitejs.dev)

- Firefox

- Brave

- [Validator - A library to validate forms](https://npmjs.com/package/validator)

- [Bootstrap Icons](https://icons.getbootstrap.com)

- [Splide](https://splidejs.com/)

### Languages

- SCSS

- HTML

- CSS

- JavaScript

## Process

How I started creating this project with the help of Vite.

### Creating Application and installing dependencies

```

npm create vite@latest -- --template vanilla app

```

This will create a new Vite application with some boilerplate code.

```

cd app

npm install

```

Then we need to `cd`(change directory) into the `app` folder and install all the dependencies using `npm install`

### Installing SASS/SCSS dependency

```

npm add sass -D

```

This command will install the SCSS package so that Vite can compile our SCSS to CSS.

```

npm run dev

```

This command will open a dev server on your local machine.

### Using Splide to create the carousel

Creating an interactive and responsive carousel with Splider.

### Linking Splide with cdn

Link Splide with core js and css styles using the CDN

```html

```

We need to create the markup that will work accordingly with Splider.

![splide HTML](image-1.png)

This is the first time I'm creating a carousel and thankfully, this library helped me create it without a hassle.

![Splide usage image](image.png)

## What I learned making this project

I was able to enhance my CSS `grid` and `flex` knowledge and create some complex layouts included in this design.

Also, learned to make buttons that look and feel good to the eyes with a balanced color, spacing and size.

## Links

- Live site URL: [Netlify](https://manage-landing-code-beaker.netlify.app/)

- Repository URL: [Code-Beaker/manage-landing-page](https://github.com/Code-Beaker/manage-landing-page-code-beaker)