All solutions

This is the first time I've encountered a different result when applying CSS styles in the developer's tools compared to using a style tag. When I apply margin: 0 auto or align-items: center, the div's width does not match max-width: 28rem. However, when I apply these CSS rules in the developer's tools, it outputs the desired result. I'm not sure why this occurs, but I hope to receive some feedback on why it happens

Hii everyone, I hope that you will all take a look at my code and provide feedback. I am using Vue.js because of its conditional rendering capabilities, but I am unable to use plugins like v-mask inside Vue. As a result, I have implemented the masking using vanilla JavaScript. I would appreciate it if someone could help me use the plugin.

I dont know why i can apply directives to a button for both click and enter. It only works when i click it.

its almost a month that i haven't submit solution to some challenges as I am currently working. Its really hard to put extra time doing this.

so far coding this is not really hard. but since its been a while coding, i am having a little difficulty in css part. I hope i can get some feedback on what's the best practices

I hope i can get some feedback and suggestion on how to properly used the sematic tag

I first started using Bootstrap but the problem is that i don't know how to customize it so I switched back using vanilla CSS. But with tailwind, customization is pretty straight forward.

I appreciate any comments, suggestion and best practices to do tailwind

Will appreciate any feedback and guide

This one is bit challenging to me as I have to consider a lot of condition.

This is the last challenge in a newbie free category. This one is pretty straight forward.

I have wrapped all of my content in a div, but I am unsure about it. Having a header and footer should be the best practice but sometimes it messes up my layout. However, overall I believe I did great in completing this challenge

I found this challenge to be quite easy, possibly because I utilized a Grid layout to design it.

I am having some difficulties with JavaScript and would greatly appreciate any help on how to improve my skills.

This challenge has taught me a lot. It showed me what aspects to take into account and helped me to focus more on vanilla CSS and JavaScript before diving into any frameworks. Overall, I found it to be a rewarding experience.

I'm facing a challenge positioning the sharelinks using CSS. While I have no trouble with JavaScript, I find it difficult to get the positioning just right. Despite the challenge, I'm having fun with it. It's important to note that not all browsers support aspect ratio, so it's crucial to use it cautiously.

This is my 12th challenge.

This is also the first time I've used the rotational attribute to rotate the arrow when it's open and closed. As for the layout, there are no problems. However, overall, I see that my CSS declarations are not well-organized. I think I need to work on organizing my CSS better

This is the 11th challenge.

This one is pretty straightforward. My first thought was to use flexbox, but it turned out that I would encounter some problems with distributing column widths. Therefore, I opted for Grid instead.

To anyone taking on this challenge, I highly recommend using Grid instead of flexbox.

This is the tenth challenge I've done.

For this challenge, I used CSS Grid for the first time, and although it can be confusing at times, I now instinctively know how many divs to create and what should go inside each one. While it's not perfect yet, I hope to improve with practice.

However, I still need to work on writing landmark and aria attributes. I plan to practice writing landmarks in my next challenge.

This is my ninth challenge.

Regarding this one, it's pretty straightforward to complete, but I had difficulty figuring out how to center the avatar between two divs. At first, I tried positioning it explicitly by declaring it as position: absolute. However, this created a problem because declaring it as absolute made the avatar section outside of the HTML flow. After some experimentation, I discovered that all I needed to do was apply a negative margin to it to overlap the two divs. Through this challenge, I learned about using negative values.

This is my 8th challenge.

So far I dont encounter problem with this challenge aside that the image does not take the entire space of a container. But it seems the problem lies with setting the height to auto.

so for this case, I set the

1. height : 100% ( 100% of the parent div)
2. width : 100%
3. object-fit : cover ( i did this to make the image responsive)
4. flex-basis: 50% both from the image section and the bottom-section so that it shares an equal width.

This is my seventh challenge.

So far my I don't run problem with lay-out and positioning but it seems that i have a consistency problem when it comes to font-size. Although i used relative units. I always test different font-size to look the same with the design. Is it a bad practice to always relay on what you see in the design or just go with instinct in setting font-size?

This is my sixth challenge in the newbie category.

As for positioning and lay-out i think I understand it clearly than before. But this are still some part that I find confusing. That is when to use em, rem and px. I always set the margin and padding to be in px but as for the font-size, i set it to be em. provided that the body element is set by 1rem. It will be much appreciated if someone can guide me on when to use this units of measurement.

So far, this is the easy page i've done.

Fifth challenge. I'm starting to understand the layout and positioning. I am hoping i will perfect this before i move with sass or other framework

I think i'm getting hang of it of when to use rem and em but i'm still not there.