All solutions

What are you most proud of, and what would you do differently next time?

Yo, what's up my coding superstars! 🔥 I'm stoked to share the deets on my latest React project tackling that job listing site challenge. Talk about a glow up for my frontend skills! 💪

Ensuring accessibility across devices was a top priority, and let me tell ya, it wasn't a walk in the park. But with some savvy moves, we crushed it like coding rockstars! 🤘

First up, responsive design was the name of the game. We leveraged those slick Material UI components and CSS media queries to serve up a layout that adapts like a chameleon to any screen size. Desktops, tablets, mobiles - you name it, we nailed it! 📺💻📱

But accessibility isn't just about looking good, it's about making sure everyone can enjoy the experience, right? 🌈 That's why we went the extra mile with keyboard navigation, proper focus management, and aria roles to keep things inclusive for our assistive tech fam.

Speaking of inclusivity, alt text for images was a no-brainer. Because let's be real, screen readers deserve to bask in the glory of our pixel-perfect designs too! 📷🔊

Now, let's talk code organization because that's where the real magic happens. 🧙‍♀️ We broke things down into reusable components, scoped styles for each one, and kept our file structure on point. Goodbye spaghetti code, hello maintainable masterpiece! 🍝👋

But you know what they say, there's always room for improvement! 🏔️ I ran into a hiccup with the app router when deploying to GitHub Pages. Couldn't get the page to display, and refreshing brought on that dreaded "no website assigned" error. 😩

I had to ditch the conditional rendering in the route handler and add the displayed jobs differently to the App component. Not gonna lie, it was a bit of a head-scratcher. 🤔

So if any of you React wizards out there have tips on how to tackle this routing issue more elegantly, I'm all ears! 👂 Hit me up with your wisdom, fam. Together we can conquer these challenges and build websites that are accessible, organized, and just plain awesome! 🚀

Let's keep pushing boundaries, breaking barriers, and making the web a better place for all users. Who's with me? 🙌👏✨

What specific areas of your project would you like help with?

when I tried deploying this bad boy to GitHub Pages, things got a little wonky with the React Router setup. I had implemented conditional rendering in the route handler to display different components based on the URL path. But alas, once deployed, the pages wouldn't load correctly, and refreshing would hit me with that dreaded "no website assigned" error. 😩

I had to ditch the conditional rendering and add the job listing and posting components directly to the App component as a workaround. But let's be real, that's not a sustainable solution, fam. It's like putting a band-aid on a broken leg. 🩹

I need to figure out how to properly configure React Router for deployment on GitHub Pages (or any static hosting service, really). Is there some special server-side rendering magic I'm missing? Maybe I need to tweak the routing configuration or add some fancy redirect rules? 🧐

I'm all ears for any tips, tricks, or tried-and-true methods you React routing masters have up your sleeves. Hit me with your best shot! I'm determined to get this routing situation squared away once and for all. 💪

Routing is a crucial part of any web app, and I want to make sure I'm doing it right. No more workarounds or half-baked solutions – I'm aiming for a clean, robust implementation that plays nicely with static hosting services like GitHub Pages.

So, please, my coding compadres, share your wisdom! Let's tackle this routing conundrum head-on and make sure this project is truly deployment-ready. With your guidance, I'm confident we can slay this beast and emerge victorious! 🐉🗡️

What are you most proud of, and what would you do differently next time?

Hey my stellar coding friends! 👋 I just finished up a sweet IP tracker app in React 🔍 and I'm pumped on how it turned out. But I know there's room to improve accessibility! But making the web usable for all just feels right. 🙌 The web is for everyone, you know??

My component architecture and CSS organization is getting better all the time too. Breaking things into reusable React components keeps code DRY. And scoping CSS by component avoids conflicts. I'm proud of how far my skills have come! 😊

So hit me up with any tips for improving accessibility and writing solid React code, my brilliant coding cohorts! Let's keep building awesome inclusive sites. Wishing you all happy coding days ahead! ✨🥳

OMG you guys, I just finished another solo React project building this gorgeous Easybank landing page and can I get a high five?! 🖐️ Got those slick animations going, components breaking things into reusable bits - I'm basically a pro-React developer now! 😎

But let's get real - accessibility was kinda my weak point if I'm honest. 🤓 I was nerding out hard about toggle interactions and hover states when I should've been asking: but what about screen reader users?!

So I've gotta work on my inclusivity game for sho! Here's some ways I can have MORE fun (!) while making sites that work for errbody:

🔤 Semantic HTML is my BFF (but like cooler than my actual BFF maybe?)

🎨 Ooh baby those color contrasts are SPICY and accessible!!🌶️

