HTML, CSS, TailwindCSS

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted over 2 years ago

  Hi

  As well as the styling issues I raised on slack with the Screenshots, I notice problems with the html here

  You have some text in divs and spans alone, not meaningful elements.

  You also have what should be an interactive element as a div for cancel I think (?)

  It's really important to choose the right elements and not neglect that. Right down to when you're using buttons vs anchor tags. Eg on this why is change an anchor link and proceed a button? What would you expect to happen if someone clicked each of these? That determines which element has to be used in each case

  Make sure you don't remove the gitignore files from these challenges too. You get one in the starter files and need to keep that in your repo

  Good luck with it

  Marked as helpful

  0

  ---

  

  Colin McArthur•140

  @ColinMcArthur85Posted over 2 years ago

  @grace-snow

  Ill revisit the HTML as suggested but I'm not fully understanding some of what you're recommending. You mentioned I have some 'text in divs and spans alone, not meaningful elements'. Are you referring to this:

  <img class="mr-4" src="./images/icon-music.svg" alt="Music Icon" /> <div class="flex flex-col basis-1/2 col-to-row font-bold"> Annual Plan <span class="font-medium text-desaturated-blue">$59.99/year</span> </div>

  Im not sure what the best practice would be here? Could you elaborate?

  Regarding the 'Change' anchor link followed by the 'Proceed to Payment' button, other than the fact I thought this is what needed to be done Im not sure 'why' I did it. Are you suggesting that both of these elements should be <a> instead and I should style the Proceed to Payment <a> as if it were a button rather than using <button>?

  Regarding the gitignore files, this was raised before but there are no gitignore files when I download these challenges so I'm not sure where those files are located?

  0
• 

  Ivan•2,630

  @isprutfromuaPosted over 2 years ago

  Hi there. You did a good job 😎

  keep improving your programming skills

  your solution looks great, however, if you want to improve it, you can follow these steps:

  ✅ place the Google import code such that it loads first directly after the html HEAD tag, EVEN before loading the CSS file. This ensures the fonts load before the CSS so there isn't any unexpected "jumping" of when the font finally loads.

  @import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap");
  
  to
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">
  

  ✅ no reason to use universal selector twice

  * {
    margin: 0;
    padding: 0;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  

  ✅ you have an separated tailwind config, but placed configuration into the html file.

  tailwind.config = {
          theme: {
            extend: {
              colors: {
                "pale-blue": "hsl(225, 100%, 94%)",
                "bright-blue": "hsl(245, 75%, 52%)",
                "very-pale-blue": "hsl(225, 100%, 98%)",
                "desaturated-blue": "hsl(224, 23%, 55%)",
                "dark-blue": "hsl(223, 47%, 23%)",
              },
            },
          },
        };
  

  ✅ remove an empty style.css file

  ✅ there is no reason to have separated css file at all. You can simply add this properties with tailwind.

  I hope my feedback will be helpful. You can mark it as useful if so 👍

  Good luck and fun coding 🤝⌨️

  Marked as helpful

  0

  ---

  

  Colin McArthur•140

  @ColinMcArthur85Posted over 2 years ago

  @isprutfromua Thanks Ivan. I was actually wondering about a few of those things and I think I was thrown off by the instructions on Tailwinds installation page regarding the tailwind.config file. This was my first attempt at using their framework so there were a few 'head-scratching moments' so I appreciate you clarifying for me.

  Ill clean some of these things up and keep on keeping on.

  Appreciate the advice

  0