Prantik

@prantiknoor

All comments

Oussama Elhousni• 190
@oussamaelhousni
Submitted almost 2 years ago
intro-section-with-dropdown-navigation-main using css flexbox and js
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Oussama Elhousni, Nice work. How did you accomplish the layout of .container > .left is interesting.

There are some improvements you can do:

The links on the dropdown are not clickable. Because that is behind others. By adding a bigger z-index, that works fine.

By clicking other than the side nav bar, the nav bar should be closed. You can use the .overlay. You can add an event listener to that to close the nav bar.

Instead of switching images by making the display none. There is a better alternative. You can use picture. I believe you can do quick research on that.

Marked as helpful
0
Johnny• 470
@johnnysedh3lllo
Submitted almost 2 years ago
#what-i-found-difficult

i found making the site fully responsive on all viewports and orientations a bit difficult to do.

i found it hard to efficiently use css units and values

i also found it hard to interchange the between desktop image and the mobile image properly.

#area-of-uncertainty

the scalability of my code

proper code formatting

#questions-on-best-practices

how can i write better semantic Html?

how can i utilize css properties properly especially in regards to the interchanging of the images?

what are the best practices in case of accessibility here?

Responsive Product Preview Web Component Using HTML & CSS Flexbox
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
I have another suggestion. Instead of adding border-radius on both elements, you can add it directly to .product-preview. So then, you don't need to worry about it on mobile/desktop.

.product-preview { border-radius: 10px; overflow: hidden; } .product-image { /* border-radius: 10px 0 0 10px; */ } .product-main { /* border-radius: 0 10px 10px 0; */ }
Marked as helpful
1
Johnny• 470
@johnnysedh3lllo
Submitted almost 2 years ago
#what-i-found-difficult

i found making the site fully responsive on all viewports and orientations a bit difficult to do.

i found it hard to efficiently use css units and values

i also found it hard to interchange the between desktop image and the mobile image properly.

#area-of-uncertainty

the scalability of my code

proper code formatting

#questions-on-best-practices

how can i write better semantic Html?

how can i utilize css properties properly especially in regards to the interchanging of the images?

what are the best practices in case of accessibility here?

Responsive Product Preview Web Component Using HTML & CSS Flexbox
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Johnny, Congratulations!! 🎉 you have completed your first challenge.

Your style of asking questions is very well & appreciated.

I have some feedback.

.product-preview { /* You should give the card width. So you can get more control over your layout. */ max-width: 40rem; } .product-main { /* So you don't need to give width here. */ /* width: 40vh; */ /* This code will make the main content 50% of the card width. Now the image width will be 50% too. */ flex: 1 0 50%; } .product-image { /* You shouldn't hard code this. */ /* height: 57vh; */ object-fit: cover; height: 100%; }
1
Petri Saari• 120
@Peteksi95
Submitted almost 2 years ago
This is my first project where i used media queries, any feedback what could be done better and more efficiently is very much welcome
Product Preview Card
2
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Petri Saari, Congratulations on completing this challenge.🎉

But you can do some improvement.

The main-content size should be smaller.

Though by lowering the max-width of main-content, the image won't be small. To lower the size of image, you need to add width: 100% on img.

After that, the .text-content will fill more space. to solve this you could add flex: 1 0 50% on .text-content;

Marked as helpful
0
Sanja• 40
@sdrenjan
Submitted almost 2 years ago
Alignment and spacing inside each card were most difficult to figure out. Is there a better way to do it? Also seems to me like I overcomplicated everything.
3 column with grid and flex
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Sanja, Your solution is good and straightforward. Only, you overcomplicated to round the cards. You can easily round the border by only putting the border-radius on the .grid class & adding overflow: hidden;. As your code will be more simple.

.grid { display: grid; grid-template-columns: repeat(3, 300px); grid-auto-rows: 500px; border-radius: 10px; overflow: hidden; }
Marked as helpful
1
erwin• 60
@lanszesz
Submitted almost 2 years ago
I really don't know how to name ids and classes
Product preview card with plain CSS, animated button
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Erwin, I want to give you another tip. 💡

After submitting a solution you can look at others' codes & try to understand how they name classes & ids & compare them with your naming. By doing this you will have a good skill in naming classes & ids. 🙂
1

nikhil149• 50

@nikhil149

Submitted almost 2 years ago

Unable to design circle Icons on top container. Can anyone help on that.

ExpenseChart Component

#react#sass/scss#node

Prantik• 660

@prantiknoor

Posted almost 2 years ago

Hey @nikhil149. I want to give you a recommendation.

