Frontend Mentor | Hassan's profile

@trevisandanielSubmitted over 1 year ago

I dont know how to fix the paragraph to be short like the original image it looks like my width is bigger, how can I fix it?

Basic html and css

2

Hassan•940

@hnasser44Posted over 1 year ago

Hello! To achieve a design closer to the desired layout, you can apply the following styles:

1)For the container, use flexbox to center its contents both horizontally and vertically, and set the margins to auto to keep it centered within its parent container.

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

2)At larger screen sizes, give the container a minimum height of 100vh to ensure it takes up the full viewport height. You can play with the min-width value to find a perfect match

@media screen and (min-width: 768px) {
    .container {
        min-height: 100vh;
    }
}

3)For the sedan, suv, and luxury classes, set the maximum width to 200px to limit their size and keep them uniform.

.sedan, .suv, .luxury {
    max-width: 200px;
}

Hope you find this helpful. Happy coding :)

Marked as helpful

0

Christopher Castaneda•90

@chrisdcastSubmitted over 1 year ago

Initial Thoughts

This challenge definitely took longer than usual. I wanted to practice using React and this was my first project built with Typescript so there was a lot of tooling and learning and reading docs. I probably could have built it in a 10th of the time with vanilla HTML/CSS/JS but I'm glad I took the time to learn it.

Challenges

Using the react-router-dom package was only a little confusing because some of the docs recommended using createBrowserRouter and others recommended wrapping Route components in a parent BrowserRouter component. Getting past that I was able to get things running smoothly.
Using react-hook-form was a little weird. React with all of it's support makes sure you get in the mindset of doing things 'the React way' with controlled inputs on all your text fields, but that's not how this package works by default. It encourages you to use uncontrolled raw html form components and it felt kind of wrong.
Typescript syntax was a little tricky at first, but I'm getting more used to it. I am a little confused why the handbook recommends not explicitly typing everything but I'm sure it's something that's up to personal taste.

Things to Improve

I still need some practice and guidance on how to organize my react project and where to put my various components.
I also need better judgement on when to separate various elements into different components or just build them as one block of html.

Questions

If anyone has any insight on how a react app files are typically structured I'd love to hear it.

Responsive newsletter subscribe form using Typescript, Vite, & React

1

Hassan•940

@hnasser44Posted over 1 year ago

Hello, a typical React project follows a folder structure that helps to keep things organized. A common structure is:

src/
  |- components/
  |- pages/
  |- utils/
  |- assets/
  |- App.js
  |- index.js
  |- index.css

components: This folder contains reusable components that can be used across different pages.

pages: Each page of your application should have its own folder here, containing the components specific to that page.

utils: Utility functions or helper functions can be placed in this folder.

assets: Images, fonts, or other static assets can be stored here.

Component Separation: When deciding whether to separate elements into different components or keep them as one block, consider the reusability and complexity of the component.

Reusability: If an element is used in multiple places or has the potential to be reused, it's better to create a separate component. This follows the DRY (Don't Repeat Yourself) principle, making your code easier to maintain and reducing duplication.

Complexity: If a block of HTML and logic becomes too complex, it's a good idea to break it down into smaller components. Smaller components are easier to understand, test, and manage.

Marked as helpful

1

Miracle656•10

@Miracle656Submitted over 1 year ago

used css property 'padding' to create space within the div.container

1

Hassan•940

@hnasser44Posted over 1 year ago

Hello, good job on completing the challenge! While your solution works, it's worth noting that using position: absolute on the container might not be the most optimal approach. Instead, you can achieve a similar result by adding the following CSS styles to the body tag:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

This will center the container both horizontally and vertically on the page without the need for absolute positioning. Additionally, you can apply the following styles to the .container class for a clean and modern look:

.container {
    width: 300px;
    padding: 1rem;
    background-color: hsl(0,0%,100%);
    border-radius: 20px;
}

Lastly, you can make sure the image inside the container scales properly by using the following style for the .img class:

.img {
    max-width: 100%;
    border-radius: 10px;
}

By following these guidelines, you'll have a more responsive and aesthetically pleasing design. Keep up the great work!

Marked as helpful

1

ifaronti•580

@ifarontiSubmitted over 1 year ago

This is my first time working with an API but it's really simple although it took two hours to realize what promises meant to these machines(They are too loyal to their promises and they expect you do same).

Once I figured I needed to get the object tokens to know the key/value pair so I know what data to request, it was easy. Although I spent some minutes wondering why the advice won't change but it's the way the API is not that I did something wrong.

I believe I had no problems with positioning doing this as everything was centered.

If there's any where I can improve on this, let me know. I'm thinking maybe I should make an advice display on DOM load but I figured my little animation on the button which took me a whole 30min may not be discovered. So, you'll have to press that button to get an advice.

Advice Generator!

1

Hassan•940

@hnasser44Posted over 1 year ago

Hello! The animation on the button is really nice and neat. I would highly recommend exploring flexbox for creating flexible and responsive layouts and understanding how to position elements using absolute and relative positioning. Also, it's generally best to avoid setting explicit heights for elements unless it's absolutely necessary. Keep up the great work!

Marked as helpful

1

Hassan•940

@hnasser44Submitted over 1 year ago

This was hands down the toughest challenge I've ever taken on. I didn't quite achieve perfection but learned a ton from it.

Responsive Multi Step Form

1

Hassan•940

@hnasser44Posted over 1 year ago

One thing to add is that I don't know why the add-ons at step4 are not visible, everything works well locally but on the hosted version they don't show. If someone can help me with it would be greatly helpful. Note: the add-ons appear on the mobile hosted version but not on desktop

0