HTML/CSS

Community feedback

• 

  Kyrylo Lvov•160

  @kyrylolvovPosted almost 4 years ago

  This comment was deleted about 1 year ago

  2

  ---

  

  Sam•40

  @Sam-a-lotPosted almost 4 years ago

  @kyrylolvov Thanks so much for the feedback! Adding display: flex and align-items: center indeed moved the text up a bit, so yay! There's not enough space now between that and the amount though, so I'll need to fiddle with it a bit more. xD I'll check out the flexBox and grid courses @SzymonRojek mentioned first and then I'll take another stab at this challenge. :)

  0
• 

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  Hi Sam,

  Good job, step by step you will be better :)

  You didn't do RWD for smaller devices like mobiles and tablets. Start to learn flex box and grid as soon as possible. I can recommend Wes Bos's courses for free:

  • flexBox;
  • grid;

  Text "per month": you can put the price and text in a div, then do two paragraphs or put the price in the span, and text do as a paragraph. Afterwards you can use display-flex and play with the padding. Maybe there is a better solution for it.

  Button shouldn't be created by divs. Generally, divs are semantically inert elements — elements that don’t really do or say anything. The term "semantic" refers to the meaning of a word or a thing, so "semantic elements" are elements designed to mark up the structure of a document in a more meaningful way, a way that makes it clear what they're for, what purpose they serve in the document. Check the MDN documentation.

  For example, you can use anchor or button - depending on what you want to get at the end:

  Are you giving a user a way to go to another page or a different part of the same page? 
  Use a link (<a href="/somewhere">link</a>);
  
  Are you making a JavaScript-powered clickable action? 
  Use a button (<button type="button">button</button>);
  
  Are you submitting a form? 
  Use a submit input (<input type="submit" value="Submit">);
  

  Please check this article: A complete guide to links and buttons.

  Keep coding, Greetings :D

  4

  ---

  

  Sam•40

  @Sam-a-lotPosted almost 4 years ago

  @SzymonRojek Thank you so much for your feedback! I'm following a beginner's course on Udemy and I knew they'd be skipping certain things (RWD, buttons and display-flex in this case) at the start in order to not clutter. I'm definitely checking out the courses you mentioned after a read-through of the links & buttons guide and I'll try this challenge again from scratch after. :)

  0

  

  Szymon Rojek•4,540

  @SzymonRojekPosted almost 4 years ago

  @Sam-a-lot

  Great! we are learning together. If I can give a bit of advice, please - don't delete your whole project from the GitHub and do not start coding it from the scratch. That's your history of learning, history of commits etc., so IMO just rebuild this project but don't delete it.

  I've just checked it out - you have got only two commits but anyway leave it. When you will start another project, then start to build it on GitHub from the initial commit, and then create the history of building it step by step.

  Many greetings :D

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 4 years ago

  Hey, Sam! 👋

  I just wanted to say, congratulations on completing your first Frontend Mentor challenge! 🎉 Good job on this one! 👏

  I think following the suggestions given above will really help you improve your solution! 😉

  Keep coding (and happy coding, too)! 😁

  1

  ---

  

  Sam•40

  @Sam-a-lotPosted almost 4 years ago

  @ApplePieGiraffe Thank you for the encouragement! :D

  0