All solutions

Does the illustration of thank you page load fast enough?

Are there any codes that need improvement?

Any feedback would be great!

I've completed the third JS validation challenge from Frontend Mentor. The background images for desktop were a bit tricky and I have a question:

• I encountered a bug in which header tag disappears when ::before pseudo-element is applied to body tag... so I used ::before on main tag and the bug goes away. Is there any reason behind this bug?

Any feedback would be appreciated.

Had to take a break from learning RegEx for a while... because it was very stressful XD. Here's my take on the challenge, any feedback would be great!

I've added another page displaying "Thank you for subscribing!" upon submitting the form. Any feedback would be appreciated!

I enjoyed coding this challenge, it was quite fun.

Remarks:

• using mix-blend-mode: multiplay; on child element to apply overlaying linear-gradient from parent element and display: block; to take up entire space in order for linear-gradient to work
• removing nav menu upon clicking nav links
• making desktop hero background image responsive using min-height: auto on parent element and padding: 7rem 0 on child element

Any feedback would be great!

Any feedback would be great!

Everything works great but in smaller screens, the side navbar is still overflowing even though I added overflow-x: hidden to the body tag... (swipe left on the screen to see overflowing side navbar)

My trials:

• adding a wrapper with overflow-x: hidden around the main tag

Any feedback would be appreciated!

Any feedback would be appreciated, thanks.

This newbie wasn't as easy as it seems xD especially when it comes to positioning multiple images on different screens but I had fun doing this challenge!

The screenshot is still showing missing card background even after I updated it so I suggest you preview the site!

Things I look forward to:

• mobile first approach as it makes the codes more neat and tidy and faster when adjusting media queries

Any feedback would be great! I'm open to both improvements to the output and shorter codes as much as possible.

This is my first JavaScript challenge from FrontEnd Mentor...

My questions on this challenge:

• how do I apply linear-gradient to a svg image?
• fontawesome webkit is having issues with HTML validations so is there any way to fix it?

I've finally finished this Intermediate challenge... really tested my CSS skills:

• making shapes like chevrons and dots using ::before and ::after pseudo elements
• making background images using clamp()
• moving right chat messages to right using display: flex;, flex-direction: column; and align-items: flex-end;

I was stuck on moving right chat messages to right because I thought justify-content: flex-end; would work... :)

I noticed there're HTML issues with FontAwesome webkit, does anyone know how to fix this?

In this challenge, I learned how to:

• remove gap between image and border using background-color
• position background images using background-position: top left, bottom right;

Things I learned from this challenge:

• picture and source html tags
• applying mix-blend-mode: multiply; css property on a CHILD element inside PARENT element with a background propery background-color

Question:

• How do I get rid of the small amount of background color overflowing at the bottom of the card image?

Things I learned from feedbacks:

• display: block takes all the place that is possible

This challenge wasn't very easy, however I learned how to make double image overlay!

Things I learned:

• two ways to code double image overlay

1. using :hover::after pseudo-elements
2. adding additional containers (html line 24 for context)

• adding a specific property on transition e.g. transition: background-color 0.3s;
• inset CSS property is a shorthand that corresponds to the top, right, bottom, and/or left properties. It has the same multi-value syntax of the margin shorthand. e.g. inset: 0; -> top,right,bot,left = 0;

I tried to write the codes as clean as possible on this challenge and this is my first time using @mixins and @include!

Things I learned:

• background-position: top left, bottom right;

Any feedback would be much appreciated!

Huddle-landing-page-with-curved-sections This was an amazing challenge to work on, I learned lots of new things!

Things I learned:

• adding background curve images using background-position: top/bottom;
• the two values in background-size: 100% 100%; stand for width and height, using just width 100% is amazing for responsiveness
• invalid email error message pop-up using :not(:focus):not(:placeholder-shown):invalid

References I took while taking on this challenge:

• Vanza Setia's solution

here's his repository link

• https://github.com/vanzasetia/huddle-landing-page-with-curved-section

My questions:

• I used FontAwesome webkit to display icons but why are there HTML issues from the script source of FontAwesome? Is there any way to fix this?
• I added a label tag for accessibility but it still says form input needs label... any feedback would be very appreciated!

Any feedback about the responsiveness would be great!

I enjoyed coding this challenge, I tried to be as clean as possible!

Woooo, this challenge was very stressful but I learned new things!

Things I learned from this challenge:

• skew
• whitespace
• progress bar

Any suggestions would be great!

Just started using multiple scss files, its awesome! This challenge was fun and was worth the time for it. Any feedbacks would be nice!

I tried my best on this challenge but I feel like I could've shorten some lines of codes so a feedback on my solution would be much appreciated!

I've got a question. How do I invert the logo image color to white?