Skip to content
OverviewSolutions
16
Comments
7

DrMetr

@DrMetrMoscow280 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

HTML, CSS, JavaScript, SASS

Latest solutions

View more solutions

Latest comments

  • DrMetr•280
    @DrMetrPosted 29 days ago

    Yo, nicely put card but your images aren't showing because you haven't uploaded them in your github repository 😕

    0
  • BINGA00•10
    @BINGA00Submitted about 1 month ago
    What specific areas of your project would you like help with?

    i'll take any advice !!

    basic html and css

    1
    DrMetr•280
    @DrMetrPosted about 1 month ago

    Hey, nice idea with the acrylic paint background and the card is made nicely

    However, this background doesn't look that pretty from a phone because the picture looses quality on upscale and also because it becomes cropped to a certain area and user can't see paint flowing so it's harder to guess what's going on.

    I suggest you to play with the image somehow. Like, cropping a smaller area in an editor in order to make alternative background for smaller screens or getting any other image of smaller scale.

    The alt background can be made with media queries for example, like this:

    body {
background-image: url(//your original image);

@media screen and (max-width: 350px) {
background-image: url(//another image for screens about the width of a phone in vertical position);
}
    Marked as helpful
    0
  • Moundjid Machghour•270
    @PxMachSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    the thing where i'm the most proud, it's just when i finished and what i would like do differently the next time is review my table skills.

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

    the challenge I've taken up is with the table, as it's been a long time since I used the table tag, I've overcome using the div tag instead of the table tag .

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

    I'd like someone to tell me whether I did well in the last section or not.

    Frontend-Mentor-Recipe-page

    2
    DrMetr•280
    @DrMetrPosted about 1 month ago

    Hello, you did a good job however here's a few advice I'd like to give:

    1. The table should be made with <table>, <tr>,<td>, <th> tags. Semantics are important for code readability and accessibility. Users with print disability use screen readers that navigate them through websites and those recognise the sections, buttons forms, tables etc. through the site html code. And you should keep that in mind.

    2. Your work looks okay from my phone but on smaller screens it'll be a little irksome because the main card is too big and doesn't fit the vertical orientation, i.e. your site is not responsive. You should research @media css at-rule and build your projects with mobile-first workflow, i.e. first you code the style for little screens (for example, my phone width is about 350px width vertically) and then add alternative style code for screens wider than specific size using @media at-rule.

    Specifically in this challenge I'd recommend adding a little margin to your taste to the .container class ao there's a small space between the card and the screen edges.

    1. There's a white space on your screenshot bottom that doesn't seem to appear in the site. If it comes from an older version and you have it fixed already then you should regenerate the screenshot.

    Think, that's enough. Continue your development, see how more experienced people solve these challenges and never give up 😀

    Marked as helpful
    1
  • Arash Asghari•60
    @AriArash44Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Positive aspects of this project:

    • I am glad to have used SCSS and PurgeCSS to generate optimized and reusable stylesheet code.
    • I successfully integrated an API to generate QR codes based on user input.
    • I learned how to deploy my project on Vercel and GitHub Pages.
    • I gained an understanding of how to secure API keys by making server-side requests.

    What I would do differently in my next project:

    • First, I will start with the backend, ensuring that all endpoints are fully developed and tested using Postman.
    • Once the backend is stable and functional, I will proceed with the frontend implementation.
    What challenges did you encounter, and how did you overcome them?

    Challenges:

    • The deployment process was completely new to me.
    • The API provides images directly in SVG format, so rendering them using Base64 encoding techniques and related methods was a new learning experience.
    • At times, I updated the README markdown file directly on GitHub but forgot to pull the latest changes before committing locally. This led to merge conflicts, which were frustrating to resolve.

    How I overcame the challenges:

    • I searched the internet and used AI chatbots (ChatGPT and Copilot) to help me through the process.
    What specific areas of your project would you like help with?

    I appreciate any suggestions regarding project structure and code improvements to enhance readability and ensure adherence to clean code principles.

    QR code generator component for links

    #axios#sass/scss#vite#node
    2
    DrMetr•280
    @DrMetrPosted about 2 months ago

    Yo, this is impressive! 😲 You're cool, keep it up!

    0
  • ButrosV•10
    @ButrosVSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Frontend Mentor - Blog Preview Card Solution

    This is a solution to the Blog preview card challenge on Frontend Mentor.

    Table of contents

    Overview

    The challenge

    Users should be able to:

    See hover and focus states for all interactive elements on the page.

    Description

    This project involves building a blog preview card that closely follows the design provided in the challenge. The card displays an article's title, description, publication date, and author's avatar. The design includes interactive elements, such as a hover effect on the button and focus states on clickable elements.

    The goal is to practice basic HTML and CSS concepts like semantic markup, layout techniques, and hover/focus interactions.

    The design provided in the challenge includes both mobile and desktop views, and the layout needs to be responsive, with the card adjusting itself based on screen size. The card also includes an image, a button, and a footer with the author's avatar and name.

    This project is deployed automatically using GitHub Actions to Vercel. The deployment process triggers whenever changes are pushed to the main branch of the repository. The GitHub Actions workflow installs the necessary dependencies, builds the project, and deploys it to Vercel, making it accessible online.

    Project structure:

    .
├── .github
│   └── workflows
├── assets
│   ├── fonts
│   │   └── static
│   └── images
    Links
    • Live Site URL: Blog Preview Card Live. Live site link may expire as vercel app access token to my GitHub project is limited.

    Installation

    To use this project, you can either clone the repository or download the zip files.

    1. Clone the repository:

      git clone git@github.com:ButrosV/frontend-experiment.git

    2. Navigate into the project directory:

      cd blog-preview-card

    3. Install the necessary dependencies:

      npm install

    Usage

    To view the project locally, run the following command to start the development server:

    npm start

    Then, open your browser and go to http://localhost:3000 to see the project running!

    IMPORTANT: Ensure that you have Node.js and npm installed. If you run into any issues while setting up, feel free to reach out for support.

    My process

    Built with What I learned

    Through this project, I learned to implement hover states, manage responsive design, and effectively use Flexbox and CSS Grid to lay out elements.

    Continued development

    I plan to improve the interactivity of the blog card by adding animations and further enhancing accessibility.

    Useful resources

    Author

    • Butros - Coded this project.

    Acknowledgments

    A big thanks to Frontend Mentor for the challenge and all the resources they provided.

    Responsive Blog Preview Card Solution - frontend experiment

    #node
    1
    DrMetr•280
    @DrMetrPosted about 2 months ago

    🤯

    0
  • Asia Ashraf•820
    @asia272Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of successfully implementing a clean and responsive design while ensuring accessibility. The card layout adapts well to different screen sizes. Next time, I would focus more on optimizing the CSS structure and improving performance by reducing unnecessary styles.

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

    I would appreciate feedback on my approach to structuring CSS—whether it’s efficient or if there are better ways to organize styles. Also, any suggestions for improving responsiveness, particularly for small mobile screens, would be valuable.

    Social-links-profile

    3
    DrMetr•280
    @DrMetrPosted about 2 months ago

    You provided wrong github link 😬

    0
View more comments