Cookies

We use cookies on this website in order to provide optimal services to each visitors. If you agree with the use of cookies, please select 'Accept'. You can check our privacy policy for more details.

Find the best Web Tutorials

Introduction

Summary

Codify is a website built through a group project. It initially aimed at creating a small multi-page website displaying content and show off a compelling and responsive design, layout along with some technical skills we learnt in the class.
As a group, we decided to build a website about tutorials with detailed sections and explanations.

The project began around the end of November and lasted until the beginning of February.

My Goals

In this group of 3 people, I was in charge of 2 pages as well as the following tasks:

  • Page: Light & Dark Theme
  • Page: Hamburger Menu
  • Website: Light &Dark theme
  • Website: Hamburger Menu
  • Website: Responsiveness

Light & Dark Theme | Hamburger Menu

Structure of the page

For each page, it is structured according to the following order and elements:

  1. An article about the topic
  2. A tutorial section

First, I made some reasearch about the light/dark theme and hamburger menu. I read some articles to understand the pros and cons using these design choices that are really popular nowadays. I tried to make it short and easy enough to understand as it is a tutorial.

Tutorial Section

After some explanation on the topic, I had to create a section dedicated to anyone that would like to create its own light/dark theme. The objective here was to explain the different steps that lead me to get this result.

I splited the tutorial section into 3 parts according to the different technologies I used:

  • HTML
  • CSS
  • JavaScript / VueJS

And lastly, I ended this page with a section that allows people to test everything according to the explanations given above.
This section is the result they should obtain after copy-pasting the code given in the sections above.

Check out the website !

Technology used in the project

HTML
CSS
JavaScript
VueJS