Day-17: Fylo data storage component

I've just completed another front-end coding challenge from @frontendmentor!

. . . . . . . . . #100daysofcode #developer #coding #html #selflearning #projects@DevNerd0 #coding #code,#100daysofcode,#developer,

Day-18: Result summary component

I've just completed another front-end coding challenge from @frontendmentor!

. . . . . . . . . #100daysofcode #developer #coding #html #selflearning #project #coding #code #projects@DevNerd0 ,#100daysofcode,#developer,

Day-19: Four card feature section

I've just completed another front-end coding challenge from @frontendmentor!

. . . . . . . . . #100daysofcode #developer #coding #html #selflearning #projects@DevNerd0 #coding #code,#100daysofcode,#developer, #projects@DevNerd0

Day-20: Huddle landing page with single introduction

I've just completed another front-end coding challenge from @frontendmentor!

. . . . . . . . . #100daysofcode #developer #coding #html #selflearning #project #coding #code,#100daysofcode,#developer, #projects@DevNerd0

Day-21: Testimonials grid section.

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #html #selflearning #project #code #projects@DevNerd0

Day-22: Clipboard landing page

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #html #selflearning #project #code #projects@DevNerd0

Day-23: Fylo landing page with two column layout

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #html #selflearning #projects@DevNerd0 #code

Day-24: Huddle landing page with alternating feature blocks master

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #html #selflearning #projects@DevNerd0 #code

Day-25: Fylo dark theme landing page

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #html #selflearning #project #projects@DevNerd0 #code

Day-26: Chat app css illustration.

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #html #selflearning #project #code #projects@DevNerd0

Day-27: sunnyside agency landing page

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode #projects@DevNerd0   #coding #html #selflearning #project #code

Day-28: Login form

I've just completed another coding challenge !
.
#100daysofcode #projects@DevNerd0   #coding #html #selflearning #project #code

Day-29: Gear loading animation

I've just completed another coding challenge !
.
#100daysofcode #projects@DevNerd0   #coding #html #selflearning #project #code

Day-30: Bento grid

I've just completed another front-end coding challenge from @frontendmentor!
.
#100daysofcode  #coding #projects@DevNerd0 #html #selflearning #project #code

Day-31: coming soon master

I've just completed another front-end coding challenge

#projects@DevNerd0

Day-32: article preview component

I've just completed another front-end coding challenge

#100daysofcode #projects@DevNerd0 #100daysofcodechallenge

Day-32: article preview component

I've just completed another front-end coding challenge

#100daysofcode #projects@DevNerd0 #100daysofcodechallenge

#Day_33 FAQ Accordion

Good morning, everybody! 👋

I'm back with another exciting project! 😊

Project name is called: FAQ Accordion

This project is a responsive FAQ accordion designed to enhance user interaction by allowing them to expand and collapse different questions to see corresponding answers.

Technologies Used
#HTML

#CSS  (including Flexbox and media queries)

#JavaScript


1, HTML Structure

The HTML file contains a series of question-and-answer pairs wrapped in div elements with classes for styling and JavaScript functionality.

I've Uses semantic HTML elements like nav for navigation and h1 for the main heading....

2, CSS Styling

Font Import: I've uses Google Fonts to import the "Work Sans" font for this project.

Global Styles: Resets default padding and margin, sets box-sizing, and specifies the font-family to keep consistency across different browsers.

Flexbox: Utilized to center the container and align items.

Background Images: I've uses different images for desktop and mobile views.

Container Styling: Sets dimensions, background color, padding, border-radius, and box-shadow, to make it looking good.

Responsive Design: I've used Media queries to adjust layout and visibility for different screen sizes.

3, JavaScript Functionality

Icons and Answers Toggle: I've used  JavaScript to toggle the visibility of answers and icons when the plus icons are clicked.

Array Methods: Utilized array methods like forEach() to loop through NodeLists, adding event listeners to manage the display of answers and icons.

- Enjoyed every moment coding this! 😎

-Completed 33 out of 100 Challenges so far—keeping up the momentum! 🔥

-👨‍💻 Join me on my coding journey as I tackle advanced challenges and add innovative touches to every project.

-- Feedback is always welcome would love to hear what you think—drop your thoughts, guys !🚀


—let’s grow together! 🌱
#projects@DevNerd0