You used height: `${Math.round((value.amount / totalAmount) * 300)}%`;. But it can exceed 100%. So I recommend you to use height: `${(value.amount / maxAmount * 100)}%`;. It will never exceed 100%.

const amount = data.map((value) => value.amount);
const maxAmount = Math.max(...amount);
// const [totalAmount] = useState(amount.reduce((a, b) => a + b, 0));

          <div
                className={
                  maxAmount === value.amount
                    ? "expenseChart_bottomContainer_chart_bar_max"
                    : "expenseChart_bottomContainer_chart_bar"
                }
                style={{
                  width: "30px",

                  height: `${(value.amount / maxAmount * 100)}%`,

                }}
              ></div>

Marked as helpful

nikhil149• 50
@nikhil149
Submitted almost 2 years ago
Unable to design circle Icons on top container. Can anyone help on that.
ExpenseChart Component
#react#sass/scss#node
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @nikhil149, You do need to design circle Icons. Because it was given in the starter file.
Marked as helpful
0
Martincillo94• 90
@Martincillo94
Submitted almost 2 years ago
¿Que te pareció la solución del proyecto? ¿Como optimizarías mas el código?
Componente de tarjeta de vista previa del producto
#sass/scss
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hola @Martincillo94. ¡Felicidades! 🎉🎉. Has completado tu primer desafío.

Quiero darte algunas recomendaciones.

La tarjeta debe estar centrada. Puedes hacerlo fácilmente usando grid. Como a continuación:

body { background-color: hsl(30deg, 38%, 92%); font-family: "Montserrat", sans-serif; font-size: 0.8rem; color: hsl(228deg, 12%, 48%); min-height: 100vh; display: grid; place-content: center; }

Secondly, you have been given two images for both mobile & desktop. You only used one.

You can use both by using picture.

<picture class="card__firstSection"> <source srcset="./imagenes/image-product-desktop.jpg" media="(min-width: 600px)" > <img src="./imagenes/image-product-mobile.jpg" alt="imgMobile"> </picture>

En este código, la imagen cambiará de móvil a escritorio cuando el ancho mínimo de la pantalla sea de 600 px o más.
Marked as helpful
0
rorozoa• 330
@rorozoamuhammad
Submitted almost 2 years ago
please comment if you have any input
responsive using flex, grid and @media query
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @rorozoamuhammad. I have a recommendation to use object-fit: cover in img. So the image will be looked better.

main header img { width: 100%; height: 100%; object-fit: cover; }

Secondly, You should research about picture tag. It would be better if you used it in this project. 🙂
Marked as helpful
0
Justin Vera• 270
@justinnvera
Submitted almost 2 years ago
How can I improve my CSS positioning?
Product Preview Component | CSS Flexbox
2
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @justinnvera. Congrats 🎉. You have completed the challenge.

I have a little recommendation to center the card.

body { display: flex; justify-content: center; align-items: center; background-color: hsl(30, 38%, 92%); margin: 0; padding: 0; border: 0; /* Add this line & the card will be on center. */ min-height: 100vh; }
2

Francisco Montoya• 60

@Fran505

Submitted almost 2 years ago

A better way to make these 3 columns with fewer issues?

A begginer/easy solution using HTML and CSS, with @media

Prantik• 660

@prantiknoor

Posted almost 2 years ago

Hey @Fran505. You can change your code as below to solve many issues.

.cards {
    /* position: relative;
    top: 18rem; */
    
    display: flex;
    /* You need to change flex-direction row to column in mobile */
    flex-direction: row;
	
    /* You do not need to add this, it automatically be set */
    /* width: 849px; */
    
    margin-left: auto;
    margin-right: auto;

    /* You do not need to add border-radius to other columns */
    /* You can remove border-radius from other columns */
    border-radius: 10px;
    overflow: hidden;
}

.col {
    /* position: absolute; */
    width: 283px;
    padding: 2.5rem;
}

To center the card:

