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?
Justin Madilia
@jmadiliaAll comments
- @aymaneatiguiSubmitted about 1 year ago@jmadiliaPosted about 1 year ago
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:
- Where are your users more likely to access your website? This will help prioritize mobile-first vs. desktop-first.
- How complex are interactions on the website for users? If they're more complex than a few simple clicks and scrolls, then desktop-first might be the way to go.
- What kind of product is it going to be? For example, with e-commerce sites, users want quick and easily accessible interactions better suited for mobile-first. However, with more complex solutions for websites, desktop-first would be better.
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 helpful0 - @anaislcnoSubmitted about 1 year ago
Do you have any idea for doing this with less CSS code?
@jmadiliaPosted about 1 year agoHi 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 ofpadding
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 helpful0 - @Pepo946Submitted about 1 year ago
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
@jmadiliaPosted about 1 year agoNice 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 helpful1 - @jet2codeSubmitted about 1 year ago
Any other tips for best practices such as global styling / using the style tag in elements?
@jmadiliaPosted about 1 year agoNice 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.
0