All comments

Antonio Riccelli• 80
@Antonio-Riccelli
Submitted 8 days ago
What are you most proud of, and what would you do differently next time?

I'm happy that I used a preprocessor like SASS for the first time in a project. I knew of it but never quite managed to use one for something.

Next time I would plan a bit more the HTML structure ahead of starting.

What challenges did you encounter, and how did you overcome them?

The real challenge was finding the right sizes and values for certain properties and making the whole layout responsive and coherent.

What specific areas of your project would you like help with?

I would like to know if my choice of HTML semantic tags was correct.

I'd like advice as to whether my SASS code can be simplified.

Also, a piece of advice:

I keep getting an error in the HTML report saying

Element "p" not allowed as child of element "hgroup" in this context. (Suppressing further errors from this subtree.)

This doesn't seem to make sense, as the hgroup header exists precisely to wrap these type of tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup

I could be wrong though!
Recipe page - HTML, CSS, SASS
1
py-code314• 290
@py-code314
Posted 7 days ago
I also got the same error and then I found this post from 'stack overflow'. I am still confused to use it or not 😀
1
Sunay Dagar• 70
@suzzy-dszy
Submitted 8 days ago
What are you most proud of, and what would you do differently next time?

First time using SASS/SCSS after learning from an online tutorial. I learnt how to implement the SASS file structure, variables, nesting, functions and mixins.

First time using BEM methodology which turned out to be quite helpful and i quite like it.

First time trying out a mobile first approach which helped me understand the strengths and weaknesses of such a workflow.

Researching online helped me solve a lot of responsiveness issues i was facing, all hail stack overflow 💯. -Further improved my understanding of my base CSS knowledge especially CSS Grid & Flexbox.

In short a lot of first time experiences 🥳.

What challenges did you encounter, and how did you overcome them?

Initially struggled with figuring out the SCSS file structure that would be most suitable, i.e;

What should go in my main.scss, how many scss files do i need and for what purpose, and after some research i was able to find the base layout of what is usually done then went ahead from there.

Nesting was very confusing at first but quickly learnt what i was doing wrong and how i could leverage BEM to target exactly what i wanted.

What specific areas of your project would you like help with?

The preview looks good on small devices up to medium laptop screens but on large screens in my opinion the product card looks too zoomed in. I followed a mobile first approach and i guess that's where the issue is? I'm not sure, but I would've like the product card to look a bit smaller and centered on larger screens so that it looks a bit more aesthetically pleasing to the eyes. So if anyone has any tips on what i could do differently next time please feel free to share. -Also, since this is my first -time using SCSS, any tips/tricks would be much appreciated for example on how to optimize code / file structure, etc.

-Thank you in advance 🙂.
Product Preview Card using Semantic HTML 5, SCSS + CSS Grid & Flexbox
1
py-code314• 290
@py-code314
Posted 8 days ago
Hello, congrats on finishing your project. I've just finished this project and I also used Sass for first time to do it. So, cheers to that 👏🏼

As I went through your code, I thought I could make some suggestions

HTML:

You should use <picture> element to switch the images depending on mobile and desktop views instead of wrapping them in <div>. Please refer to this article on how to do that

For 'Perfume' it's best to use <p> tag as it's better to avoid <h2> before <h1> for accessibility purposes. Also it's recommended to change it to uppercase by using CSS, not in HTML itself

For strikethrough old price, please use either <s> or <del> tag as it is more semantic

Your BEM nomenclature of classes looks good 👍🏼

Finally, I suggest this article by Grace Snow if you want to improve your HTML

CSS:

In your '_config' file you can also add variables for font-size and spacing if you want

Use 'rem' or 'em' for @media instead of px for better responsiveness

You already have border-radius on .product-card, so I don't think you need it on 'mobile image' too

You don't need 'visibility' and 'position' properties for images if you use <picture> element and grid properties