main {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

alexeira• 60
@alexeira
Submitted almost 2 years ago
The most difficult part of the challenge was to create the overlay for the image at the beginning, the only drawback is that if you hover the mouse over the view icon the color disappears. Other than that I am happy with the result as I tried not to search on youtube and just go by the documentation.

How did you do it with the overlay?
NFT Preview Card
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @alexeira. How you overlaid the icon is awesome.😊 Very simple & awesome solution.

But your card sizing can be improved. You can see on the design file, that the card size for mobile & desktop is quite the same.

Instead of using % and many media queries, you can set a fixed width as max-width: 18rem. If you want, you can change the width for desktop or tablet.
2
Victor Ebegbuna• 170
@victorebegbuna
Submitted almost 2 years ago
Good day, i had some few challenges with this project, which i was still not able to resolve as at when submitting this project.

I found it difficult aligning the Bigger texts with out it shifting to the extreme left on like the original document.

I also found it quite difficult in adding a cross line on the original price of the item. How best can i resolve this two issues, Thanks

Perfume
2
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @victorebegbuna. Congratulations! 🎉🎉 You have completed your first challenge though some improvements need.

First, you should center the card. You can easily center that:

body { min-height: 100vh; display: grid; place-content: center; }

Secondly, your card corner should be rounded. You can do that as below:

table { border-radius: 1rem; overflow: hidden; }

Question 1.

You can align the text as below:

.frame2 { color: black; text-align: left; padding-left: 16px; }

Question 2.

To add a cross line on the second price:

.price2 { font-size: x-small; font-style: italic; color: slategrey; text-decoration: line-through; }
Marked as helpful
1
Mohamed Metwally• 50
@mmetwally0
Submitted almost 2 years ago
Can Someone give me tips that I could use here?
Product preview card component
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey Mohamed Metwally, Congratulations! 🎉🎉 You have completed you first challenge in Frontend Mentor.

I want to give a recommendation to use picture to switch between images.

<picture class="image"> <source media="(min-width: 850px)" srcset="images/image-product-desktop.jpg"> <img src="images/image-product-mobile.jpg" alt="product image" /> </picture>
Marked as helpful
1
Tabassum Khanum• 110
@tabassum2507
Submitted almost 2 years ago
Any feedback or improvement tips are always welcome and appreciated!
Product preview card component- HTML,CSS
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @tabassum2507. Nice work 🙂.

It looks good on chrome, but in screenshot didn't. If you open the site on Firefox, you wil see as like screenshot.

You can solve this issue by using, flex: 1 0 50%; on image.

section > img { width: 48%; border-radius: 1.5rem 0 0 1.5rem; flex: 1 0 50%; }

After solving this issue, you can generate new screenshot. I think that will look good. 🎉
Marked as helpful
1
Leonard• 1,025
@leoikeh99
Submitted almost 2 years ago
Any and all feedback are welcomed.
Product preview card component (HTML + CSS)
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @leoikeh99. I have a little recommendation.

You used two img (one for mobile & another for desktop). You switched between images using display property.

But there is a better alternative solution. You can use picture. as an example:

<picture class="image"> <source media="(max-width: 630px)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-desktop.jpg" alt="product image" class="desktop" /> </picture>
Marked as helpful
0
Bence Zámbó• 510
@zambobence
Submitted almost 2 years ago
Dear All, I would be grateful for any kind of recommendation and feedback.

I have thought that the column with the greatest value could be formatted in Javascript and be dynamic although could not figure it out how.

Thank you Bence
Expense chart component with Flexbox
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @benceturbulence. You used this to measure the height height: ${data.amount*2.5}px. But if the data will be big, then the chart will also be big.

So you can use a limit. const maxHeight = 200;. And you can find the max amount by this: const maxAmount = Math.max(...column.map((el) => el.amount));

By these two values, you can measure the height of every column. const height = (element.amount / maxAmount) * maxHeight;

getData().then((column) => { // No matter how big the amount, the size of bar will be under maxHeight const maxHeight = 200; const maxAmount = Math.max(...column.map((el) => el.amount)); let htmlArray = column .map((element) => { const height = (element.amount / maxAmount) * maxHeight; return setHtml(element.day, height); }) .join(""); document.getElementById("column_container").innerHTML = htmlArray; }); function setHtml(day, height) { return ` <div class="column"> <span class="col" style ="width: 100%; height: ${height}px"></span> <p class = "days accent">${day}</p> </div> `; }
Marked as helpful
1
Chris Andrews• 170
@ChrisAndrewsDev
Submitted almost 2 years ago
Hey guys!

Had some fun on this one, got to play around with the transform/scaling properties, as well as some pseudo classes.

Are there any opportunities to reduce my code down in this solution?

Any feedback would be much appreciated! ^.^
Vanilla CSS/Minimal Code NFT Card
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @ChrisAndrewsDev 🙂. You nicely solved this problem. Congrats 🎉🎉

You used top: 42%; translateY(-43%); to position the .icon-container above the image. You do not need this. You can easily do that by using top: 0. Because '.icon-container's position is relative to .image-containeras you usedposition: relativein.image-container`;

.image-container { position: relative; } .icon-container { opacity: 0; position: absolute; /* top: 42%; translateY(-43%); */ top: 0; height: 100%; width: 100%; background-color: var(--cyan); border-radius: 10px; transition: all .4s ease; }
Marked as helpful
1
MhmodMD• 230
@MhmodMd1
Submitted almost 2 years ago
I find difficult the mobile version
it's simple
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Congratulations! You have completed your first challenge. 🎉🎉

I have a little recommendation. You can easily switch between images using picture. as an example:

<picture class="image"> <source media="(max-width: 375px)" srcset="images/image-product-mobile.jpg"> <img src="images/image-product-desktop.jpg" alt="" class="desktop-img"> </picture>

& the card corner should be rounded:

.card { border-radius: 10px; overflow: hidden; }
Marked as helpful
0
Leandro Amemiya• 50
@Amemiyaa
Submitted almost 2 years ago
I had a lot of fun doing this project, I had to research to learn how to overlay the image and use the before pseudo-elements to position the icons
NFT Preview Card Component with HTML, CSS
1
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hi @Amemiyaa, You have nicely overlaid the image & the hover effect is also nice too.

But you hard-coded to center the icon-view image.

You can easily center the image using grid.

.hiddenContent { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0; transition: .5s ease; background-color: hsla(178, 100%, 50%, 0.50); margin-top: 1rem; display: grid; place-content: center; } .hiddenContent img { width: 3rem; /* position: relative; top: 6.5rem; */ }
Marked as helpful
1
Ololade• 40
@Ololadealbarika
Submitted almost 2 years ago
Product Review card
2
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey @Ololadealbarika. Congratulations! You completed your first challenge.

I think, your live site url is not right. You used https://ololadealbarika.github.io/perfume-product/challenge.html. Instead of using it you should use this: https://ololadealbarika.github.io/perfume-product/.

Logically, you should not use the first source.

<picture> /* <source media="(min-width:1024px)" srcset="./image/image-product-desktop.jpg"> */ <source media="(max-width:760px)" srcset="./image/image-product-mobile.jpg"> <img src="./image/image-product-desktop.jpg" alt="product"> </picture>
0
Jenny Mikac• 20
@maudlinmandrake
Submitted almost 2 years ago
Anyone know why the generated screenshot is so weird? I checked my site on several different browsers and the screenshot is very different from what appears in the browser.

It also looks like many of the errors being generated are from my inclusion of Font Awesome for the shopping cart image.

Thanks for the help everyone!
Responsive product preview card
3
Prantik• 660
@prantiknoor
Posted almost 2 years ago
Hey, @maudlinmandrake!

I had the same issue. It looked good on my browser but the screenshots was weird.

To solve this issue, you need to do just,

img { /* width: 50%; */ flex: 1 0 50%; object-fit: cover; border-top-left-radius: 20px; border-bottom-left-radius: 20px; }

(Bonus tip: Use Firefox to inspect. if your solution is good in Firefox, the screenshots will also be good.)
Marked as helpful
1
Van Basten Albuquerque• 20
@vanbastenrx
Submitted almost 2 years ago
Why css it's so complicate?
Advice generator with Javascript, html and css only.
#fetch
2
Prantik• 660
@prantiknoor
Posted almost 2 years ago
If you don't know swim, you will scare of it. If you know it, it will be interesting. It also goes for CSS.

you should call the getAdivisorTip() when the page load.

window.onload = getAdivisorTip();

You do not need to set the height. It will be automatically set.

.advice { background-color: #293c6d; /* height: 300px; */ width: 500px; display: flex; flex-direction: column; align-items: center; border-radius: 10px; font-weight: bold; text-align: center; }

then, translate the button on Y-axis to position the button as intended.

.btn { transform: translateY(50%); }
Marked as helpful
0

Prantik

All comments

intro-section-with-dropdown-navigation-main using css flexbox and js

Responsive Product Preview Web Component Using HTML & CSS Flexbox

Responsive Product Preview Web Component Using HTML & CSS Flexbox

Product Preview Card

3 column with grid and flex

Product preview card with plain CSS, animated button

ExpenseChart Component

ExpenseChart Component

Componente de tarjeta de vista previa del producto

responsive using flex, grid and @media query

Product Preview Component | CSS Flexbox

A begginer/easy solution using HTML and CSS, with @media

NFT Preview Card

Perfume

Product preview card component

Product preview card component- HTML,CSS

Product preview card component (HTML + CSS)

Expense chart component with Flexbox

Vanilla CSS/Minimal Code NFT Card

it's simple

NFT Preview Card Component with HTML, CSS

Product Review card

Responsive product preview card

Advice generator with Javascript, html and css only.