Hi! Congratulations on completing the challenge! I have reviewed your code and overall it looks good, but I noticed a few areas that could be improved. Here are my suggestions:
-
In your CSS file, you are using position: absolute
and z-index: -1
to position the background image behind the text. This is not the best approach as it can cause issues with the layout of your page, especially on smaller screens. Instead, consider using a background property like background-image
or background-color
to achieve the same effect.
-
In some places, you have used an asterisk *
selector to apply default styles to all elements. While this can be useful in some cases, it is generally better to be more specific with your selectors. For example, instead of using * { margin: 0; padding: 0; box-sizing: border-box; }
, you could use html, body { margin: 0; padding: 0; box-sizing: border-box; }
to apply these styles only to the html
and body
elements.
-
Finally, I noticed that some of your class names are not very descriptive, like btn-primary
and btn-secondary
. It's always a good practice to use descriptive class names that clearly indicate the purpose of the element they are applied to. This can make your code easier to understand and maintain in the long run.
I hope these suggestions are helpful to you as you continue to develop your skills. Keep up the good work!