Skip to content
OverviewSolutions
12
Comments
5

Rameesha Padmatilaka

@rameesha0126Sri Lanka220 points

Student learning web development.

I’m currently learning...

HTML, CSS, JavaScript

Latest solutions

Latest comments

  • Rameesha Padmatilaka•220
    @rameesha0126Posted about 2 months ago

    Improvements suggestions

    • The fonts "Young Serif" should be used for headings and "Outfit" should be used for rest of the elements.
    • For the unordered and ordered lists, change to "list-style-position: outside".
    • To make the list items in "preparation" and "Instructions" section look similar to the given design, you can use <span> elements to wrap the bold text sections where you can change the font-weight only for them.
    • For text elements, first define the given font size inside the html element, and then use rem to define sizes for headings and paragraphs.
    html {
    font-size: 16px;
}
    Marked as helpful
    0
  • jorge arevalo•50
    @JDev-8Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I learned

    • Master HTML: The basic structure of the card with links to social networks is complete and working.
    • CSS Styles: I have applied style properties to achieve a minimalist and attractive design.
    • Responsive Design: The card adapts to different screen sizes, which is crucial for a good user experience.
    • Pseudoclasses: I have explored and applied pseudoclasses to add interactivity and visual effects to the card.
    • CSS Transitions: This adds a dynamic and modern touch to the interaction with the links.

    Social links profile My solution

    2
    Rameesha Padmatilaka•220
    @rameesha0126Posted about 2 months ago

    To make the HTML more semantic you can use an unordered list inside a <nav> tag to include the social media links instead of <div> tags. You can add image with rest of the texts inside one <div>. These changes will make the code more accessible. Otherwise the code is well structured and looks almost as the given design.

    Marked as helpful
    0
  • Rameesha Padmatilaka•220
    @rameesha0126Posted about 2 months ago

    Change the width of ".card" component to 375px to perfectly line up with the given design. Rest of the code is done well and i corrected my own code looking at yours.

    Marked as helpful
    0
  • MaryAMsendoo•10
    @MaryAMsendooSubmitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    My most proud of is working with image, borders, width and colors. By next time I will be working with Layout and positioning.

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

    The most challenge I encounter was giving out the correct colors and width but I overcome by going through the Readme.md file.

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

    I may like to get help from the following areas: layout, colors, working with perfect width.

    I did not use any property for this yet.

    #accessibility
    2
    Rameesha Padmatilaka•220
    @rameesha0126Posted about 2 months ago

    Replace <div class="container"> with the main tag (<main class="background"). Inside the main tag add a div (<div class="card-component">) that will hold the <img/> and the text sections. Do not use too many <div> tags. For the heading use <h1> tags, and for the paragraph use <p> tags to fix accessibility issues. Fix the issues with <b> tags in place. To center .background on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    Give .background a background of white a padding value for all the sides, give the <img> a max-width of 100% instead of a width. For responsive content, replace the width of .background with max-width and change the height's value to auto.

    Give .card-component padding values and a fixed width value.

    Use rem or em as unit for the padding, margin, width and preferably rem for the font-size.

    Marked as helpful
    0
  • Rameesha Padmatilaka•220
    @rameesha0126Posted about 2 years ago

    Hi you can remove remove the accessibility warnings by using <main> element for the background and <h1> element for the Heading in the text section in your HTML file.

    Marked as helpful
    0