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
<!DOCTYPE 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)
## 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.
<!-- Final Note: By participating in this challenge, you agree that if your submission is selected as a winner, DEV may use, modify, and host your code as the official landing page for WeCoded. You retain full ownership of your work, and this agreement does not restrict how you use or share it elsewhere. Additionally, you confirm that your submission is your own original work and does not infringe on any third-party rights. -->
<!-- Thanks for participating! -->
`
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!
Top comments (0)