Skip to content
OverviewSolutions
6
Comments
12
Cornelio R. Llagas Jr.
@Cornelio-II

All comments

  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Congratulations! You have reached this point; however, I would like to offer some recommendations for your work:

    1. The <article> tag is not required; consider using <section> instead.
    2. Place your <header> within the <main>. I believe this is the appropriate approach.
    3. Your <header> is not essential for flexibility; it is only present in your four-feature-section cards. It should be placed in the <body>.

    like this:

    *, *::before, *::after {
   margin: 0;
   padding: 0;
}
body{
   display: grid; 
   place-content: center;
   min-height: 100dvh;
   line-height: 1.5;
   font-family: 'Poppins', sans-serif;
   background-color: var(--white-color);
   color: var(--grey-color-500);
   font-size: var(--fluid-13-15);}

    This challenge is exclusively compatible with the CSS Gridbox layout (Grid features two distinct two-dimensional layouts). For further clarification, please refer to my code for this challenge. Additionally, I incorporate RTL/LTR and fluid typography for this purpose.

    Happy coding! 🚀

  • Ehinola Faithfulness•100
    @faithfulnessehinola
    What are you most proud of, and what would you do differently next time?

    I started with the mobile view first, this is the first time I'm doing that

    What challenges did you encounter, and how did you overcome them?

    Making it responsive

    Product page completed with HTML and CSS

    1
    Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Good job! for completing this challenge!👏

    It is essential to enhance the layout of your design to accommodate users switching between light and dark themes. The following code snippets may assist you in this regard

    *, *::before, *:: after {
margin: 0;
padding: 0; /*remove margin: 0; from your body{} put it here*/
}
/* Put this in your body*/
body {
padding: 1rem; /* or padding: 1.5rem;*/
}

    Also, you can visit my code.

    Have fun building! 🚀

    Marked as helpful
  • Tatiana•60
    @Pavlinova
    What are you most proud of, and what would you do differently next time?

    Started using scss and it's really cool! Variables and myxins make life easier.

    What challenges did you encounter, and how did you overcome them?

    flex and grid seem incomprehensible at first, but in the process you start to understand them.

    Product-preview-card-component Solution

    #accessibility#sass/scss
    2
    Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Nice done! your design same the challenge! keep it up!

  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

    The design comparison doesn't refresh my final design.

  • P
    Aleji0309•150
    @Aleji0309
    What are you most proud of, and what would you do differently next time?

    I'm most proud of how accurately I recreated the layout and design using only HTML and CSS, achieving a clean and responsive result that matches the original challenge design. It showed me how powerful CSS Grid and Flexbox can be when used correctly.

    What challenges did you encounter, and how did you overcome them?

    One of the main challenges was getting the layout to look consistent across different screen sizes. I initially struggled with aligning elements properly using CSS Grid and Flexbox. After experimenting with grid-template and inspecting the layout in the browser's developer tools, I managed to adjust the structure and spacing for better responsiveness.

    Product Preview Card Component - Frontend Mentor Challenge

    1
    Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Great! for completing this challenge!👏

    It is essential to enhance the layout of your design to accommodate users switching between light and dark themes. The following code snippets may assist you in this regard.

    *, *::before, *:: after {
margin: 0;
padding: 0; /*remove margin: 0; from your body{} put it here*/
}
/* Put this in your body*/
body {
padding: 1rem;
}

    Also you can visit my code.

    Have fun building! 🚀

    Marked as helpful
  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Congrats! for completing this challenge** I have some suggestions

    in your html docs use this syntax to fix the issue(s) on your backgroud-color if turn it on the dark theme.

    html, body {
margin: 0;
padding: 0;
}

    Lastly! try conducting a lighthouse assessment using Google Chrome's developer tools to evaluate Accessibility, SEO, Best practices, and Performance. For a perfect shot in your app(s)😉😊✨.

    Happy coding! 🚀

  • Ewang Desmond•60
    @Des-cx
    What are you most proud of, and what would you do differently next time?

    just a landing page

    What challenges did you encounter, and how did you overcome them?

    i did't encounter anychallenges

    What specific areas of your project would you like help with?

    none for now

    responsive landing page using css

    1
    Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Congratulations 🎊 👏! You made it.

    Happy coding!

  • Nwaugojohnson•70
    @Nwaugojohnson
    What are you most proud of, and what would you do differently next time?

    I did it by myself

    What challenges did you encounter, and how did you overcome them?

    To size the whole design to its original figma design i was able to put the font size in :root element

    What specific areas of your project would you like help with?

    None I was able to figure it out by myself

    Social-Link-Profile-Main

    1
    Cornelio R. Llagas Jr.•140
    @Cornelio-II

    Congratulations🎉🥳! for completing this challenge

    Your design workflow is great!

    Have coding! 🚀

    Marked as helpful
  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

    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;
}
    Marked as helpful
  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

    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! 🎉

  • Cornelio R. Llagas Jr.•140
    @Cornelio-II

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

  • Cornelio R. Llagas Jr.•140
    @Cornelio-II
    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.•140
    @Cornelio-II

    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.