All solutions

I loved making this one, hope you like it too!!!

I tried to add some animations, mixing colors and such... I would love feedbacks and critics, even the bad ones XD, i would also appreciate every tip about my vue code, am i following the best pratices?

Anyways, see ya in the next challenge <3

Oh, how i missed you guys <3

So, i started to learn vue this week and nothing would help more than building a real app sooooo here i'm!!

It was a little difficult because i hadnt done something like this for a while, but vue and its systems made it easy!

• i used pinia for storing user inputs and repopulating the components with them.
• made a custom directive to handle the stepper logic
• used vue <Component :is="component" > for mutating the steps component

What i'll be trying to implement:

• I tried to use <Transition name=""> tag to animate the transitions between steps change, but it was very buggy, it bet its something about the element getting its position absoluted and then its width shrinking making a mess...
• i would love to add more steps...

That was it! Hope you liked and please, please, please, i'm still learning so i would LOVE critics, opinions, tips and tricks envolving vue. See ya <3

I'm back! I missed this community, getting back on rails with this wonderful project, i loved making it, vanilla css and html just fits. <3

As aways, i'm open for any suggestion and critics, have a nice day :)

Hiii, FEM community!!!

This one was a lot of fun to build, i had some difficulties but with youtube's and google's help i could overcome them hehe. I would love to hear advices and critics, specially towards my react code!!

Much love, until next time <3

Hi guys! This project was amazing!

I will later refactor the code a little bit, but i'm very satisfied!

Hope you like it! Click in the title to change the color theme! <3

HIIIIIIII!!!

I won't lie, this took more time than i expected but ended up being one of my favorites projects so far! It was great!!

I wanted to learn more about sass so i shove my head in mixings and variables and oooh boy how awesome they are! Sass really is the typescript for vanilla css, incredible. I tried to organized and setup a DRY environment.

One of the biggest problems for me was getting the semantics tags right, i still think i get it wrong somewhere! Please let me know!

Help, i falled in love with react and styled componentes and i can't go back now haha

Building this project was great!! One feature i may add later on is the ability to submit your own expenses and see it on screen, in a form or a modal. A added some animations to make everything seems fluid and nice!

Hope you all liked it as much as me, i'm open for all kind of feedback. Love u <3

ps: there is a easter egg somewhere in there hihi.

At first i wanted to build it around some kind of backend, that would supply those information's about the notifications area, like name, type of message and such, in a json format but it was easier to build a dummy object and use it instead. I didn't gave up, some day in future i'll try to refactor.

I added themes too, hope you like the color pallet it was the hardest part of the project haha i'm not good with colors. And i moved the notification dot in the corner of the element, it was nicer in my view.

Anyway, i'm aways looking for feedback, love u <3

Hihiii, this project was great! Loved building it!

The main difficult that i had was positioning things, i ended up using position absolute way more times than i expected, particularly in that "floaty" header, is there a better way to do that effect?

I would LOVE getting some feedback, love u <3

I missed so much you guys <3 but i'm back, trying to get on the rails again.

Soooo this project was quite a journey i'd say, i'd learned a lot about custom libraries. Managing state with react still is an issue for me so i would appreciate any advice or recommendations about it!

I'm planning to implement a couple more things, right now i'm using GNews API to get news about the country but they have a request quota and the hosted images are often undefined, do you guys know about an api for this kind of thing?

Anyway, hope you liked it, sorry for the bad English and much love <3

This was a pretty straightforward challenge, i loved it!

One thing that was a struggle for me was getting the images to be responsive, i handled this setting a max width and height to the parent and a min height to the children, is there a better alternative?

Thanks! See ya!

Hi there! I made another challenge!

The only thing that was a issue for me was setting up the semantic html, what would make sense and what wouldn't, could you guys guide me?

I'm trying to do all newbies projects in vanilla html/css/js from now on, it's a wonderful experience! I tried to use somethings that i learned recently, like animations done with pure javascript, little hacks with custom proprieties in css, etc... so i've made some changes to the original design, hope you like it!

