Latest solutions

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

What I am most proud of in making this challenge website are:

1. I understand React better,
2. I know more about how to use props,
3. I know more about using formik and yup to validate the form,
4. I understand better how to use custom variable in TailwindCSS,
5. I have a better understanding of using react-router-dom,
6. I understand more about using sessionStorage,

And what I will do in the next challenge is to find a challenge website that uses API.

What challenges did you encounter, and how did you overcome them?

The challenge I found was that I was confused about how to save the form data so that I could use the form data on other pages.

The way I solved it was to save the form data into sessionStorage.

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

How to activate the state on the left navbar??

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

I spend time learning css so that I can complete the project. I am happy I am able to complete it by implementing what I learnt.

What challenges did you encounter, and how did you overcome them?

initially, I had problem with aligning the image for the desktop version with the text content. I then realised the way way to have it solved is to use it in a grid system. I also had issue with the cart icon, I couldn't align it with the text. I used span, then I used background image to put the icon side by side with the text.

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

nothing for now.

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

idk

What challenges did you encounter, and how did you overcome them?

i have difficulty about put the words in bottom of the div

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

idk

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

I was most proud of building this project as close to the design as possible

What challenges did you encounter, and how did you overcome them?

I forgot some of the CSS techniques but i learnt to google them and find the answer

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

N/A

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

Responsive UI with the different size

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

Making the Carousel effect and the Light box which made me to understand the javascript in Depth and DOM manipulation.

What challenges did you encounter, and how did you overcome them?

There are more challenges while completing the project among them the most challenging one is the light box effect and the Carousel effect but I have overcome by breaking the code into small tasks, Which helped to create and understand the functionality. 2. The Add to cart function which is still am unable to do that am just stuck there.

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

I'm proud of making the web page looks attractive to the eye. This is the first time I do this ^^. And because of this, I loved web styling more.

What challenges did you encounter, and how did you overcome them?

No challenges at all, it was a piece of cake.

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

I think I need help in the .window class sizing. I want some advice to make the page and the .window class get sized efficiently and responsive with different viewports.

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

I am so used to using flex box, but am pretty happy with learning to use grid as well.

What challenges did you encounter, and how did you overcome them?

Getting the cards to be correct height and width.

I created another row instead of using gap...not sure if this is the correct way of doing this.

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

Overall review of my code and any feedback on my solution.

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

I am most proud of how i was able to use the grid layout to complete the project

What challenges did you encounter, and how did you overcome them?

Using grids was a bit challenging at the beginning but with a little practice i was able to understand how they work and implement it on the project.

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

An easier method of making the images responsive.

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

I was able to learn basic Git commands and utilize CSS flexbox tools

What challenges did you encounter, and how did you overcome them?

I had difficulty with centering the element at first, which I resolved by using flexbox

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

Nothing in particular

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

#The project This is a project made with react and tailwind that is quite entertaining. It's a shame that the audio stopped working while I was developing it, but I think it still looks pretty good.

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

The error icons. I asume there most be some easier way to keep their position.

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

Any tips on HTML, CSS or JS best practices are greatly appreciated. The age calculating part of this solution isn't accurate, so I'm submitting this to see other solutions.

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

I am proud of figuring out the functionality without needing to be shown the process via a youtube video or other tutorial. I think I would have been more successful if I spent more time planning before diving into coding. I started with the mobile view, but later had to rewrite code and make a ton of adjustments that I could have avoided if I had spent more time planning the skeleton of the project for all screen sizes.

What challenges did you encounter, and how did you overcome them?

My biggest issue was getting the active view on desktop and mobile to look right at the same time. I'm going to keep working on it and figure out how to get the view to switch if the screen size changes after the button has been clicked, but I haven't figured out how to fix that problem just yet.

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

Right now, if you click the share button and then adjust the browser width from less 730px to greater than 730px or vice versa, the active state doesn't change to the mobile or desktop view along with the rest of the layout. I created a function to track the current browser width, but my attempts to use an if/else statement to update the active state have failed. Any tips or pointers would be greatly appreciated!

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

Learned about

• semantic HTML
• mobile first development approach
• CSS Flexbox.

What challenges did you encounter, and how did you overcome them?

While using Flexbox, some browsers didn't support flex-gap. So, tried to use margins on the element instead. But later figured out that some old versions of those browsers doesn't support that.

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

I am using media queries for responsiveness. Is there a way to do it without media queries?

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

Foco, dedicação e sempre praticando. Usaria mais ferramentas.

What challenges did you encounter, and how did you overcome them?

Encontrei algumas estilizações que não conhecia ainda, acabei procurando de várias maneiras para chegar ao resultado final.

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

Não entendi a parte das box-shadows que o layout contém, acabei não colocando nada relacionado a isso, ou talvez não sejam sombras ao redor do container.

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

How to use DOM to select multiple input boxes and use JavaScript to validate forms.

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

How to remove the default validation in the email input box to use the custom one, and another regex as the current one does not check whether the email address is missing the domain part (such as ".com" or ".net")

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