📽 Alt text for images - now screen readers can enjoy my glorious creations too!

There's always more to learn when it comes to web access I know, but I'm so jazzed to keep improving. Because the web is for EVERYONE, am I right or am I right?? 🙌

My code organization is getting bonafide lit too - scoping CSS by component ftw! Less clashes than high school, woohoo! 💃 Sure I can tweak some things to share styles globally but I've come a long way from one messy CSS file, phew! 😅

So let me know if you've got tips for me my coding queens and kings! ✨ And high five to more inclusive and kick-butt websites for all users!! 🖐️🖐️ Raised hands AND hand clap emoji for the people in the back!! 🙌👏

I'm really proud of how my todo app turned out! 🥳 Building it from scratch using React was a fun challenge that helped me level up my skills. 💪

I think the overall user experience is smooth - the interactivity feels natural and the responsive design works well on all device sizes. 📱 The light/dark theme toggle is a nice touch too! 🌞🌛

Looking at my code, I'm happy with how I organized the components and maintained separation of concerns. 👌 Splitting the CSS into modular files also kept things tidy. 🧹

I found managing state for the filters a bit tedious, so exploring hooks like useReducer could help simplify that code. 🤓 And I'm intrigued by TypeScript - static typing seems like a helpful addition for catching bugs as the app grows. 🐞

All in all, this challenged me to sharpen my React skills and taught me a ton about best practices. 🧠 I'm feeling motivated to keep learning and build more ambitious projects. ✨ The key is staying curious, taking feedback constructively, and not being afraid to make mistakes along the way. 🤝

I'd love any feedback from other devs on where I can improve. 🙋‍♂️ And if anyone has project ideas or wants to collaborate, I'm open to that too! 🤝 Still lots more to learn but feeling energized by the progress I've made so far. Onward! ✨

Hey there! I'm pumped to share more about my approach to the calculator app challenge. 😄 It was such a fun project to flex my HTML, CSS, and JavaScript skills!

For starters, I focused on setting up the markup to match the designs. Getting the structure down with semantic HTML5 elements really helped streamline the styling process later. I made sure to use header, main, footer tags, and ARIA roles for improved accessibility too.

On the CSS side, I relied heavily on Flexbox and Grid for layout from tailwindcss. This made it smooth sailing to get the numpad and display area aligned nicely across device sizes. I definitely learned some new tricks for responsively styling the range slider and toggle switch that I'll be sure to apply in future projects!

JavaScript was the real brain bender! 🧠 I used event listeners on the number buttons to build the display value string, and wrote logic for the math operators, delete button etc. The theme toggling gave me a chance to sharpen my DOM manipulation skills as well.

In terms of optimization, I tried to keep the JavaScript focused and modular. I probably could have split it out even further into logical files. And there's certainly room to improve performance by only updating specific DOM elements rather than full page re-renders. More to learn!

Let me know if you have any other feedback! thanks! 💪

I just wrapped up the space tourism website challenge and am over the moon with how it turned out! 🚀🌙 It was a total blast getting to build a responsive site that allowed users to explore some out of this world destinations, crew members, and technology!

I focused on using plain ol' HTML, CSS and vanilla JS to bring it to life. Some of the fun interactions I built include:

Tabbed navigation to toggle between different options 👽 Smooth scrolling between page sections 🚀 Groovy page load animations with animxyz 🌀 In terms of accessibility though, I know there's room for improvement:

Add more descriptive alt text for images 📷 Structure markup more semantically with tags like <header> 🏛️ Improve color contrast in places ☑️ Do more testing with assistive tech like screen readers 🎧 Overall, I'm super proud of what I built! 💪 But I'm also excited to keep improving, especially on web accessibility best practices. Let me know if you have any other specific feedback based on the code provided!

I recently wrapped up the Frontend Mentor crowdfunding product page challenge and let me tell you, that was a doozy! 😅 I'm pretty stoked with how it turned out overall - I got all the major parts working like pledge selection, progress bar magic, and bookmark toggling. 🎉

But I gotta admit, I struggled a bit getting that backers counter to tick up properly when someone pledged. 😫 In my JavaScript I had the logic to increase the totalBackers number, but just couldn't get the DOM element to display the new count. Rookie mistake! 🤦‍♂️

Accessibility-wise, I know there's room for improvement. I need to rely less on visuals alone, add keyboard navigation, all that jazz. 🎵 I won't pretend to be an accessibility expert just yet, but it's definitely on my learning agenda!

My code organization is getting there I'd say. Baby steps! 👶 At least I had the sense to split my CSS into different files - modularization for the win!

