All solutions

Hola! This is a project out of order / aka, I was meant to go through Newbie level as per community recs to make sure everything is solid before moving on but the Base Apparel challenge is very GRID-y so I wanted a practice project and such my solution for Testimonial Grid was born!

As this was a practice project for Grid, its what my focus and priority was. I do believe I was not as semantic as I could have been with my tags, but I will come back and refactor this later after I finish with the newbie challenge.

In the end, as always please share any feedback or criticism you have so I can improve. I am aware of the less than ideal tags used, but advance on my Grid specifically is what I would absolutely appreciate !!

Hello! This is my challenge solution to the Recipe Page

I added a dark-mode toggle and the colours are just the inverted versions of the original with slight deviations were they weren't working for me. I did try and write the HTML well but if there is any issues please let me know so I can improve.

What I did

• I tried to write the HTML and pick appropriate tags for the job.

• I added a dark mode.

Things I plan to do

• Completely clean up / re-write my CSS its late and I just wrote it, but there is clutter and repetition and less than ideal naming conventions happening. This will be fixed.

• Naming. This also is a result of it being 1am and me being slightly asleep, but, wanting to finish before knocking out! Will be corrected and made more consistent.

All feedback welcome, looked for and appreciated! Be well! ✨

Hello folks! This is my solution to the product preview card!

I wanted to try this in React, so, I did. My main focus was to not mess up the accessibility tree, whether I did that or not, I would genuinely appreciate any direction, and also I know React for something this small is overkill, but, I wanted to do a challenge and I had not used any of the baby React I learned months ago due to being swamped, so, I just went with it.

I made no other changes to the project.

Any advice appreciated

Hello all, this is my solution to this challenge, its a bit of a mess, I was trying to use different things and lots went wrong!

What I used

• HTML
• CSS and
• JavaScript with Typescript

I am currently learning TS so using it is important, it was a massive challenge, I encountered a lot of errors but pushed through and its worked // save one error.

Things I Changed

• the colour! it was orange, that was failing the colour constrast check with the button, so, I changed it all to some blue-ish/purple!

• I also added a small red error message if you tried to submit without selecting a rating.

• I added a return button on the thank you card, however that is causing some issues for me in terms of resetting the card and having it function properly, so I will likely remove this.

Issues I am aware of

After you click submit, for example if you chose a rating of 3, when you return back to the card, it won't hover and display the correct hover colour of purple (since I changed the colours), actually it will happen even if you don't submit, as long as you clicked the hover state wont change the colour anymore - not sure why, likely resetting in JS issue, will work on it tomorrow.

Anywho, thanks and any advice appreciated to help me improve!

Hello I am Kirsten, and this is my solution for the Social Links Profile challenge!

Its been such a while since I did a challenge that this was my pick. I created this with vanilla CSS and HTML. I of course did my best to be semantic, but, I will correct any errors on feedback if you have any.

Made with

• Basic CSS
• HTML

Things I want to do

Personalize it a bit, make the colours different and then add my own name.

Thanks

Hiya -- and Merry Christmas folks -- unless you don't celebrate, in which case, happy Monday. This is my solution to the Blog Preview Card

What I did:-

• I used TailwindCSS in this project to practice, and truth, its kinda nice, I am pretty happy with it.
• I did add some custom CSS as well though, just because its 11pm and I am exhausted.
• Tried to name my classes using the BEM method, not sure if that was successful, practice is needed.

Things I would like to address:-

• Change the way I am currently using the fonts; I was in a pinch.
• Make it better overall.

Any feedback appreciated PS: the README.md is not done yet on my Repo, its late, I will write it all tomorrow morning

Hiya! This is my solution to the FAQs accordion challenge

I did this without any JavaScript and I made a small change to the design, I added a background color of the question text when the answer is revealed.

I personally think the light text is a bit light but I have left it for now and I will change it at a later date.

Any advice appreciated

Hi-hi, this is my solution for the Intro component with signup form 🚀

Here is what I did:

• Used GSAP text animation on the main title.
• Did my best to remember that base responsiveness of HTML—no fixed elements.
• Implemented regex for email validation.
• Added check marks for successful entries (email, last name, first name, password).
• Did my best to use Grid as much as possible.
• I actually also tried to use BEM - not sure if I have done it properly, but, working on using it.

Improvements

• I have a bunch of if/else statements with a whole load of repeated code in them, I would like to refactor and reduce that.
• Change the colour of the pink/red on the 'Terms of service' below in the form container, it does not pass colour contrast minimums.

