Html-CSS. Used Flex

Community feedback

• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Tamarchika,

  Good job! keep going :D

  I've just checked your HTML structure by inspecting the page, a few tips from me (probably lots of them I've already mentioned in your last challenge):

  • if you will treat this challenge as a single page component then you can add here h1 as a "Join our community", and h2 below it => rest of boxes h2;
  • this one: <span class="pricetag"> you can change into p with two spans inside;
  • button: generally I'd recommend read this article from the CSS-tricks: A Complete Guide to Links and Buttons. You will get excellent knowledge about them. Also it is good to think about accessibility - that's a huge topic but I am sure that you will achieve it. Another problem is that you have removed the outline from a button. This is a big issue in the accessibility context => have read this article: Accessibility: Never Remove the Outlines;
  • in the third box instead of span it is better to use unordered list & list items => ul>li;
  • names of the classes are not very readable;
  • responsiveness doesn't work properly on mobiles & tablets;

  That's it.

  Greetings :D

  1

  ---

  

  Tamarchika•250

  @TamarchikaPosted almost 4 years ago

  @SzymonRojek Thanks again, ITs really helpful for me. but I have some questions to u.

  1. I have not removed the outlines. I dont know what do u mean about it.. can u show me where the problem is?
  2. What do u mean when u say " Names of the classes are not very readable"? I mean , please explain to me, how I can names classes better?
  3. Also, I dont know how to make responsivness to work properly on mobiles and tablets. I study html css alone, by myself. So there are a lot of things which I dont know exactly... I am very thankful for ur advices and tips, U help me in getting better knowledge!

  1

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @Tamarchika

  • I can see right now. I was checking your code quite late so I didn't see it properly. You have used the span instead of the link or button. Button has got the outline (read about it, that's very important in the accessibility context => lots of people are removing it by setting outline to none). In this component I'd recommend to use a link instead of the button:

   <a href="#" title="Sing up for subscription" class="btn btn--primary">Sign Up</a>
  

  • your classes at the moment are not very readable because it will be difficult to navigate between them by other developers in CSS file, otherwise they have to all the time checking HTML tags and recognise what did you do and what did you wanted to do: => "lowers, second, upper, first etc." these names are very general words.

  The second point is - when you are using the grid or flexbox then the naming is more complicated, example:

  - grid (maybe a section, but optional) => this is a container for all component
  ------> first box
  -- grid__item
  --- h1
  --- p.lead
  --- p
  -----> second box
  -- grid__item
  --- h2
  --- p (with some classes on p or spans to get styles right for price)
  --- link
  -----> third box
  -- grid__item
  --- h2
  --- ul> li
  

  If you want to start to learn about the naming convention I can recommend to learn the BEM for beginners (check tutorials on youtube, read articles about naming, the best idea is to check the other people code). To be honest with you, I still learn naming and it takes much time to achieve it - experience is the key and don't worry about it;

  • if you want to start to do better responsiveness then start from the beginning by doing simple tutorials => Start to learn from Wes Bos's courses and after a few weeks you will be able to do it! believe me :D

  Let me know what do you think about it.

  Cheers :D

  1

  

  Tamarchika•250

  @TamarchikaPosted almost 4 years ago

  @SzymonRojek Got it. thanks ! I ll try to foresee ur advices in another challenge. I am starting the last challenge of newbie level now, So when I finish, I will upload here and I hope u ll like it ! :D ^ _ ^

  0

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @Tamarchika

  One more thing. Don't delete your last solution. Try to work on this one because this is your time and history of commits, what so you think?

  Cheers :D

  0