Anyway, this was a super valuable challenge to build a responsive page with fun interactions. I learned a ton and feel way more prepared to level up my skills for the next project. Let me know if you have any other feedback on my code! I'm all ears! 👂👂👂

Hi there😉! I hope you are having a lovely day, just want to share my process for completing this task.

Firstly, I started with the mobile-first approach, optimizing for smaller screens before building up to larger breakpoints. This helps keep things clean and focused. I rely heavily on Flexbox, keeping markup semantic and scaling spacing/sizing with other CSS functions.

Accessibility is baked in from the beginning - making sure color contrast passes standards, content is logically structured, focus states are visible, ARIA roles are added where appropriate, etc. I test frequently with screen readers to ensure it's usable for all.

For interactivity, I leverage HTML data attributes as hooks and vanilla JS for lightweight logic/component toggles. No need for heavy libraries on simple interactions. The code is formatted neatly with Prettier and documented clearly.

I find that thinking in components helps create consistent, reusable chunks that can be tweaked and composed together. Breaking things down into smaller parts helps tame complexity. but still, I know my code could still use a touch of more perfection, so I am open and eager for your feedback, All helpful feedback is welcomed😊

😆 Why was the JavaScript developer sad? Because they didn't Node how to Express themselves!

Hi there! I'm excited to share my process for creating the age calculator UI and logic as well. For starters, I used HTML to structure the content, CSS for styling, and JavaScript to add interactivity and logic.

I organized the CSS and JavaScript using variables, modular components, and comments for readability. However, I struggled a bit with the date calculation logic in JavaScript.

Specifically, I'm having an issue accurately calculating the number of months and days between the input date and the current date. As you can see in the JavaScript, I tried dividing the timestamp difference by milliseconds in a day and year to get the years, then months and days.

However, the day's result seems to be off by a few days from the actual age. I think it's related to how I'm handling the date conversion to account for timezone offsets.

If you have any tips on how I can improve the date difference calculation to get precise month and day values, I'd really appreciate it! I'm always looking to get better at date logic in JS. Overall, this was a fun challenge to build a nice user experience that works across devices. 💻

Hope you enjoyed the joke, too. Coding can be serious work so we have to laugh sometimes! Looking forward to your thoughts.

Knock knock! Who's there? Tailwind CSS. Tailwind CSS who? Tailwind CSS the day I can animate a hamburger menu transition smoothly. 😅

All jokes aside, taking on a front-end mentor challenge like this after completing a more complex one really helps highlight my progress as a developer. 🚀

Technologies Used:

HTML CSS JavaScript Tailwind CSS

Difficulties Encountered:

I struggled to add smooth animations and transitions to the mobile hamburger menu when it was clicked. I tried using CSS transitions and JavaScript to toggle classes but couldn't quite get it working seamlessly. With more time I would have liked to refine the mobile menu interactions. 🤔

Overall I think the end visual result looks great responsively across device sizes. 📱 I focused on responsive design best practices like CSS media queries and relative units. For accessibility, I made sure color contrast passed standards and content was readable when zoomed in. 🌐 My code is formatted cleanly with comments explaining parts like the menu toggle logic. I find Tailwind CSS helpful for rapid development while keeping code organized. 👍

Let me know if you have any other suggestions on how I can improve! I appreciate you taking the time to review my code and help me continue learning. Feedback from more experienced developers is so valuable. Thank you! 🙏

okay... My first time using javascript more than HTML or CSS, this task had lots of interesting aspects. Please let me know how you would have done this differently, as I feel there are easier ways, so I would appreciate your feedback. thanks

It was my pleasure to complete the task, I know there is room for improvement, and I am eager to learn from your comments and review. thanks

Although using CSS alone worked, it was a little buggy. I would appreciate any feedback you may have on it

wow... my first official javascript challenge... I've only learned the basics when I took on this challenge, so it was a little bit challenging, especially getting the value of the buttons, because we all know buttons don't have value! but it all worked out in the end😊

tried CSS grid for the first time... was really terrified but it turned out to be cool

this task was quite easy....too easy

this task was wonderful, the elements animate in as you scroll down.... reach out to me if you are interested on how it's done with html and css 😊

If you are reading this, I appreciate the time you took. So far, this task has gone well, except for the fact that I cannot find a way to remove the horizontal scroll bar even by hiding the background decoration overflow. I would greatly appreciate any advice you could give me...thanks in advance

the task was basically straightforward, although I wasn't on pro, so I had limited resources, I was so excited about starting the project that I completely forgot about the CSS guidelines, but am glad it came out amazing, judging from the little skills I had then