Any and all advice appreciated 🌟

Hi-yo, this is my solution for the Huddle landing page

I used Grid and Flexbox and I did my best to make it function as it is supposed to. I had issues with the background image for a bit as well as the hover states.

Any advice appreciated

Hiya! This is my solution for the Tip calculator 💰

I went ahead and did this in React - I wanted to both practice some of the React I had learned in the past and knew I couldn't get it to work the way I wanted to with the update-y "behaviour" without it. So, with that, there is a few niggly issues:

• when updating/changing your bill amount after you've already input all your details, the tip per person doesn't change, I dont know why, yet, I am still looking into it, best I can see it seems to not actually update till a second render, which is weird.

• the calculator doesn't have the option of taking decimal numbers, yet.

As always, feedback appreciated

Hi, community 🌟 This is my attempt at the NFT preview card.

Many things need improving, but notably on my list to attend to are:

• Accessibility: It's not accessible at all.
• Hover has an overflow of color in the overlay. Not sure how to fix that; likely solution is to change it to the recommended method GraceSnow on Discord has up. I was a tad confused, so I will return to understand more in a bit.
• Not sure if the size of the card is an issue. I don't know, but I will tinker more.

Feedback appreciated as always

🎃 Results Summary Component with JSON data used 🎃

🤓 Questions

• Is there any best practices with the way I have written / used the JSON data I am breaking?
• I used <div> elements inside the <section> elements, and I did this because I thought, when the checks happen a section needs a heading, right? So, I am not putting on in those sub-sections (The <div> elements~) so, using a section is weird, so, I used a generic containing element. My question is, was this the right choice, or should I have used an article? That didn't make sense to me either, but, advice please. :)

👀 Known Issues

• Currently this is failing the color contrast checks for the grey in the summary panels, I intend to fix that ...soon. 🥲
• I am not happy with the width on the container (I used percentage) - I really don't know why I did, I cant remember, but, I don't like it, I do intend to change that as well.
• Font types (the extension) I haven't converted them yet, I will do that in a hot minute.
• The heading "Your result" on the purple panel, the color is a little hard to read as well, I had previously changed the color and updated the variable but never changed that heading color which is the reason. I will change it.

🫣 Posting despite the above listed issues because I have had this on my to-do list to post for 3 days now.... that is procrastination and I literally want to start the week on a better footing, LOL!!

my solution to the Huddle Landing Page with Feature Blocks

Made this to practice Grid, so I tried to use it all as much as possible

Issues

• I didn't know how to have the svg images in the cards size correctly, so, in the end I just used the svg images in an <img src=''/>. I did try to use viewBox, but, it wasn't working.
• The pink colour was off, so, I changed it.

Any advice appreciated

I did this challenge to learn more, and practice what I had read about CSS Grid

I had some difficulty with the alignment with the grid-items but I think I resolved them, and if there is a better way, any advice is appreciated.

Something I am a bit "iffy" about

• The over scroll that is happening, I dont particularly like it and I suspect its due to height issues that I have created a compounding effect, but, I am not seeing it immediately, I will keep working on seeing where its coming from so I can reduce this, but, if anyone has any ideas or can nudge me in the right direction, I would appreciate that.

• The entire size of the cards, but, I didn't want to use explicit height/width, so, I dont know, what should be done in a case like that.

Tiny change

• The colors where pretty light, so I just changed them ever so slightly, its actually barely noticeable (this is the font color, the grey), but now it does pass the accessibility check.

Again, any advice or changes I should make that are more best practice, would 100% appreciate -- have a good day.

Single Price Component Grid Solution

Following the road-maps on Discord I have completed this challenge and my main focus was accessibility and the responsive aspect of the challenge. I am still learning accessibility and the topic is pretty dense, however, I did as much as I could on my knowledge, namely:

• Layout not breaking or looking too weird when user changes font size on their browser/ and or zooms in. I tested this with Chrome, font-size at Very Large and zoomed in to 200% (as per W3.org links I read) and content shifted to maintain its form.

• Font-size changing with view-port, I used clamp() for this, if there is a better way, please let me know.

• I changed the colours, they were failing colour contrast checks, so I did my best to pick colours that still looked decent and matched. They now pass those checks.

Things I Need to Fix

