Skip to content
OverviewSolutions
4
Comments
5
Cornelio R. Llagas Jr.
@Timex29

All comments

  • Cornelio R. Llagas Jr.•60
    @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
  • Cornelio R. Llagas Jr.•60
    @Timex29Posted 3 days ago

    Hello there👋!. Good job on completing the challenge!

    I have some suggestion about your code that might interest you.

    1. 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; and padding: 0; to the body 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.

    2. For improved performance, display, and accessibility, it is advisable to use rem or em units instead of px. When adjusting text size, employing the clamp function is a beneficial practice. For instance, you can use font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);.

    3. 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
      1. <header> – Represents the introductory content or a container for navigation links.
      2. <nav> – Defines a section for navigation links.
      3. <main> – Specifies the main content of the document.
      4. <section> – Groups related content together.
      5. <article> – Represents independent content, like blog posts or news articles.
      6. <aside> – Contains complementary content, such as sidebars or advertisements.
      7. <footer> – Defines the footer of a document or section.
    1. To properly handle images in a Vite + Vue project and deploy them to GitHub Pages, follow these steps:
      1. Store Images in public Folder: Place images in the public 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">

      1. Update vite.config.js for GitHub Pages: Ensure the correct base URL for GitHub Pages by setting the base option in vite.config.js:

      • Put this: base: '/your-repo-name/',

      1. For Dynamic Imports: Use import.meta.url or Vue’s require() for dynamic assets: <img :src="new URL('@/assets/your-image.png', import.meta.url)" alt="image">

      2. Build & Deploy: After running npm run build, deploy the dist folder to GitHub Pages. The images will be correctly referenced in the build.

      This setup ensures images are bundled correctly and accessible in your GitHub Pages deployment. However, you can follow this step-by-step tutorial github-pages if it's not functioning 😊.

    Your code is great! you're using composition API but I believe instead of using composition API use it first option API if you are newbie in vue.js framework.

    😊 Happy coding! 🎉

    0
  • Cornelio R. Llagas Jr.•60
    @Timex29Posted 18 days ago

    Nice app you made this wonderful, and you are using modern CSS like tailwind.css.

    1
  • Cornelio R. Llagas Jr.•60
    @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
  • Cornelio R. Llagas Jr.•60
    @Timex29Submitted 7 months ago
    What 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.

    First Challenge - QR Code Component (VueJs, and CSS)

    #vue
    1
    Cornelio R. Llagas Jr.•60
    @Timex29Posted 7 months ago

    1. Does the solution include semantic HTML? Answer: yes with Vuejs framework.

    2. 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.

    3. Does the layout look good on a range of screen sizes? Answer: Yes

    4. Is the code well-structured, readable, and reusable? Answer: Yes

    5. Does the solution differ considerably from the design? Answer: Exactly, it's pretty much know how to design your app.

    0