.product-card max-width is not 1000px in desktop view (I think that's why card is bigger than in the design file), it's only 600px (use rem here for better responsiveness) and in mobile view max-width is 343px

I don't think font-size for 'content' is increasing from mobile to desktop. Can you please double check that!

I believe new syntax to import partials is @use

I suggest adding btn: focus and btn: active statuses to your code

To center #main

body { display: flex; justify-content: center; align-items: center; }

Hopefully these suggestions make your project better. Please contact me if you have any further questions. All the best. Happy coding 🎉
Marked as helpful
1
P
Luka• 160
@zmora2622
Submitted 18 days ago
What specific areas of your project would you like help with?

I mainly need help with css class naming and bem methodology and table styling. The designs between figma and screenshot vary a lot in padding, margins and gaps. Therefore, at the end of development, very often the code has to be changed or re-written.
Recipe page SASS GULP BEM
2
py-code314• 290
@py-code314
Posted 16 days ago
Hello,

Congrats on finishing the project 👏🏼.

I really like the code and I think I can help with a few minor things:

I noticed that you changed font-size to 62.5%. You might wanna read this article before you do that

It's better to also add max-width: 100% to <img> in Reset.

It's good to use rem units for max-width in .card instead of px to get better responsiveness

You can use rem units for padding and margin too. I think that makes it more responsive

What about using 'padding' instead of 'height' in .recipe__nutrition-table-cell?

May be there's a better way to organize media queries! Group them together instead of writing at multiple places?

Finally a question for you! You added margin to .grid. How did you come up with those values? I'm asking because I couldn't center the card vertically in the <body>

All the best. Happy coding🎉
Marked as helpful
0
NeonCodes• 20
@NeonCodes
Submitted 27 days ago
What are you most proud of, and what would you do differently next time?

I am proud of the final result for the h1 title. Next time, I need to review some of the basics (line breaks in HTML, Box model in CSS for instance)

What challenges did you encounter, and how did you overcome them?

I spent a significant amount of time wondering: 1- How to move the second half of the text to the bottom: I though I had to use some complex CSS code or something. After first googling it, I used a tag. 2- Later, after looking at the picture of the final result, I realised there was too much space between the two lines in the title. Again, went thinking it was CSS related. I ended googling it again and found the tag--which, for some mysterious reason, I forgot existed--, and that ended up fixing it. I also googled how to make the image's corners round.

What specific areas of your project would you like help with?

I need help with the paragraph in grey: It still doesn't look like the image preview, despite having the font-size indicated in the style-guide.
QR Code Challenge HTML-CSS
3
py-code314• 290
@py-code314
Posted 27 days ago
Hello,

That's a nice job for your first project🎉. Though I noticed a few issues in the code which I think can help you with.

HTML

Put everything in the 'body' in a container and give it a max-width so that you can limit the width of whole content. Your card is too big in comparison to the design file

You won't need <br> in <h1> if you do that. It's unnecessary!

Same goes for <br>s in <p>

Describe about the image in alt attribute

CSS

Why do you have three 'hsl' in h1{color}?

'h1' font-size is too large. You can check the design file for correct size

Paragraph font-size is OK but the color is wrong. Check design file for the color

Use rem instead of px for font-size as it makes the text responsive

There's no need for background-color in img

Use Global Reset at the beginning of code so that you won't have to repeat the properties

Use display: flex in 'body' to place card in the center

Hope these will help you to make your project better. Let me know if you need any further help. All the best!!
Marked as helpful
0
P
AlvaroPrates• 110
@AlvaroPrates
Submitted 29 days ago
What challenges did you encounter, and how did you overcome them?

As this project has specific layout requirements for various devices, I have started learning about rem units and the max-width CSS property to enhance page responsiveness. Additionally, I’ve explored media queries to adjust the profile card’s design for different screen sizes. I think I did a good job on those.
Social Links Profile - HTML and CSS
3
py-code314• 290
@py-code314
Posted 29 days ago
Hello,

Great job. Looks almost identical to the original design file. But I noticed a few issues regarding responsiveness.

Content is overflowing when zoomed in. Change height to min-height in .main-content to prevent that

When I make the screen narrow, around 1030px mark card is increasing in width. You might wanna check why that's happening

You will benefit from adding some kind of CSS Reset on top of the code. Just google it for any modern css reset

Do some research about clamp() function. You can use it effectively to avoid writing multiple media queries

You can use <blockquote> element for .profile-bio if you want. I think it's more semantic

I hope these will help you to get better. Cheers!
Marked as helpful
1
achallett• 160
@achallett
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

Understanding how padding and margin behaves better

What challenges did you encounter, and how did you overcome them?

Had an issue understanding the spacing initially
Social Links Profile
1
py-code314• 290
@py-code314
Posted 29 days ago
Hello,

Nice job on the project. I think it's very close to the design specifications.

I would like to point out a few things if you don't mind.

When the screen size is narrower than 400px, card content is hiding behind the screen edge. I suggest you change width on .card to max-width to make it flexible

There's a thin blue outline around the links when I focus them with TAB. You can remove this with outline: none if you want

I think it's better to use <p> and <blockquote> tags for .card__profile_location and .card__profile_bio as they describe the content more accurately

I also noticed that you used <div>s to wrap social media links. You should put them in <a> tags as they are links when clicked take the user to another page. In addition you can put all links in a <ul> element if you want

No need to use width on body as it may add scrollbar sometimes. Also it's a good practice to use min-height instead of height on body

Hopefully these points will help you to make it better. All the best!
Marked as helpful
1
MorganMartin12• 40
@MorganMartin12
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I am proud of the speed at which I was able to complete this challenge.

What challenges did you encounter, and how did you overcome them?

I was unaware of how to implement hover. I looked it up.

What specific areas of your project would you like help with?

I still want to know how to use SASS better and maybe what elements that are divs should be replaced with more semantic html.
HTML CSS BEM SASS
1
py-code314• 290
@py-code314
Posted about 1 month ago
Hi,

Nice job on the project. Congratulations!!

I think I can make a few suggestions to improve the code.

The card is not responsive enough. If the screen width is below 400px the sides are getting cut off. I think you can fix this by changing .course-card max-width units to rem

I suggest giving .course-card some padding to create the space instead of margins on child elements

When I zoom it to 200%, .attribution content is going inside the card. You can fix it by changing units to 'rem' instead of 'px'

Font-size of text in .course-card__label, __date and __author supposed to be 14px. You might wanna check that

I am not able to access h2 by using keyboard. You can wrap it in <a> tag and add 'focus' pseudo class to make it keyboard accessible

Hope these points would be of help to you. All the best!!
Marked as helpful
1
PECULIAR IHECHUKWU UBAMMADU• 20
@PECUIHE
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I'm proud I could do it myself and I believe I can do better with the future projects.

What challenges did you encounter, and how did you overcome them?

In making the design align at the centre of the body but I was able to use display flex to achieve it.

What specific areas of your project would you like help with?

I would like to know the difference between the em, rem and px sizes, and where and when best to use any in projects.
QR-code-component-main-Frontend-Mentor-Challenges/HTML
2
py-code314• 290
@py-code314
Posted about 1 month ago
Hello,

I like your code, clean and concise! Only thing I suggest you put your code in a separate file. These videos might help you to know more about rem and em -

where to use rem and em

difference between rem and em

All the best!!
Marked as helpful
1
anwar-elbarry• 110
@anwar-elbarry
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I am proud of my focus on details and finding solotions ,even if it takes me 4 hours or more . Nex time , I will focus on code aesthetics , Organization ,And writing more comments.

What specific areas of your project would you like help with?

i want to make it more responsive
resposnive blog-preview-card with flex-box
1
py-code314• 290
@py-code314
Posted about 1 month ago
Hello,

Nice job on the project. I think it is responsive enough, although I wanna make some suggestions.

When I zoom-in, the top part of the card is going out of view. May be you can use min-height instead of height on body to prevent that

h2:hover is working but h2:focus isn't working. I suggest you wrap h2 in <a> tag to access it with keyboard

You shouldn't apply height to any container with text as it leads to overflow problem when you add more text

Do not use px units for font-size as users can't increase font size in their browser. Use rem or em depending on the context

There's an abrupt jump in size when the screen size reaches more than 390px. You might wanna make it a smooth transition

To make it more responsive I suggest apply max-width to card only. Then everything in the card will adjust itself when you decrease screen width. You don't even need media query if you use clamp() to reduce font size

All the best. Happy coding :)
Marked as helpful
0
Mateus Lima• 210
@mts-ml
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