I feel like I was able to quickly identify the card structure and also how to adjust the layout for the different screen sizes.

What challenges did you encounter, and how did you overcome them?

This was a good challenge to refresh my memory on using SASS in a non-react environment. Though it is the same per say, getting started required a little extra thought.

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

I would appreciate any suggestions on improving the quality of my code.

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

I just finished this project, but I am not sure if I wrote it well. If you share your opinion about the responsive part of my code, I would be appericated.

What challenges did you encounter, and how did you overcome them?

At first I didn't want to give the values as many fixed pixels to be responsive, but when I used height:100vh, this time the text didn't fit on my card. Unfortunately I used a fixed height, more precisely two heights, also for the mobile view.

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

As I mentioned above, I made the responsive design a bit messy to save the day, but I know I need to do it properly. What are your opinions on this?

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

I'm glad that I can finish.

What challenges did you encounter, and how did you overcome them?

I feel a little difficult parts: /* Mobile styles / / Desktop styles */ /*background-image */

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

If anyone can share more information about RWD, I would greatly appreciate it

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

This is nothing special. I'm just getting some reps in on a simple interface

What challenges did you encounter, and how did you overcome them?

No challenges on this one. It's simple

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

I need practice dividing up my code and using better naming conventions

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

feedbacks are welcomed 😀

What challenges did you encounter, and how did you overcome them?

By a little searching

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

Nothing to be proud of. I guess next time I should use some fancy frameworks and tools.

What challenges did you encounter, and how did you overcome them?

Tried to achieve pixel perfect layout, getting sizes from photoshop, but didn't get how to get font parameters like line-height and letter-spacing and ended up with font tab of firefox dev tools and extension PixelGrid that draws grid (with option of grid size of 1x1 px, and multiple grids the same time)

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

How to achieve pixel perfect fonts from .jpg design file?

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

I'm proud of the fact that I slowly am starting to grasp the fundamentals of responsive units and queries, while still not perfect, essentially, the whole page looks okay to great on any display size.

What challenges did you encounter, and how did you overcome them?

I struggled at first with the way things would appear on the phone format, I figured that most of those issues were fixed by starting to build my website by doing the entire HTML page first, my question is the following: Is that a good method? Should I always do the HTML before the CSS even on bigger websites?

Another issue I had, was near the end trying to have all the display sizes to have each element on the correct spot, with the perfect distance between the other elements or the border of their parent element. I fixed some of them by doing try and error but it mainly caused ugly css that probably could have been avoided.

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

I'd like to learn to use the most out of all the responsive units so that I need as little as possible content in my media queries. I'd like to learn when I should use a margin vs a padding vs something else in order to find the perfect position of every element regardless of screen size. I'd also like to learn to optimize my CSS so that I don't have repetitions of code and figure out how to add the least amount of lines to have a design that is perfectly responsive on all display sizes.

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

I am proud of completing the project, and I wouldn't not change anything.

What challenges did you encounter, and how did you overcome them?

I was having trouble placing elements with grid because I was used to flexbox and working in 2d was a different experience but I figured it out. I also hadn't used background image so I was unaware how to use attachment. I looked it up and figured out I was using fixed instead of local.

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

I would welcomed any feedback especially how I used css grid. I was wondering how you would center your grid items to the center of the screen responsively.

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

I am most proud of my use of the API and enabling dark mode. Next time, I would tackle the javascript 1st. Next time I want build it in React and use a styling framework to make the responsiveness easier to manage

What challenges did you encounter, and how did you overcome them?

The styling was very difficult for me. I got some lessons in CSS Grid and how to center elements on a page. The responsive element is also something I'm working on. Making sure it looks good across all screens

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

I would like some advice on my design. I think that I missed the mark on certain parts like the social media box.

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

What challenges did you encounter, and how did you overcome them?

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

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

Foi bastante facil centralizar ambas divs com flexbox e classes css, e também gosto que estou melhorando minha visão para montar um projeto com uma preview dele.

What challenges did you encounter, and how did you overcome them?

Para deixar centralizado a parte da nutrição mas no final consegui, e também eu poderia usar tags semânticas do html como section.

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

no final na parte da nutrição queria saber se havia alguma solução mais fácil.

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

I am proud of going a step further with the responsive design and adding a mid-size screen breakpoint with a third layout of the 4 cards.

I was also proud to accurately dial in the little colored accent lines at the top of each card and get the box-shadow effect very close to the design.

Next time I will try to pace myself better. I got a bit manic with my styles and started getting sloppy with writing my code. This made more work for me later in tidying things up.

What challenges did you encounter, and how did you overcome them?

I had a much harder time getting the colored accent stripe right on the top of each card. I first tried just a top border but it didn't look right. Then I tried creating a separate div inside the card but that didn't achieve the right look either. Finally, I created a linear gradient in the background and I think that did the trick.

I also spent more time that I would have like tweaking details like margins and padding in the desktop layout.

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

In terms of layout and sizing, where is it OK to use absolute units like px and when should I be using em or rem?