https://github.com/rioba-ian/javascript30-navbar-ondeck-website

Navbar for Ondeck website challenge by codewell using sass, js, html and css
https://github.com/rioba-ian/javascript30-navbar-ondeck-website

css js navbar sass-framework

Last synced: 11 days ago
JSON representation

Navbar for Ondeck website challenge by codewell using sass, js, html and css

• Host: GitHub
• URL: https://github.com/rioba-ian/javascript30-navbar-ondeck-website
• Owner: Rioba-Ian
• Created: 2022-09-20T18:32:24.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-09-22T18:38:12.000Z (over 2 years ago)
• Last Synced: 2023-03-10T16:57:02.065Z (almost 2 years ago)
• Topics: css, js, navbar, sass-framework
• Language: SCSS
• Homepage: https://rioba-ian.github.io/Javascript30-Navbar-Ondeck-Website/
• Size: 1.79 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Welcome to Codewell! 👋

Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 

Free or paid, all templates are high quality and will make great portfolio pieces.

This is my solution to the codewell Javascript30 challenge.

## Table of contents

- [Welcome to Codewell! 👋](#welcome-to-codewell-)

  - [Table of contents](#table-of-contents)

  - [Overview](#overview)

    - [The challenge](#the-challenge)

    - [Links](#links)

    - [Built with](#built-with)

    - [My approach](#my-approach)

      - [Future development](#future-development)

    - [Wes Bos's Javascript30](#wes-boss-javascript30)

## Overview

### The challenge

The challenge is make a responsive navbar similar to this: 

![](./Design/Landing%20Page%20—%20Mobile.png)

![](./Design/Screen%20Shot%202022-09-15%20at%2013.36.53.png)

My solution to the challenge in mobile, tablet and desktop (1440px)

![](./imgs/Screen%20Shot%202022-09-22%20at%2021.08.16.png)

![](./imgs/Screen%20Shot%202022-09-22%20at%2021.09.52.png)

![](./imgs/Screen%20Shot%202022-09-22%20at%2021.08.47.png)

### Links

- Solution URL: [here](https://rioba-ian.github.io/Javascript30-Navbar-Ondeck-Website/)

### Built with

- Semantic HTML5 markup

- SASS for CSS

- Flexbox

- CSS Grid

### My approach

The first thing was to design my sass reusable components and a sass file structure.

After that I would nest styles inside each other. I did the body and then the navbar then finished with the main section. The main and navbar are their own sass css components. 

#### Future development 

I would like to do more of sass and use more functionilities including mixins, functions and some other crazy stuff. Being the first time using sass, it was quite an uphill to learn how to leverage the power of sass. 

### Wes Bos's Javascript30

This challenge is best coupled with Day 22 of Wes Bos's [Javascript30](https://javascript30.com) course.