Qabalany - De-News #50

qabalany · 2025-09-16T11:00:18Z

De-News – Decode the Future of Decentralization

https://denews.fartist.live

denewswened.netlify.app

news portal focused on Web3, blockchain, and decentralized technology.

De-News – Decode the Future of Decentralization

This pull request includes the first version of the project, built with HTML and CSS only.

included:

Project folder structure
Semantic HTML layout with header, main, and footer
CSS styling for layout and design
Responsive design for different screen sizes
Basic accessibility (alt text, headings, contrast)
JavaScript features will be added in later versions.

daniellauding

Great stuff! Not bad :) Just some recommendations for future work

daniellauding · 2025-09-16T18:43:14Z

README.md

+  CSS Grid structures the main layout; Flexbox aligns content within each card.  
+
+- **Hero Header**  
+  A full-width hero section with a background image scales responsively across all viewports (320px–1600px).  


Nice with the globe, and that i could spin. But it was a bit strange that my desktop cursor dissapeared on desktop :)

Yes, that was one of the options. I didn’t realize it might feel a bit off, but I’ll keep it in mind when optimizing the 3D models next time.

daniellauding · 2025-09-16T18:44:44Z

README.md

+  - [x] Checkbox set
+  - [x] Select/dropdown
+  - [x] Submit button  
+- [x] Form configuration: POST method to `https://httpbin.org/anything`  


When i tried the form it didnt work for me, i landed on https://httpbin.org/anything

tried it again and it’s working. The link in the README doesn’t trigger it , you’ll need to fill out the form and click the “Send Message” button on the webpage

daniellauding · 2025-09-16T18:47:15Z

index.html

+
+

Recommended formatting:

remove lines Leon - Business Site #70-71

Why? Because i think they dont need to be there, easier to scan and read :D

daniellauding · 2025-09-16T18:47:58Z

index.html

+                        src="/images/ethereum2staking.jpg"
+                        alt="Ethereum 2.0 Staking"/>


Also would use tab indent for those two lines

daniellauding · 2025-09-16T18:48:15Z

index.html

+                            href="https://cryptopotato.com/ethereum-hitting-new-records-47-36-million-eth-stake-in-the-eth2-beacon-deposit-contract/?utm_source=chatgpt.com" 
+                            target="_blank" 
+                            rel="noopener noreferrer">
+                        read more


Also would tab indent here :D

daniellauding · 2025-09-16T18:53:36Z

index.html

+                            <input 
+                                type="checkbox" 
+                                name="topics" 
+                                value="ethereum" 
+                                class="checkbox-input">
+                                Ethereum


Feels a bit off the formatting/indenting

It looks correctly indented in VS Code on my side maybe GitHub’s viewer is displaying it differently.

daniellauding · 2025-09-16T18:54:13Z

style.css

+        /* Modern CSS reset to normalize default browser styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        /* Remove default list styling */
+        ul, ol {
+            list-style: none;
+        }
+
+        /* Remove default link styling */
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        /* Improve image handling */
+        img {
+            max-width: 100%;
+            height: auto;
+            display: block;
+        }


Great with some resetting! :)

daniellauding · 2025-09-16T18:54:32Z

style.css

+        /* ===========================================
+           CSS CUSTOM PROPERTIES (VARIABLES)
+           =========================================== */
+
+        :root {
+
+            --bg-primary: #0d1117;      /* Main dark background */
+            --bg-secondary: #161b22;    /* Secondary darker background */
+            --bg-card: #21262d;         /* Card background color */
+            --neon-green: #2ea043;      /* Primary neon accent */
+            --neon-blue: #58a6ff;       /* Secondary neon accent */
+            --text-primary: #ffffff;    /* Main text color */
+            --text-secondary: #8b949e;  /* Secondary text color */
+            --text-muted: #6e7681;      /* Muted text color */
+
+            /* Typography */
+            --font-tech: 'Orbitron', monospace;      /* Futuristic font for headers */
+            --font-body: 'Montserrat', sans-serif;   /* Clean font for body text */
+
+            /* Spacing system */
+            --spacing-xs: 0.5rem;
+            --spacing-sm: 1rem;
+            --spacing-md: 1.5rem;
+            --spacing-lg: 2rem;
+            --spacing-xl: 3rem;
+
+            /* Border radius for consistent rounded corners */
+            --border-radius: 8px;
+            --border-radius-lg: 12px;
+
+            /* Transition timing for smooth animations */
+            --transition: all 0.3s ease;
+        }