Hii, i done one more project!

This one was a nice refresh from all those frameworks i've been with, and a great opportunity to learn how to write better css as my previous ones was a mess haha

Anyway, Hope you liked it <3 and as aways, please roast me >:D I love to receive some critics, anything and everything you think is horrible or wrong, please let me know!

Ow god, i'm in love with react <3 It is so nice to change themes this easy, i can't wait do deep dive and learn more stuff! I took advice from a nice member in my previous project and tried to manage my dark color palette a lot more, did i do it right this time? One thing that still hard to me is manage my code, what should be in a different file and what shouldn't, what can be optimized, etc.. etc...

I loved this one! I was learning about react's libraries for styling and decided to built with one of them: Styled components!

I tried to differ a little from the original project, i settled the ground for some additional things - like an section with different nfts and so on -.

One thing that was a struggle for me was deciding what tag to use, is there any good practice for building product cards like this one? I used article, h2, figure (figure, figcaption and img) and p, did i done it right?

I might have done some mistakes, so i would love some feedback.

Hiii people.

Oh boooy, this was fun! I learned a lot of thing. I've made a couple of mistakes and spent some time stuck in certain things - like animation and forms lol - but i'll try to address them asap.

I know that react has a lot of libraries to handle forms and stuff, but i wanted to try my best with pure react, i used different approaches, like using objects to structure the inputs and high order components.

I'm not sure that my take on validating forms is correct and safe, i used require attr and patterns to make sure that my inputs were correct and then used onSubmit to validate it all in one take

//input example that will be mapped into jsx
inputs = {
    name: {
      name: "name",
      value: data.name,
      type: "text",
      id: "name",
      placeholder: "e.g. Jane Appleseed",
      required: true,
      pattern: "^[ a-zA-Z ]*$", //anything else will mark this input as invalid
    },

const handleSubmit = (e) => {
    e.preventDefault();
    //in my tests, the event obj will only have an type submit if its inputs were all valid
    if (e.type === "submit") setIsGoingToContinue(true);
    if (isGoingToContinue) setIsGoingToContinue(false); //just a hack to return to form screen
  };

//form
<form className="forms" onSubmit={(e) => handleSubmit(e)}>

I would love feedback and critic's <3

Hi hiii!! I really wanted to start to use react here! So i did this little one here, isn't it cute? Lmao. This API has an interval of 2 seconds between its recalls, so i tried my best to make it visible! Hope you like.

Please, if you have any critic or recommendation, plz comment, i'm loooving this communit's feedback

I'll try to make some changes in the future like:

• Changing the background when it's locked.
• Random citation easter eggs;
• More moving pieces lmao.

Oooh boy, i really liked to make this one. Making a responsive navbar has been on my list forever, but i couldn't get a nice Incentive to make it, but now? It's done!

I run into several difficulties along the way, a couple of them were:

• How to properly structure the HTML tags? Should i use lists and lists item for navbar links? Should i put buttons inside lists or make them different components?
• Making the main content with flexbox was a challenge, i spend a couple of minutes trying to fit the hero image but it would aways overflow and take all it's original resolution. The only way i could address this issue was to wrap the picture tag with an parent div, set is max-size to whatever size i wanted and then setting the imgs size to 100%. I don't know if there is a better way to handle big images...
• Issues regarding transitions and animations. I tried to animate a couple of components like the dropdown menu, but, as this is a new thing to me, it didn't worked well lol.

I would love to receive as much feedback as possible <3 Thank you!!!

It might be my last vanilla html-css-js project as i'm loving to make things with react, scss and styled components.

Hi guys, my second project done!! I'm loving this platform and all these opportunities to show my work and studies. I feel that my scss code is too robust for a project this simple, is there a simple and optimised way to make this design work? If anyone could review my code i would be very pleased, thank you!!