All solutions

Glad to share my card with you.

I know it is not perfect as I had just few time to design it yesterday evening. Especially the size is very far from the solution as I had no access to figma or sketch file (I took free option).

Happy to hear some advice from you.

I was coding before going to bed for fun.

Hi everyone,

Feel free to give any advice to improve this code.

I know I did it fastly so I am aware it has a messy code without BEM or other clean organization and I cound have avoid any media-queries by a better layout choices. I have not tackled yet accessibility issues. I am open to advice about it and I will improve it by myself once I am free from other duties.

Better to publish it once really finished is to enrich myself with advice when it is almost finished. I may have for example use ::before for music icon to avoid taking DOM place optimizing the rendering.

I try to use calc(base - vw or %) for the first time: I think it is a good way to scale proportionally our font-size for example. It can also be used to automatically resize a padding/margin once we reduce the viewport, but I only use linear proportion by adding, I think we need sometimes to multiply or divide to reach good ratios.

Have a good moment with my project.

Hi everyone,

This is my solution to the nft card project.

Have you any advice to improve my code ?

Auto-critics: I think it lacks alignement and white space good ratios, I forgot to check it. I also forgot to add icons. I respect the 18px paragraph size but my title is too wide.

Enjoy exploring my solution.

Hi everyone,

Happy to share with you one of my first project as a beginner. I begun this challenge a long time ago - almost one year now - and pause it.

When I rediscover it recently I try to fix some issues but I want to publish it as it was : a first challenge. I will improve it from now reading your comments.

I know how to improve a lot of things as I improve my coding skills since I opened this challenge. I know I didn't commented the code well, I didn't pay enough attention to maintainability, BEM, accessibility etc... all these things I have learn few month ago but I wasn't conscious of it when I begun this challenge. I prefer to enrich myself with your advices and fix it together rather than only doing this alone so feel free to say everything you want. Have a good moment discovering it, I hope it'll not be to difficult to understand as it is not a clean code example, sorry.

Hi everyone,

I had pleasure coding this one but as I was only doing it for fun, I lose some of my discipline.

I haven't really finished it yet :

• it lacks of design consistency : spaces and margins/paddings are not consistent. => problem come from the fact I haven't a clear pattern to adapt my element size and spaces size, there is no pattern with multiple of 8 as Google do for example.
• it isn't very well in term of maintainability : changing spaces size may not be easy for example...

I also didn't placed background pattern, I'll fix this later.

If you enjoy analysing it, I thank you well in advance for any advices that can improve my code.

Have a good moment.

I wanted a small and fast project to have fun today and this one was great.

• I use only pure CSS.

Maintainability:

• I borrow some tips from BEM without doing full BEM. I only use someting useful for maintainability : separation of css features.
• I use variables for a better maintainability too : I need only to change these variables.

Design:

• I try to maintain size to improve the design rule of consistency : I used multiple of 6 (font-sizes) and 8 (white spaces).

Performance:

• I customize my own reset.css as I didn't want to made useless rules for this project.
• I may have done css in only one file (for performance reasons) but to better organized css I separate css files and comments to search easily inside css files (with cmd or ctrl+F).

Questions:

• You can also help me to find a better way to use flexbox and grid: what can be improved ?
• I try to follow "DRY" but tel me if I can do better.
• And every other advices for best practices are welcome to improve myself.

I have done nothing for accessibility (aria-label etc.), I can improve this later.

Have a good moment discovering my project. :)

Hi everyone,

It is an easy project but I want to improve my code : what are your advices in term of clean code, performance and other things ?

I used only pure CSS and pure html without any framework or librairies.

happy to hear from you.

Why I add normalize.css : it is used to begin with a css that will behave the right way but it is not meant for this type of tiny project as it is too heavy, 70% of its rules are not used here. I try it on this small project to see what it can do by curiosity.

If the project would scale, do you think it is a good idea to add this or it is too heavy and bad for performance ?