Variables is good! A nice way to structure design tokens

daniellauding · 2025-09-16T18:56:16Z

style.css

+/* ======================
+   Styles for the contact form
+   ====================== */
+.contact-section {
+    padding: var(--spacing-lg) 0; 
+}
+
+.contact-form {
+    max-width: 600px; 
+    margin: 0 auto; 
+}
+
+.form-group {
+    margin-bottom: var(--spacing-sm); 
+}
+
+.form-label {
+    display: block; 
+    margin-bottom: var(--spacing-xs); 
+    color: var(--text-primary); 
+}
+
+.form-input,
+.form-textarea {
+    width: 100%; 
+    padding: var(--spacing-xs); 
+    border: 1px solid rgba(255, 255, 255, 0.1); 
+    border-radius: var(--border-radius); 
+    background-color: var(--bg-card); 
+    color: var(--text-primary); 
+    font-family: inherit; 
+}
+
+/* Focus states for form elements */
+.form-input:focus,
+.form-textarea:focus {
+    outline: none; 
+    border-color: rgb(144, 236, 23);
+    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2); /* Glow effect on focus */
+}
+
+.form-textarea {
+    min-height: 150px;
+    resize: vertical; 
+}
+
+.radio-group,
+.checkbox-group {
+    margin-bottom: var(--spacing-xs); 
+}
+
+.radio-label,
+.checkbox-label {
+    display: flex; 
+    align-items: center;
+    margin-bottom: var(--spacing-xs); 
+    cursor: pointer;    
+}
+
+.radio-input,
+.checkbox-input {
+    margin-right: var(--spacing-xs); 
+    accent-color: var(--neon-green); 
+}
+
+.submit-btn {
+    background-color: var(--neon-blue); 
+    color:var(--bg-primary); 
+    border: none; 
+    padding: var(--spacing-xs) var(--spacing-md); 
+    border-radius: var(--border-radius); 
+    font-weight: bold;
+    cursor: pointer; 
+    transition: all 0.4s ease; 
+}
+
+.submit-btn:hover {
+    background-color: var(--neon-green);
+    color: var(--text-primary);
+    background-color: var(--neon-green);
+}


Formatting a bit off from rest of css in the file, i would indent it more so it aligns with rest of the document

daniellauding · 2025-09-16T18:57:16Z

README.md

+- [x] Form configuration: POST method to `https://httpbin.org/anything`  
+- [x] Responsive hamburger menu:
+  - [x] Visible on mobile devices  
+  - [ ] Interactive functionality via DOM manipulation  


Not sure you had the time – but didnt see any Javascript file to open / close a hamburger menu, i can see you now used pure CSS for it :)

The box isn’t checked 🙂, I noted that further down.

qabalany · 2025-09-18T05:43:29Z

@daniellauding Wow, thanks for the incredibly detailed review! I really appreciate you going through everything so carefully, from the big stuff down to all the indentation. Those "Same" comments are gold for cleaning it all up.

Thanks again for all your help!

- Restored stable codebase to clean working state - Enhanced CSS: Fixed formatting, improved browser compatibility - Enhanced HTML: Added SEO optimization and accessibility features - Enhanced JavaScript: Modular architecture with error handling - Overall: Code cleanup, better maintainability, and improved UX

…tem, mobile nav improvements

HIPPIEKICK

Hi Mohammad!
I was sure that I posted feedback to you a few weeks back, but now I see it's not there. So here goes ✨

This is quite advanced JavaScript for where we were in the course when you submitted this. You’ve explored some concepts we hadn’t fully covered yet, such as the this keyword, conditionals, objects, and try/catch blocks. Great that you want to explore new concepts!

