Ms. Strange, also known as Madame Strange ( & etc.).

My WeCoded Landing Page For my WeCoded landing page, I decided to create a visually stunning and captivating design featuring Ms. Strange, also known as Madame Strange. The goal was to showcase the elegance and mystique of the character while providing a seamless user experience. Demo [Check out the demo of my WeCoded landing page here] Alright, let's move forward with the development of the landing page featuring Madame Strange. Below is the complete HTML, CSS, and JavaScript code to create the landing page as described: HTML Structure ```html name=index.html WeCoded Challenge - Madame Strange Welcome to the WeCoded Challenge Madame Strange About the WeCoded Challenge Celebrate in Code: Share your journey and achievements with the WeCoded community. Features Dynamic Content from DEV API Responsive Design Demo © 2025 WeCoded Challenge ### CSS Styling ```css name=styles.css body { font-family: Arial, sans-serif; margin: 0; padding: 0; background: linear-gradient(to right, #4531EA, #9D00E5); color: #fff; } header { text-align: center; padding: 20px; } header img { width: 150px; } main { padding: 20px; } #hero { text-align: center; } #hero img { width: 200px; border-radius: 50%; } section { margin: 20px 0; } footer { text-align: center; padding: 10px; background: #4531EA; } JavaScript for Fetching Data ``javascript name=script.js document.addEventListener('DOMContentLoaded', function() { fetch('https://dev.to/api/articles?tag=wecoded') .then(response => response.json()) .then(data => { const articlesContainer = document.getElementById('articles'); data.forEach(article => { const articleElement = document.createElement('div'); articleElement.classList.add('article'); articleElement.innerHTML = ${article.title} ${article.description} Read More `; articlesContainer.appendChild(articleElement); }); }); }); ### Submission Template ````markdown ## My WeCoded Landing Page For this challenge, I created a landing page featuring Madame Strange. The page showcases the ongoing impact of WeCoded stories by dynamically fetching articles from the DEV API. ## Demo [WeCoded Landing Page Demo](https://your-demo-link.com) ![WeCoded Landing Page Screenshot](screenshot.png) ## How I Built It I designed the landing page using HTML, CSS, and JavaScript. The page utilizes the DEV Articles API to fetch and display articles tagged with "wecoded". I incorporated the WeCoded design assets and colors to create a visually appealing and cohesive experience. Technologies used: - HTML - CSS - JavaScript - Fetch API I'm particularly proud of how the dynamic content integration turned out, making the landing page both informative and engaging. ` You can customize the content, styling, and add any additional features to enhance the landing page further. Good luck with your submission! How I Built It To build this landing page, I followed a structured approach: Design Concept: I started with a design concept that would emphasize the enchanting presence of Madame Strange. I used warm, ambient colors and subtle animations to enhance the visual appeal. Technologies Used: HTML5: For the basic structure of the landing page. CSS3: To style the page and create responsive layouts. JavaScript: For interactive elements and animations. React: To build reusable components and manage the state efficiently. Figma: For creating the initial design and layout. Development Process: Layout Design: Created the layout and visual elements using Figma. Implementation: Developed the landing page using React, ensuring a responsive and user-friendly design. Content Addition: Added the necessary content, including details about the process, technologies used, and demo link. Final Note By participating in this challenge, I agree that if my submission is selected as a winner, DEV may use, modify, and host my code as the official landing page for WeCoded. I retain full ownership of my work, and this agreement does not restrict how I use or share it elsewhere. Additionally, I confirm that my submission is my own original work and does not infringe on any third-party rights. Thanks for letting me participate! MsStrange

Apr 5, 2025 - 02:53

My WeCoded Landing Page

For my WeCoded landing page, I decided to create a visually stunning and captivating design featuring Ms. Strange, also known as Madame Strange. The goal was to showcase the elegance and mystique of the character while providing a seamless user experience.

Demo

[Check out the demo of my WeCoded landing page here]

Alright, let's move forward with the development of the landing page featuring Madame Strange. Below is the complete HTML, CSS, and JavaScript code to create the landing page as described:

HTML Structure

```html name=index.html

WeCoded Challenge - Madame Strange

Welcome to the WeCoded Challenge

Madame Strange

About the WeCoded Challenge

Celebrate in Code: Share your journey and achievements with the WeCoded community.

Features

Dynamic Content from DEV API
Responsive Design

Demo




### CSS Styling


```css name=styles.css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #4531EA, #9D00E5);
  color: #fff;
}

header {
  text-align: center;
  padding: 20px;
}

header img {
  width: 150px;
}

main {
  padding: 20px;
}

#hero {
  text-align: center;
}

#hero img {
  width: 200px;
  border-radius: 50%;
}

section {
  margin: 20px 0;
}

footer {
  text-align: center;
  padding: 10px;
  background: #4531EA;
}

JavaScript for Fetching Data

``javascript name=script.js document.addEventListener('DOMContentLoaded', function() { fetch('https://dev.to/api/articles?tag=wecoded') .then(response => response.json()) .then(data => { const articlesContainer = document.getElementById('articles'); data.forEach(article => { const articleElement = document.createElement('div'); articleElement.classList.add('article'); articleElement.innerHTML =

${article.title}

${article.description}
Read More
`;
articlesContainer.appendChild(articleElement);
});
});
});




### Submission Template



````markdown

## My WeCoded Landing Page

For this challenge, I created a landing page featuring Madame Strange. The page showcases the ongoing impact of WeCoded stories by dynamically fetching articles from the DEV API.

## Demo
[WeCoded Landing Page Demo](https://your-demo-link.com)
![WeCoded Landing Page Screenshot](screenshot.png)

## How I Built It
I designed the landing page using HTML, CSS, and JavaScript. The page utilizes the DEV Articles API to fetch and display articles tagged with "wecoded". I incorporated the WeCoded design assets and colors to create a visually appealing and cohesive experience.

Technologies used:
- HTML
- CSS
- JavaScript
- Fetch API

I'm particularly proud of how the dynamic content integration turned out, making the landing page both informative and engaging.

You can customize the content, styling, and add any additional features to enhance the landing page further. Good luck with your submission!

How I Built It

To build this landing page, I followed a structured approach:

Design Concept: I started with a design concept that would emphasize the enchanting presence of Madame Strange. I used warm, ambient colors and subtle animations to enhance the visual appeal.
Technologies Used:
- HTML5: For the basic structure of the landing page.
- CSS3: To style the page and create responsive layouts.
- JavaScript: For interactive elements and animations.
- React: To build reusable components and manage the state efficiently.
- Figma: For creating the initial design and layout.
Development Process:
- Layout Design: Created the layout and visual elements using Figma.
- Implementation: Developed the landing page using React, ensuring a responsive and user-friendly design.
- Content Addition: Added the necessary content, including details about the process, technologies used, and demo link.

Final Note

By participating in this challenge, I agree that if my submission is selected as a winner, DEV may use, modify, and host my code as the official landing page for WeCoded. I retain full ownership of my work, and this agreement does not restrict how I use or share it elsewhere. Additionally, I confirm that my submission is my own original work and does not infringe on any third-party rights.

Thanks for letting me participate!