Still need more practice to be proud/have doubts.

What challenges did you encounter, and how did you overcome them?

Despite this being a simple project, i still had no idea how to begin, i actually looked at the blank page for some time before the idea came to me.

What specific areas of your project would you like help with?

I actually want to know if it's common to use rem instead os px, i usually set up the css like: :root { font-size: 62.5%; } So, instead of 10px i use .1rem. I saw a guy explaining that it's better for the user. Is it really?

Note: English is not my native language.
QR code page using CSS Flex.
1
py-code314• 290
@py-code314
Posted about 1 month ago
Hi,

Your project looks good! But the title text looks a little smaller than the specifications to me.

You can read this article about why you always want to use rem for font-size. Also this one for why you don't want to set font-size: 62.5% on body element

Hope these articles will help you make a decision. All the best!!
Marked as helpful
0
Beatriz Ponces• 60
@BeatrizPoncesIP
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

A parte de HTML é relativamente simples, mas o verdadeiro desafio está no CSS. Determinar com precisão a altura e a largura dos elementos pode ser complicado. Na próxima vez, vou experimentar usar grid para facilitar.

What challenges did you encounter, and how did you overcome them?

O maior desafio foi determinar a altura dos objetos, e para isso, utilizei o projeto Figma disponível no desafio.

What specific areas of your project would you like help with?