With that said, it's important that you understand what’s going on in your code, especially if you’ve used AI. Do you feel confident explaining how each part works? If not, I recommend going through it step by step to make sure you fully grasp it.

Also - the code works well, but could it be made a bit easier to read or simplified in some places? Sometimes a bit of refactoring can help make complex code feel more approachable 😊

I'm approving this project, so my comments here are more of something to think about. I think you did a great job! Can you just make sure your Netlify link works so I can do a G/VG check on some visuals 😊

qabalany · 2025-10-09T18:49:14Z

Hi Matilda!

Thank you for the feedback! 😄 You’re absolutely right, the original solution you saw was more advanced than what we had covered at that point. I was eager to explore new concepts like this, objects, and try/catch, and spent my weekend diving in. I realized I had taken on more than I could handle at the time 😅.

To make it fully understandable for myself, I simplified the code. I remember removing the try/catch statements during that process, which actually hinted that something was off with my previous code push. Earlier, I had restored an older push version of the project, creating a conflict that required a force push for subsequent updates. I didn’t realize this at first and only noticed the README update, so my final JS never made it to the remote. I’ve now force-pushed the simplified version.

I really appreciate your guidance and suggestions about readability and refactoring, and I’ll keep them in mind as I continue practicing. My Netlify link has also been updated now.

Thank you again for your support! 🙏

HIPPIEKICK · 2025-10-16T08:24:24Z

Thank you for sharing your reflection and process ⭐

Hi Matilda!

Thank you for the feedback! 😄 You’re absolutely right, the original solution you saw was more advanced than what we had covered at that point. I was eager to explore new concepts like this, objects, and try/catch, and spent my weekend diving in. I realized I had taken on more than I could handle at the time 😅.

To make it fully understandable for myself, I simplified the code. I remember removing the try/catch statements during that process, which actually hinted that something was off with my previous code push. Earlier, I had restored an older push version of the project, creating a conflict that required a force push for subsequent updates. I didn’t realize this at first and only noticed the README update, so my final JS never made it to the remote. I’ve now force-pushed the simplified version.

I really appreciate your guidance and suggestions about readability and refactoring, and I’ll keep them in mind as I continue practicing. My Netlify link has also been updated now.

Thank you again for your support! 🙏

initial release with static version (no JavaScript features yet)

2bc16ba

daniellauding approved these changes Sep 16, 2025

View reviewed changes

qabalany added 2 commits September 19, 2025 00:31

De-News 2.0, new Fartist.xyz domain, accessibility & JS improvements

7a7f60b

qabalany force-pushed the main branch from c89da03 to 9800d6b Compare September 19, 2025 18:19

qabalany added 2 commits September 20, 2025 04:55

Final pre-submission updates: SVG icons, matrix animations, theme sys…

fd7a4a1

…tem, mobile nav improvements

Refine README and finalize project files

8f33bde

HIPPIEKICK approved these changes Oct 9, 2025

View reviewed changes

Update simplified JavaScript, HTML, and CSS files

fefcabb

qabalany force-pushed the main branch from 1e9d953 to fefcabb Compare October 9, 2025 18:11

		src="/images/ethereum2staking.jpg"
		alt="Ethereum 2.0 Staking"/>

Qabalany - De-News #50

Are you sure you want to change the base?

Qabalany - De-News #50

Uh oh!

Conversation

qabalany commented Sep 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

De-News – Decode the Future of Decentralization

This pull request includes the first version of the project, built with HTML and CSS only.

Uh oh!

daniellauding left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

qabalany Sep 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

qabalany commented Sep 18, 2025

Uh oh!

HIPPIEKICK left a comment

Choose a reason for hiding this comment

Uh oh!

qabalany commented Oct 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

HIPPIEKICK commented Oct 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

qabalany commented Sep 16, 2025 •

edited

Loading

qabalany Sep 18, 2025 •

edited

Loading

qabalany commented Oct 9, 2025 •

edited

Loading