What are you most proud of, and what would you do differently next time?
I'm most proud of how quickly I completed this project. Something I would do differently next time is to give better class names. I'm still new to the BEM methodology, so I have yet to have a good handle on coming up with good class names. I would also probably add a bit more interaction to the buttons.
What challenges did you encounter, and how did you overcome them?
There was nothing particularly challenging about this project.
What specific areas of your project would you like help with?
Any advice on best practices and responsive design is welcome.
Really really good! Your code is super clean and logical in readibility as well as accessibility! Really impressive. Just wanna ask, in your CSS, the media query is not filled up yet but just the comment about what to do in that part. Maybe this is just about forgetting. So if you can, please consider taking it into account, media queries are really important also. And you are good to go, again I have to admit your code is really clean, keep improving! Thanks a lot for reading this small comment!
What are you most proud of, and what would you do differently next time?
I feel really happy that my speed with translating a design to HTML and CSS is picking up. I think I implemented this one from start to finish in less than hour, feels great.
What challenges did you encounter, and how did you overcome them?
While I can do static widths fairly well now, I wonder how it'll work when I do more responsive design. So I'm hoping to learn that better soon :)
What specific areas of your project would you like help with?
Any feedback in terms of HTML and CSS structure, semantics and best practices in general would be very appreciated!
Really impressive! This solution is really really amazing I have to admit. Just wanna ask if you did miss the media queries or not? Media queries is really important, maybe your code right now is no need for media queries but further challenges will require media queries, such like "create three dots in phone query,..." So if you didn't remember to add it, make sure to take it into account! And you're good to go! Thanks a lot for reading this small comment
Also you are the second person to have this container "perfect pixel". Everything is alike about 98% of the design. So keep pushing and pushing to be more successful. Again, congratulation!
Really really amazing! This is one of the cleanest and most stylish 3 column card I have ever seen. Really impressive! There is litterally no mistake to talk about. Just wanna remind you if you want to be as closest as possible to the first design, you can change the height of the container. Also the button, you can change to the color white or hide the border, but you know, this is up to you, no need to follow to the design. And the rest is litterally perfect. Good job!
You're doing great! Congratulation of completing one of the FEM challenges, really impressive I have to admit! It is great from the first look but there are some mistakes we need to discuss about.
First, it is considered that you use landmarks instead of div. Landmarks are such like: <main></main><section></section><footer></footer>,... using div is not wrong but it can not describe what is the role of each individual part? So consider changing those div to main based on what the role of that part is.
Second, I am seeing that your card is not being centered properly, well there is a tip for you is that using: margin: 0 auto This will automaitcally center your whatever div, so consider adding that to your css
And you are good to go! Your solution is really great I have to admit! So keep practicing and practicing for perfection! Thanks a lot for spending time reading my small comment
Congratulation on completing one of the FEM challenges! You are doing great but there are multiple mistakes that need to be fixed, I also really want you to take it account too!
For the first one: we will discuss about landmarks, this is important, the code you are using here is declaring a class with a div, but the div can't tell what is the role of that part so landmarks help this, using <main></main><section></section><footer></footer> is like a command, it helps better accessibility and also better styling of code. For example, with the paragraph part, instead of writing:
<h3>
These language are the backborn of every <br />website,defining
structure,content and <br />presentation
</h3>
You can change to:
<h3>
These language are the backborn of every <br />website,defining
structure,content and <br />presentation
</article>
So remember adding that into your next solution!
For the second thing, you are totally different from almost everyone in FEM because of using clip-path, well knowing that you are trying to create the border-radius for the elements in that container but this can cause to time-consuming and difficulties when reading code. So instead of using clip-path, you can use border-radius instead!
Thirdly is about centering your card, your card here is not properly centering and there is a pro tips that can center it easily without any difficulties, using margin: 0 auto; in CSS at your container will automatically center in the middle of the screen. About the height, you can add min-height: 100vh;display: flex and align-tems: center this will also automatically center the card in the height.
And there are also some minor mistakes like padding and margin: well this is depends on your way of thinking, if you want it to be more beautiful add the font and adjust the padding and margin.
And you are good to go! You are doing great! So keep pushing yourself to become a successful front-end develop! Thanks a lot for spending time readin this small comment!
This literally perfect! Congratulation on completing one of the FEM challenge, just wanna give some advice.
This is a small tip when displaying code is that you should consider using landmarks instead of div, using landmarks can help you describe better what each individual part of your code is so you can consider change div into <main></main>, <section></section>, <article></article> or <footer></footer>.
And you are ready to go! Trying hard more to become a successful developer! ;) Thanks a lot for reading this small comment
Seeing that you have made a lot of progress! Congratulation on completing one of the FEM challenges! Really impressive. You solution is fine but need some adjustments and I hope you will take those into account!
First, one of the main problem that almost all beginners may get in is not using landmarks. Here in your code, I am seeing that you are using div as a class to store your code but those divs can not describe what is the role of that part. So you can consider using <section></section><footer></footer> to replace those!
Next one this is a minor mistake, but you can also consider fixing, is that: it is recommended to use arial font, instead you can use the provided fonts for the equality to the design but this is up to you, I mean if you want to keep your styles, then just keep it, there is no rules to maintain the provided fonts.
Thirdly is important, remember this is a container event not a landing page so adding padding and the width to the container is also important. Your code here is not minimizing the container yet leading to the "landing page" exercise so consider adding those!
There are also some small mistakes with alt of img so consider adding those.
And you're good to go! I have to admit your solution is really good so keep pushing yourself to become a successful developer! Thanks a lot for spending time reading this small comment!
Seems you have made a huge progess! Congratulation on completing the challenges! Really impressive! But just wanna have a question: Just wonder why you style the container to have cursor: pointer? I don't think this is a necessary one, I think we just need to add cursor: pointer to those buttons and those attributions, so you can consider removing them! That's all! Thanks a lot for spending time reading my comment!
Seeing that you have made a lot of progress, congratulation! Really impressive I have to admit. Beside that, there are just a few of minor mistake in your code that I think you can consider fixing:
First, It is considered to contain your landmark instead of using div, this provides more details and description on how each part works. So, you can consider fixing this by changing <div></div> into landmarks like: <main></main> or <section></section>
Second in the part Learning, you not need to make it by button but simply it by using p or h1 and the after path you need to add is padding, border-radius and background-color, this will reduce less time than using button.
Another one I was missing about is media query, also necessary. Your code right here may not need media query. But it is extremely important for your next challenges so remember to add that, maybe it will display your container to column or dislay some three dots,... So remember to add that!
Those are 2 minor mistakes, a missing media query mistake I can tell you because your solution is literally perfect! Keep pushing yourself to become a successful develop :) Thanks a lot for spending time reading this small comment!
What are you most proud of, and what would you do differently next time?
I would say I haven't figured out how to use outside of the built in font styles so, with this project and being new to this space I will be exploring those options. I have been in a bootcamp since February 2024. I plan to use this open source to gain as much knowledge possible.
What challenges did you encounter, and how did you overcome them?
how to change the entire background of an html page.
What specific areas of your project would you like help with?
how to better utilize css and when choosing media parameters.
Seeing that you have made some progress here, congratulation on completing the challenges! But on the other hand, I think we need to discuss about styling your project.
Firstly, let's talk about padding: I see that you are adding a real big amount of padding here compared to the first design so minimize it to be the same as the design is extrememly important.
Secondly is the border-radius: As I mentioned before, keeping as closest to the design as possible is really important when attending FEM. Your image here is currently having no border-radius, so it is better to add them. Try adjusting again and again, making your solution more successful will make you a successful developer!
Thirdly, we will discuss about your HTML file. Your HTML file here is fine from my perspective, but I have some comment: first, you shouldn't use inline style code, this can cause to easy breaking maintainace, for instance: you are linking a inline style code in your body, you can fix this by removing it and put into your css file (but I think no need to put into css file anymore because you have already linked a color in body)
Moving to the next section, I see that your container is not in the middle yet, you can fix this by adding margin: 0 auto, this will automatically center your card (also remember to remove that margin: 500px)
Also, I still have no idea why you make the text of the challenge to be border and background and this maybe not considered as a part of the challenge but if this is your purpose of making your own style then it's fine ;) No need to follow completely to the design.
And you are good to go, thank you very much for reading this small comment, your project is successful and I hope those advices I gave you can help you on your way of becoming a successful developers. Again thank you for take time reading this comment!
What are you most proud of, and what would you do differently next time?
I had a chance to learn about bootstrap container , spacing , button , border and gained a lot of knowledge about bootstrap framework. Even though , I may not exhibit the clear development structure , I got to know more about Bootstrap framework.
What challenges did you encounter, and how did you overcome them?
In this solution , I could say that the most difficult part for me is customizing some bootstrap components. Some can customize but in some case , I can't . In that case , I had to make custom css style for those contents.
Seeing that you have made lots of progress, really impressive! But there are some advices I think you can fix for a more good-looking solution.
For the first one: it is highly recommended that you adjust the padding of the elements as well as the container, this helps out a lot to be compared with the challenge's images.
Secondly: Your class name right now is a bit too long and may cause to mistakes during writing codes so please shorten it
Thirdly: Seeing that for each elements of the container, you are linking it with a "long name" class (row justify-content-md-center justify-content-center align-items-center). There is a way to shorten this: Just make a class and put all the whole elements in it, here are the fixed code you can consider fixing:
And you are good to go, thank you very much for reading this small comment, your project is successful and I hope those advices I gave you can help you on your way of becoming a successful developers. Again thank you for take time reading this comment!
