Software Developers Ethiopia Summit | Capstone Project - Module 1

This is a complete version of my first module capstone project i built and completed on my 5th week at microverse. This is a Software developers conference summit page event that happened in 2022, A Loom video documentation for this project can be found here Link to video documentation

My goal here is to Build a summit site from scratch, with focus on a mobile first design. take a peak at what i'v built Live Demo. 😊

Contents

• Homepage
• About
• Program
• Featured speakers
• Partners
• Mobile menu

Features implemented:

• Integration of style linters for CSS, web linters for html & Lighthouse for page optimization testing
• Responsive mobile view and web view design using css media-queries, flex-box, and grids
• Launched and deployed to github pages (Live Demo)
• Implemented navigation menu on mobile with JavaScript events
• Dynamically load speakers section contents from JS objects
• Dynamically load navigation header from JS, for a single header to be used across all pages.

Built With

• HTML5
• CSS3 (Flex and Media queries)
• Bootstrap styling (A popular CSS Framework for developing responsive and mobile-first websites.)
• Lighthouse (An open-source, automated tool for improving the quality of web pages. It has audits for performance, accessibility, progressive web apps, SEO and more).
• Webhint (A customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors).
• Stylelint (A mighty, modern linter that helps you avoid errors and enforce conventions in your styles).
• ESlint (A mighty, modern linter that helps you avoid errors and enforce conventions in JavaScript codes)

To get a local copy up and running follow these simple example steps.

Prerequisites

The basic requirements for building the executable are:

• A working browser application (Google chrome, Mozilla Fire fox, Microsoft edge ...)
• VSCode or any other equivalent code editor
• Node Package Manager (For installing packages like Lighthous, webhint & stylelint used for checking for debugging bad codes before deployment)

Getting Started

Cloning the project

git clone  https://github.com/Abenezer-Tilahun/Creative-Hub-Conference-page.git <Your-Build-Directory>

Getting packages and debuging with Stylelint

npm install --save-dev [email protected] [email protected] [email protected] [email protected]

For validation detection using Stylelint Run

npx stylelint "**/*.{css,scss}"

from parent source directory

Getting packages and debuging with ESlint

npm install npm install --save-dev [email protected] [email protected] [email protected] [email protected]

For validation detection using Stylelint Run

npx eslint .

from parent source directory

Getting packages and debuging with Webhint

npm init -y
npm install --save-dev [email protected]

For validation detection using Webhint Run

npx hint .

from parent source directory

Authors

👤 Author1

• GitHub: @githubhandle
• Twitter: @twitterhandle
• LinkedIn: LinkedIn

Show your support

Give a ⭐️ if you like this project!

Acknowledgement

I have followed the design given by Cindy Shin in Behance

License

All source code files are licensed under the permissive zlib license (http://opensource.org/licenses/Zlib) unless marked differently in a particular folder/file.