/Helpjuice-internship-test

Primary LanguageCSS

Helpjuice Internship Task

Transforming Landing Page to HTML/CSS

ℹ️ What's this project all about?

Convert Figma design into code using HTML and CSS and Tailwind CSS

🎨 Where can I see the design?

You can check out the design here.

📂 How should I organize the project?

📁 Project Structure

  • src: Contains the source code of the project.
    • assets: Holds various assets such as CSS files and images.
      • base: Contains base CSS files used across the project.
        • 🖌️ Button.css: CSS styles for buttons.
        • 🖌️ FreeForEver.css: CSS styles for some global elements or layouts.
      • components: Holds CSS files specific to individual components.
        • 🛠️ CommonQuestions.css: CSS styles for the Common Questions component. Note: I used the BEM CSS methodologies for class names and the following Tailwind CSS code for these classes: 
          /* Example Tailwind CSS Code */
.component-name {
    @apply bg-blue-500 text-white;
}
        • 🛠️ CreateTutorial.css: CSS styles for the Create Tutorial component.
        • 🛠️ Features.css: CSS styles for the Features component.
        • 🛠️ Footer.css: CSS styles for the Footer component.
        • 🛠️ Header.css: CSS styles for the Header component.
        • 🛠️ Navbar.css: CSS styles for the Navbar component.
        • 🛠️ ToTop.css: CSS styles for the ToTop component.
      • imgs: Stores image files used in the project.
    • components: Contains HTML components.
      • 📄 CommonQuestions.html: HTML for the Common Questions section.
      • 📄 CreateTutorial.html: HTML for the Create Tutorial section.
      • 📄 Features.html: HTML for the Features section.
      • 📄 Footer.html: HTML for the Footer section.
      • 📄 Header.html: HTML for the Header section.
      • 📄 Navbar.html: HTML for the Navbar section.
      • 📄 ToTop.html: HTML for the ToTop section.
    • js: Contains JavaScript files used for application logic.
      • 🧩 accordion.js: JavaScript for accordion functionality.
      • 🧩 fetchAndInject.js: JavaScript to fetch HTML components and inject them into index.html.
      • 🧩 toggleSidebar.js: JavaScript for toggling a sidebar, if applicable.
      • 🧩 toggleTheme.js: JavaScript for toggling themes dark / light mode.
      • 🧩 toTopButton.js: JavaScript for the "back to top" button functionality.
  • index.html: The main HTML file of the project where HTML components are injected dynamically using JavaScript.

Note: As a bonus feature, dark mode has been implemented.