• There is an alignment issue with the "Why Us" box, the heading is at a different spot compared to the other heading in the "Monthly Subscription" box, and it makes it look off, I will keep working on a solution, I suspect its to do with the way I am aligning items in the boxes with flex-box, will continue to try and fix it. Advice appreciated of course though. <3

Unsure about

• I am very unsure about keyboard accessibility, I went heavy focus on trying to make the fonts size and the containers change, but, the keyboard part, I didn't fully understand it all, and so, I dont think that is implemented, advice there would be appreciated. ^_^ as well as other things in this area too!

Since I am still learning and things may be totally whacky any and all advice is greatly appreciated - thanks, and have a good day.

This is a pair programming project with Aman (asbhogal).

Changes to the design have intentionally been made to adhere to accessibility standards, as the mockups were failing background/foreground contrast ratio checks. A different theme styling was subsequently integrated page-wide whilst maintaining the consistency of the wireframe structure.

Lighthouse Scores: 100 | 100 | 100 | 100

Below is a brief list of the contributions made by both parties as well as planned iterations for future build versions:

Aman:

• The initialisation of the Vite environment and configurations (incl. CSS source mapping)
• Refactoring of JS and SCSS
• Changes to styling and flow incl. navbar structure and layout
• Changes to design system/theme to meet accessibility standards
• Addition of README.md

Kay:

• Integration of markup incl. elements and structure
• Integration of responsive styling of elements
• Integration of JavaScript logic, incl.:
• URL shortener API calls
• clipboardAPI
• localStorage
• Responsive navbar toggling
• Reviewing of build through iterative processes and providing suggestions.

Planned Future Iterations:

• Changes to responsive background images - replace CSS background-image with <picture> elements
• Add explicit height and width to respective images
• Further clean-up of duplicate code
• Removal of comments for cleaner readability

This was my first ever challenge last year; I have done it again. Following a list posted on Discord of the challenges in order to get done, this is number one and my first solution was not good, I didn't know many things and now I have done it again.

Any feedback please, I would greatly appreciate.

Edit: 1st August 2023: I have added the change to the alt attribute as suggested and fixed a few other things, mainly the zoomy-zoom on the page no longer chops the content in half. :)

Hi. I completed this challenge and tried my best to get it looking as close as possible. I have an issue with the stars and the text beside them | they are not vertically aligned and I was not able to figure out how to do it, so, some advice on that would be greatly appreciated friends.

Thanks. And also, any other feedback and tips you have to share I would be very grateful for.

Hi! I did this to practice my html/css, because everything counts. I would appreciate some advice on handling background images, I feel its a pretty hard topic overall.

Any other critics, please, I would gladly welcome them. /

Thank you.

I would appreciate any advice & tips you may have, I dont currently have any questions about this challenge and I did not find it "difficult" -- I did muck up, but Google searches solved those in under 5-min each. So, please, if you have any feedback/advice, gladly appreciate.

I would also like tips on better usage on CSS.

PS: Still learning Responsive web design.

Basic HTML and CSS. I recently learned blend mode so I used that for the image. Any critique appreciated.

Used positioning (absolute etc.) still learning about those though. Mainly picked it to see if I could put what I have been studying via JS into practice and glad to say I have.

As for CSS - I had been told using rem would be better and I did use it for a bit of the project, but it was done over the course of several days, so my method changed and I forgot, will refactor with time.

Any critique and tips appreciated.

Profile Card Solution

Fun one. I remember this was the first one I tried to do when I first joined in May of this year, and I could not do it with what I knew and although right now my code is super messy, the fact that I could make it look even just 70% of the design file is something I am really, really and truly happy about.

In this one I got to play a bit with the position property, as I recently realised I don't know it well at all, I used the border-box property to put boxes around things when I was using it for what I used it for in this solution, its not perfect, its hacky, but it was the only way I could think to make the look work. I will learn more and refactor this file as I learn.

All in all fun; and if anyone has any tips/tricks and advice I would be happy for it. <3 ty for reading and have a good day.

Hello, this is my first challenge on here, and truthfully it took me a bit to complete!

In terms of feedback, I was wondering if anyone would let me know if there are any "no-no"s I committed (was my code written to the standard it should have been) with my HTML (was it not semantic, etc.) - I tried my best to use <divs> in the right spot, I do believe I used both a class and an ID when I believe I could have just used one of them.

Yeah! Apologies for it being super ugly and super messy. :( and thanks in advance to anyone who answers my question, I appreciate it.