Cornelio R. Llagas Jr.
@Timex29All comments
- @Wellington-mSubmitted about 3 hours ago@Timex29Posted about 3 hours ago
Hey there!👋😊. Good job for completing this challenge.
But I have some short suggestions that might be of interest to you.
- Consider this doc, which might give you a responsive layout web.dev
- Missing a modern CSS reset. Add a reset file to remove browser inconsistencies. Consider using Andy Bell’s or Josh Comeau’s,
and also try this on your style.css might give you something different;
*::before, *::after { box-sizing: border-box; font-weight: normal; } body { padding: 0; margin: 0; display: grid; place-items: center; min-height: 100vh; line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video, iframe{ max-inline-size: 100%; block-size: auto; aspect-ratio: 2/1; object-fit: cover; object-position: top center; }
1 - @theYuunSubmitted about 1 year ago@Timex29Posted 3 days ago
Hello there👋!. Good job on completing the challenge!
I have some suggestion about your code that might interest you.
-
To create a responsive application, starting with a mobile-first approach can be more effective than focusing on desktop design, as it allows for quicker design iterations. Utilizing CSS features such as flexbox, grid, and media queries is essential for achieving responsiveness. Additionally, applying
margin: 0;
andpadding: 0;
to thebody
element can enhance your layout. For further insights, you may find this link on responsive design helpful. You can also explore my code for a blog-preview-card, which incorporates the Vue.js framework. -
For improved performance, display, and accessibility, it is advisable to use
rem
orem
units instead ofpx
. When adjusting text size, employing theclamp
function is a beneficial practice. For instance, you can usefont-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
. -
Semantic HTML refers to using HTML elements that convey meaning about the content they contain, making it more accessible, SEO-friendly, and easier to maintain. Instead of using generic
<div>
or<span>
elements for everything, semantic HTML provides meaningful tags like<article>, <section>, <header>, and <footer>
.
- Structural Elements
<header>
– Represents the introductory content or a container for navigation links.<nav>
– Defines a section for navigation links.<main>
– Specifies the main content of the document.<section>
– Groups related content together.<article>
– Represents independent content, like blog posts or news articles.<aside>
– Contains complementary content, such as sidebars or advertisements.<footer>
– Defines the footer of a document or section.
- To properly handle images in a
Vite + Vue
project and deploy them to GitHub Pages, follow these steps:- Store Images in
public
Folder: Place images in thepublic
folder for static assets. They will be directly accessible during both development and after building.
-
Example:
public/images/your-image.png
-
Reference in Vue:
<img src="/images/your-image.png" alt="image">
- Update
vite.config.js
for GitHub Pages: Ensure the correct base URL for GitHub Pages by setting the base option invite.config.js
:
-
Put this:
base: '/your-repo-name/',
-
For Dynamic Imports: Use
import.meta.url
or Vue’srequire()
for dynamic assets:<img :src="new URL('@/assets/your-image.png', import.meta.url)" alt="image">
-
Build & Deploy: After running
npm run build
, deploy thedist
folder to GitHub Pages. The images will be correctly referenced in the build.
- Store Images in
Your code is great! you're using
composition API
but I believe instead of usingcomposition API
use it firstoption API
if you are newbie invue.js framework
.😊 Happy coding! 🎉
0 -
- @dforce2055Submitted over 2 years ago@Timex29Posted 18 days ago
Nice app you made this wonderful, and you are using modern CSS like tailwind.css.
1 - @Timex29Submitted about 1 month ago@Timex29Posted about 1 month ago
Does the solution include semantic HTML? Answer: Yes! Indeed
Is it accessible, and what improvements could be made? Answer: Of course, it's responsive design, you can view any device/s.
Does the layout look good on a range of screen sizes? Answer: Yes!
Is the code well-structured, readable, and reusable? Answer: Yes!
Does the solution differ considerably from the design? Answer: Yes!
0 - @Timex29Submitted 7 months agoWhat are you most proud of, and what would you do differently next time?
I'm creating this challenge with my own using frontend framework.
What challenges did you encounter, and how did you overcome them?When it comes to Responsive design and accessibility is challenging to me right now.
What specific areas of your project would you like help with?The specific areas of my project were how it is responsive of any devices and make it PWA.
@Timex29Posted 7 months ago-
Does the solution include semantic HTML? Answer: yes with Vuejs framework.
-
Is it accessible, and what improvements could be made? Answer: Yes it is accessible and the improvement is could be faster reloading with the help of vuejs framework.
-
Does the layout look good on a range of screen sizes? Answer: Yes
-
Is the code well-structured, readable, and reusable? Answer: Yes
-
Does the solution differ considerably from the design? Answer: Exactly, it's pretty much know how to design your app.
0 -