Skip to content
OverviewSolutions
7
Comments
4
P
Gerardo Cianciulli
@GerardoCianciulli

All comments

  • Gerardo Cianciulli•190
    @GerardoCianciulliPosted over 1 year ago

    There are about a dozen html tag that you may want to use on a regular basis. Selecting the correct tag helps with SEO, CSS and javascript . Looking over your html I noticed the use of div, span and section in ways that can cause you trouble for more complex projects. Example

    <div class="title"> <span class="main_title">Improve your front-end skills by building projects</span> </div>

    should be

    <h1>Improve your front-end skills by building projects</h1>.

    This helps SEO "search engine optimization" by adding a heading level 1. It also helps you with your CSS. Since you can only ever use one H1 per html you don't need to create a title class and can style the H1 directly.

    Marked as helpful
    0
  • magname•60
    @magnameSubmitted over 1 year ago

    This is my solution for the interactive rating card component challenge.

    The problem that I faced?

    • The first container is not following the given margin when the window is resized but the second one does.
    • Why does the focus pseudo-class focus doesn't work with the div tag?

    CSS

    .buttons:focus{ background-color: hsl(216, 12%, 54%); }

    HTML

    <div class="buttons">2</button>
<div class="buttons">3</button>
<div class="buttons">4</button>
<div class="buttons">5</button>

This doesn't work so changed the div with the button tag

    Interactive-Rating-Component using Flexbox and JavaScript

    2
    Gerardo Cianciulli•190
    @GerardoCianciulliPosted over 1 year ago

    To avoid cross browser bugs or default browser settings it is best to use the appropriate html tag for the job. Not all tags have a focus state until specified with the attribute "tabindex=0". However with this design your "Submit" should be a button and not a div. You would trigger a click event when the user hits the "enter" key.

    0
  • Gerardo Cianciulli•190
    @GerardoCianciulliPosted over 1 year ago

    you are using @media (max-width: 375px) which would imply you are designing for desktop first and then you move into the mobile css within this block. It might be easier for you to try the reverse and start with mobile first as they tend to be the more finicky in my opinion. You can then use @media (min-width: 650px) which is a nice middle point between the mobile design and the desktop depending on how responsive you are looking to make either design.

    Marked as helpful
    1
  • Gerardo Cianciulli•190
    @GerardoCianciulliPosted over 1 year ago

    For the box shadow it actually is on both sides. Because of how pale the shadow is and blurry the reference image is it can be hard to see. I used a photo editing tool to help me zoom in and see the details. I also cropped out sections and saved them as separate images and opened them in my browser to help me with the dimensions and placement of these elements since I did not have the figma file to see the crisp details. If ever you want me to show you via screen share what I mean as this might not be clear in writing please message me directly I'd be happy to show you.

    Marked as helpful
    1