@jmadilia
@aymaneatigui
Submitted
What is your professional opinion on the optimal approach for web development: prioritizing mobile-first design or desktop-first design, and what factors should one consider when making this decision in today's digital landscape?
@jmadilia
Posted
Regarding mobile-first or desktop-first design, I'll give the classic answer here: it depends.
Some of the biggest factors to have a solid understanding of before starting a project are your users, the intention of how they'll use the interface, and the type of the product. Some questions to think about:
FreeCodeCamp has a great article from a few years ago on responsive web design: How to Take the Right Approach to Responsive Web Design. They also have a more recent article discussing some technical tips and tricks for responsiveness: How to Build Responsive Websites – Best Practices for Developers. Hope this helps! Happy coding!
Marked as helpful
@anaislcno
Submitted
Do you have any idea for doing this with less CSS code?
@jmadilia
Posted
Hi An,
Nice job! As far as optimizing with less CSS, I notice your .card selector has a value assigned for each border, set at 15px for each. This is perfectly fine, but if you really want less CSS, then since each value is the same, you could set the value of padding to just a single 15px, like so:
padding: 15px;
This way, each of the four border values will still be set to 15px. There are helpful examples of this on the W3Schools site, located on the CSS Padding page.
Additionally, I noticed that your link to the live deployment of the component results in a 404 error when navigating from FrontendMentor at the time of writing this message. It is likely the incorrect URL. Currently deployed from Github Pages is https://anaislcno.github.io/QR-Code-Component/, while the URL used in FrontendMentor is https://anaislcno.github.io/QR-code-component/. The URL is case sensitive.
Hope this helps! Keep it up!
Marked as helpful
@Pepo946
Submitted
I spent like 4 hours and did lots of research I tried to flex and position and in the end, I know how to use both flex and position at the same time It was a good project for a person who started learning web dev, I hope that looks good and I did my best in that Thank you ALL
@jmadilia
Posted
Nice alignment of the container, image, and text.
You mentioned using Flex. For more information on Flex and other helpful alignment best practices, I recommend checking out the Mozilla Developer Network documentation for CSS if you haven't already. There is a great resource on CSS box alignment. There are also tons of helpful examples regarding Flexbox specifically.
Great work, keep at it!
Marked as helpful
@jet2code
Submitted
Any other tips for best practices such as global styling / using the style tag in elements?
@jmadilia
Posted
Nice spacing and alignment!
I noticed that your solution on Github currently displays the default README provided by Frontend Mentor, as well as still contains the README-template. To better assist someone reading your solution straight on Github, it could be helpful to only have the single README committed while also following the template that is provided, as well as removing the template from your committed solution.
