All solutions

Hello!

This is the 5th project in FEM challenge. With this one, I used React and Typescript to build the structure and Sass for styling. Still new to Typescript and venturing on how to improve it. While making this project, I have several questions in mind...

• How to add hover color state in the icons?
• How do pseudo works on Jeremy's background?
• How to use svg?

Would appreciate any thoughts and open discussions regarding this challenge. Cheers!

Making this project, I started with the desktop workflow and eventually added media queries for smaller screen view. Built with React which compose of five components with individual style files and added screenshots. In the process, I struggled on some aspect that needs attention:

• Overlay of icons in hover state
• Smooth media queries on every break points
• The full width of the background image

Overall, I'm learning ways to be more comfortable with React and continue learning new ways to implement efficiently.

Today I finally finished the third project. In this project I made it simple by using Sass, semantic HTML and CSS. To begin with, I structure first the HTML into three parts such as header, main and footer. In the main part, it is divided into three sections consisting three separate contents. I used Sass to style the UI interface and used the given images as backgrounds instead of assigning it inside the HTML. I came across some issues regarding on the usage of the images which are:

• Making layers on individual images.
• A smooth media query breakpoints.
• The proper usage of Pseudo-classes (if this is applicable)

My solution was to used masked images so I don't have to fixed the positions in every breaks points on media queries.

Any feedback are welcome and Have a good one! Cheers y'all!

As the second project, I challenge myself to put a bit of effort in making this one. I used React and made progress in making the components. This is the first project I made with react with no step by step guide. I learned from the previous projects that I made about making individual components and applied it on the main file structure. I used plain CSS for styling and semantic HTML for the structures of every component. I divided the parts in 4 sections, so that it would be easier to debug. It is a tiny project and making this one enhances my skills on creating Apps with React.

Any feedback would be appreciated. Have a nice one! Cheers!

Hi! This is my first submission of FEM challenge. The design is close enough to the original. However, I find it difficult to make the third input show the error state whenever the user puts the value of 0.

    <div class="input-wrapper">
              <input class="input-text" type="text" name="people" id="people" placeholder="1">
              <img src="./images/icon-person.svg" alt="person-icon">
    </div>

Any feedback would be appreciated. Thanks!