Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
7
Comments
7

EDWINTOAPANTA02

@EDWINTOAPANTA02120 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!

Latest solutions

  • testimonials grid


    EDWINTOAPANTA02•120
    Submitted 6 months ago

    The challenges I encountered were that when I set the dimensions on one computer I do it right but I change the design to another computer and everything moves. Even if I use rem, em % it keeps getting misconfigured. If you can see my code I would appreciate it if you could help me by explaining the errors I have.


    1 comment
  • fourd-card


    EDWINTOAPANTA02•120
    Submitted 6 months ago

    grid how to best separate containers. in this case use margin-botton and top for the vertical containers.


    1 comment
  • product preview card

    #accessibility#angular#angular-material#animation#anime-js

    EDWINTOAPANTA02•120
    Submitted 6 months ago

    Next time I would try to improve with the use of the flex-box grid


    1 comment
  • recipe page

    #accessibility#airtable#angular#angular-material#anime-js

    EDWINTOAPANTA02•120
    Submitted 6 months ago

    use the div, the flex, @media queries, the measurements like vh vw, 100% rem


    2 comments
  • social link

    #accessibility#airtable#angular#angular-material#anime-js

    EDWINTOAPANTA02•120
    Submitted 6 months ago

    el desafio que encontre fue que no este tan junto el nombre de la ubicacion, utilice tanto los margin como pading


    1 comment
  • blog card

    #accessibility#airtable#angular#angular-material#animation

    EDWINTOAPANTA02•120
    Submitted 6 months ago

    Next time I would investigate more about the flex-box I would like them to give the dimensions of the letter.


    1 comment
View more solutions

Latest comments

  • P
    David Lemvigh•200
    @dlemvigh
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Figured out to use live-server to get hot-reloading. Nice to have a live preview, without having a javascript framework.

    Testimonial Grid Section - Plain HTML + CSS

    2
    EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Posted 6 months ago

    good job

  • whosadik•300
    @whosadik
    Submitted 6 months ago

    Grid task

    2
    EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Posted 6 months ago

    interesting your solution, good job.

    Marked as helpful
  • kiishi-code•80
    @kiishi-code
    Submitted 7 months ago

    Dr

    #accessibility
    1
    EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Posted 6 months ago

    xd

  • Sanjaysammathew•20
    @Sanjaysammathew
    Submitted about 1 year ago

    Recipe page using HTML and CSS Box Model

    #accessibility#airtable#angular#animation#angular-material
    1
    EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Posted 6 months ago

    I recommend you use the div, the flex, @media queries, the measurements like vh vw, 100% rem, make it as similar as possible to the example

  • Hassan Aziz•60
    @bauerceptor
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    It was quick this time around. I would like to use SASS next time.

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

    It was a smooth experience overall, nothing was particularly challenging. It was same as last challenge with minor changes.

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

    I thought vh, vw, and % are responsive units. I used them to dictate the width and height of the container. But on smaller screen sizes, everything broke so I switched width and height to use 'rem', which surprisingly, made everything responsive automatically and nothing broke on smaller screen sizes as well.

    I don't know how, when and where to use vh, vw and %, and would appreciate some help in understanding these units better.

    Danke

    03 - Social links profile

    #accessibility
    1
    EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Posted 6 months ago

    (Viewport Height) What does it mean? It represents a percentage of the height of the viewport (the visible browser window).

    100vh = Full height of the viewport. 50vh = Half of the height of the viewport. What does it mean? It represents a percentage of the width of the viewport (the visible browser window).

    100vw = Full width of the viewport. 50vw = Half of the width of the viewport. When to use it?

    When you want an element to dynamically adjust to the width of the screen. Very useful for elements like images, containers, and fluid typography. What does it mean? The percentage is always relative to the immediate parent container.

    width: 50%; means that the element will take up 50% of the width of its container. height: 100%; means that the element will take up the full height of its container. When to use it?

    For elements that need to adapt to the size of their container (parent). It is ideal when working with flexible and grid layouts.

  • Aliza Ikram•100
    @AlizaIkram
    Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm most proud of clean code and well structure of my code. I will practice more so i can get comfortable writing clean code by myself.

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

    I encounter one problem when i added <a> tag in the h1 tag. The decorations were visible though i tried to make it none. Also, all the stylings were not implementing on the h1 tag. So i searched and found that i should style the a tag first when writing like this :

    • .card-content > a > h1 { .. }
    • Also, separately i wrote: .card-content > a { text-decoration: none; color: inherit; }
    What specific areas of your project would you like help with?

    I just need feedback on my code for well strcuture approach and responsiveness. I would appreciate it.

    Blog Preview Card

    #accessibility#pure-css
    1
    EDWINTOAPANTA02•120
    @EDWINTOAPANTA02
    Posted 6 months ago

    Code Comments

    Add comments in your CSS to describe the purpose of specific styles, making it easier for others to understand. Lint Your Code

    Use tools like CSSLint or Prettier to ensure clean and consistent formatting.

    Marked as helpful
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub