De-News 🚀

Live Site: fartist.xyz

De-News is a modern, single-page news portal focused on Web3, blockchain, and the world of decentralization. This project was built to fulfill the requirements of the Frontend Development with JavaScript course.

####🤔 So, What's a "Fartist"?

You might’ve noticed the domain is fartist.xyz, while the project itself is called De-News. What’s up with that?

It all began with a new kind of mixed feeling—let’s call it the Fartist Syndrome. Think of it as imposter syndrome 2.0: that strange mix of awe and doubt you get when powerful tools make you feel like a creative genius, even while you’re still figuring things out.

"Fartist" (a playful twist on fake artist—with a double meaning, of course 😏) is a reminder to lean into that feeling. It’s about experimenting, breaking boundaries, and finding joy in the messy, unexpected process of creating.

In a decentralized world that’s constantly shifting, being a Fartist means embracing that surge of creativity—pushing boundaries, having fun with the process, and letting every experiment spark a breath of fresh innovation. 😄

✨ Features

• Fully Responsive: A mobile-first layout ensures a great experience on any device.
• Dark/Light Theme: A theme toggle with localStorage to remember the user's preference.
• Interactive UI: Smooth CSS animations, a slide-in mobile menu, and a functional sign-in modal.
• Accessibility Ready: Designed with ARIA attributes and keyboard navigation in mind.

🛠️ Technology Stack

• HTML5: Semantic and well-structured markup.
• CSS3: Styled with Flexbox, CSS Grid, and custom properties for theming.
• Vanilla JavaScript: All interactivity is powered by simple, framework-free JavaScript.

🎓 Course Project Details

✅ Assessment Criteria Checklist

Navigation & Layout

• Responsive navigation bar
• Card/article grid system
• Combined usage of CSS Grid and Flexbox
• Responsive header with hero image/video (3D)

Interactive Elements

• A form including at least 3 different input types:
  • Text input
  • Password
  • Radio button set
  • Checkbox set
  • Select/dropdown
  • Submit button
• Form configuration: POST method to https://httpbin.org/anything
• Responsive hamburger menu:
  • Visible on mobile devices
  • Interactive functionality via DOM manipulation

Deployment

• Successful deployment on Netlify: Fartist.xyz

Stretch Goals (VG – Pass with Distinction)

• Box shadow on cards (Polaroid effect)
• Cards aligned to the centre of the page
• Input focus effect (:focus with glow/border change)
• Form validation added
• Hamburger icon changes when expanded/collapsed
• CSS animations (slide-in effect on menu)
• JavaScript toggle for dark mode/light mode

💻 How Criteria Are Met

• Responsive Navigation: Built with Flexbox to adapt the layout between desktop and mobile.
• Grid System: CSS Grid structures the main article layout, with Flexbox for content alignment within cards.
• Form: Includes all required input types and posts to httpbin.org for testing.
• Hamburger Menu: Appears on mobile and uses JavaScript to toggle its state, complete with animations and icon changes.
• JavaScript Functionality: All interactivity is handled by javascript.js. The code is written in a simple procedural style to manage the theme, menu, and modal, using localStorage to persist the theme choice.