CodeNest 🏗️

Welcome to CodeNest – your gateway to mastering the art of software engineering!

This project showcases a sleek landing page designed with a blend of HTML and advanced CSS techniques,

powered by the Sass preprocessor.. 🎨🧵

Project Overview :

CodeNest is a landing page designed to promote software engineering education. The site features a modern and responsive design, offering an immersive experience for prospective students.

Key Technologies :

• HTML : The backbone of the webpage structure.
• CSS : Applied with advanced techniques for styling.
• Sass : Utilized for more efficient and organized CSS management using the 7-1 file architecture.

Known Issues

⚠️JavaScript Functionality :

Some JavaScript features are currently not working as intended, including:

• Navigation links: The links in the navigation menu may not function properly.
• Popup close functionality: Clicking on the background to close the popup is not operational.

These issues are present because I am focusing exclusively on perfecting the CSS and Sass aspects of this project. Future updates will address these JavaScript-related concerns.

Installation

To set up CodeNest on your local machine, follow these steps:

1. Clone the Repository :

git clone https://github.com/amzilox/codenest.git

cd codenest

2. Install Dependencies :

Ensure you have Node.js installed. Then, install the required npm packages:

npm install

3. Run the Development Server :

Use the following command to start the development server and watch for changes:

npm run start

This command will simultaneously:

• Watch Sass files for changes and compile them into CSS.
• Start a local development server.

4. Build the Project:

To compile and build the CSS for production, use:

npm run build:css

This command will:

• Compile Sass into CSS.
• Concatenate and prefix CSS files.
• Compress the final CSS for optimized performance.

Package.json Highlights

Here are some key packages used in this project :

• node-sass : Compiles Sass into CSS.
• autoprefixer : Adds vendor prefixes to CSS rules.
• concat : Concatenates multiple CSS files.
• postcss-cli : CLI tool for PostCSS, used for processing CSS.
• npm-run-all : A CLI tool to run multiple npm-scripts in parallel or sequential.

Credits

A special thanks to Jonas Schmedtmann for his invaluable guidance and resources on using Sass and CSS architecture. 🙏🌟

Features

• 🚀 Intuitive Navigation

• 🌟 Hero Section with Call-to-Action

• 📚 Course Overview

  • 🥇 Beginner's Bootcamp
  • 🥈 Advanced Web Dev
  • 🥉 Full Stack Mastery

• 🏆 Student Success Stories

• 📅 Interactive Booking Form

• 📱 Mobile-Optimized Design

• ✨ Dynamic Popup

• 🎨 Visual Appeal

Disclaimer

⚠️Learning Purposes Only

This project is created solely for educational purposes. It is a demonstration of my skills and knowledge in HTML, CSS, and Sass. While it showcases various web design and development techniques, it is not intended for commercial use. Feel free to explore and learn from the code, but please contact me if you have any questions or require further details.