Enfrentei dificuldades com uma área específica do projeto no Figma. Há uma seção que aborda o espaçamento, mas oferece três opções, embora o projeto só necessite de uma. Essas opções seriam para tamanhos de tela diferentes? Não consegui perceber variações no espaçamento entre os modelos desktop e mobile apresentados.
Página Frontend Mentor QR Code
1
py-code314• 290
@py-code314
Posted about 1 month ago
Hi,

Nice job on your first project. Congrats!

I can suggest a few changes about your project I think will help you.

Do not use px for font-size because it can cause accessibility issues. Use rem instead. If user wants to increase font-size in browser settings because of poor vision it fails to achieve the objective if you use pixel units. Please read this article to have a better idea

About those 3 spaces in Figma file:

40px - Bottom padding for your `main` 24px - Space between `img` and `h1` 16px - Top, Right and Left padding for `main`

I hope that clears up your confusion about the spaces

All the best!!
Marked as helpful
1
Isioma Pamela Talabi• 30
@isioma-talabi
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time?

I am very proud of how I was able to study the Figma file to replicate the design and my ability to take the coding process one step at a time.

What challenges did you encounter, and how did you overcome them?

In my initial attempt, I was not able to get the card to centralise as I kept playing around with different positions- absolute and relative. Then I deleted all the codes, took a deep breath and started afresh. This time, I used the display:flex property and thoroughly studied the Figma file to develop the current solution I now have.
QR Code Component
1
py-code314• 290
@py-code314
Posted about 1 month ago
Hi,

Good job on your first project! Everything looks fine except the card is horizontally in the center but not vertically. I suggest you use height and align-items properties on body to place the card in the center of page.

All the best!
Marked as helpful
0

py-code314

All comments

Recipe page - HTML, CSS, SASS

Product Preview Card using Semantic HTML 5, SCSS + CSS Grid & Flexbox

Recipe page SASS GULP BEM

QR Code Challenge HTML-CSS

Social Links Profile - HTML and CSS

Social Links Profile

HTML CSS BEM SASS

QR-code-component-main-Frontend-Mentor-Challenges/HTML

resposnive blog-preview-card with flex-box

QR code page using CSS Flex.

Página Frontend Mentor QR Code

QR Code Component