Looking to hire developers?
First time adding a solution, so I hope the links work okay. Sort of works, I think, but I'm still having trouble with positioning. :/ Any tips on that are much appreciated!
I also couldn't figure out how to move the "per month" text a little higher. Should I put that in a separate div from the amount and try positioning it that way?
@kyrylolvov
Posted
This comment was deleted
@Sam-a-lot
Posted
@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. :)
@SzymonRojek
Posted
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:
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
@Sam-a-lot
Posted
@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. :)
@SzymonRojek
Posted
@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
@ApplePieGiraffe
Posted
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)! 😁
@Sam-a-lot
Posted
@ApplePieGiraffe Thank you for the encouragement! :D
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
