Sarah
@AutumnsCode
All comments
- Sarah• 540
@AutumnsCode
Posted
Wow this is a great solution. Its really great(I think).
One small suggestion I have for you, to use comments in your code. Made it easier to read :)
0 What are you most proud of, and what would you do differently next time?
Most proud that I didn't need much help with this one (maybe cause its similar to the first project) but feel like I am slowly starting to get the hang of CSS and HTML. Just need to practise practise and more practise.
What challenges did you encounter, and how did you overcome them?
My only real challange was trying to get the profile picture and the profile picture name at the bottom of the card to sit side by side.
What specific areas of your project would you like help with?
Just need some hints and tips on how to get two different elements to sit side by side.
Sarah• 540@AutumnsCode
Posted
Hello,
well done for completing this challenge.
I am happy to provide to give you some feedback:
- the
h1element should be the first heading in your page. I would suggest to use a paragraph element with a class instead to style the element. - the next paragrapgh should have a class since its the text below your h1-element is actually the main text of the challenge.
- I really enjoy that you include a hover effect on your h1-element. To made it even better, it would be great if you could wrap inside a anchor-element.
- The profile image is too large. Inside your css, you could add a width to reduce it.
- Almost every html-element has default styling. It can be really difficult to deal with them while styling like img. If I see an image in one of my project, I am always add reset to take away the default one. Here is the one for
image, picture
img, picture { max-width: 100%; display: block }I hope those tips and tricks will be helpful Best regards Sarah
Marked as helpful
0- the
- Katorazua• 10
@Katorazua
Submitted
What are you most proud of, and what would you do differently next time?
I proud and happy for myself, because i find it easy wen it comes to HTML & CSS for the frontend, i will love to learn more and advance in the frontend in JS, JS libraries and fraimworks and i will be happy to be a MERN stack developer
What challenges did you encounter, and how did you overcome them?
The challenges i did encountered was finding a suitable name for my attributes and a little bit messy when trying to style the nav and links
What specific areas of your project would you like help with?
For now i don't have any specific area i will need help from,in the project. But i will love to learn, study and know more about JS, JS fraimworks and Library, and Node.js
Sarah• 540@AutumnsCode
Posted
Hi
unfortunately, the live page isn't working the way it should be, so I can't say anything yet regarding how it looks live. However, I didn't stop me to check out your code.
I believe you have a good understanding from HTML. Your css looks great too. The one thing I would change is that you don't need to wrap your mobile view inside a media queries. It's a little bit of a overkill. Another little small thing is that you used the wrong font. If you want to work with @font-face to import your font-family, I would recommand Kevin Powell. He has a great video how to import font into your project.
You can be really proud of your work! Best regards, Sarah
0 - Ivano• 70
@IvanoCro
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of the combination of Flexbox, Grid and the final appearance.
What challenges did you encounter, and how did you overcome them?
I encountered a challenge with JavaScript (to open a popup with options after pressing the share button) — I resolved it with the help of W3Schools. I also faced a problem with the appearance of the popup for share options; I made a simple shape, but it still doesn't match the provided design.
What specific areas of your project would you like help with?
I would like feedback.
Sarah• 540@AutumnsCode
Posted
Hi Ivano, well done for completing. This challenge isn't the easiest one to pick for beginner. There are few area I am suggest you might look into more.
- Try to use less divs-element and maybe use semantic HTML instead. It helps to put a some structure in the code for not only us as developer but also for accessibitly.
- Beside colors for hsl and co. there is hardly any use for % in your styling.
- A common practice nowadays are the use of css custom variable.It will help you to main like all the color property in one place
- To archive the mobile view is to add
flex-direction: columnin the element with the class of .card. and later change it back to row
0 - Martynas• 100
@Marcius55
Submitted
What specific areas of your project would you like help with?
Don't know how to apply 2 fonts to the project. Feedback is appreciated!!
Sarah• 540@AutumnsCode
Posted
So i checked the code again. Maybe it does it because of setting your font-weight this way.
font-weight: 500, 700;at your body and some other place. Instead I would choose one font-weight, for your body I would go with the 5001 - PJolijn Rosendaal• 340
@Jolijn0101
Submitted
What are you most proud of, and what would you do differently next time?
I'am very happy that this FAQ-accordion can be navigated with the keyboard as well. This is also the first time I made a custom cursor for pointer events. I hope I can make better website's in de future that could be easy to use for everyone. This project was just the start of learning to write more accessible code.
Sarah• 540@AutumnsCode
Posted
Well done. It is really a good solution And i really enjoy the transition!!!
If you want to do this challenge in the future again, it would be great if the previous open one is closing when clicking on the current one.
1 - Martynas• 100
@Marcius55
Submitted
What specific areas of your project would you like help with?
Don't know how to apply 2 fonts to the project. Feedback is appreciated!!
Sarah• 540@AutumnsCode
Posted
Hi there,
To apply a second font family just add
font-familyto the element you need a second fonts.body { font-family: sans-serif; } h1 { font-family: serif; }I hope this will help you out. If you have do more question, let me know.
Marked as helpful
0 - Inaolaji Ridwan• 170
@InaolajiRidwan
Submitted
What challenges did you encounter, and how did you overcome them?
the problem i had was when i was unable to center my content(main-container)
Sarah• 540@AutumnsCode
Posted
Well done for completing this challenge.
I believe the width of the main container should be smaller.
Best regards
Marked as helpful
1 - PKamran Kiani• 600
@kaamiik
Submitted
What are you most proud of, and what would you do differently next time?
- Practice more and more with form validation on JS.
- Practice with Sass and cube-css
What challenges did you encounter, and how did you overcome them?
Make a good structure on html, scss folder and also write a good JS code was challenging.
What specific areas of your project would you like help with?
I need help to know can I improve my code on js ,css and html parts.
Sarah• 540@AutumnsCode
Posted
Well done for completing this challenge.
I liked your solution a lot. In regards to your HTML, I would have use a section-element after the main element. And I don't believe it is neccessary to have two html file, but honestly I am not sure if I am correct here or not. But since you used two html file, it cursed a little overlap between it when clicking the submit button. It ruins a little bit the experience of it.
1 - Mik2nd• 350
@mik2nd
Submitted
What are you most proud of, and what would you do differently next time?
i finish
What challenges did you encounter, and how did you overcome them?
i cant make function work, i do event click
What specific areas of your project would you like help with?
js is confusing 😵💫
Sarah• 540@AutumnsCode
Posted
Hi there,
well done for completing this challenge. I am currently working on this challenge myself too. In regards to your JS: I think you understood how to switch from one components to the next one. However, user shouldn't be able to go to the other field if the input is empty or the input is not valid. To check something you can use if-statement like this:
if(!(input.value == '' )){ document.querySelector("main").classList.add("none"); document.querySelector(".bg-continer-success").classList.remove("none"); }Translation of the code: If the input value isn't an empty string(because all input values are string) then add / remove the styling
It is common practice in JS to declare variable. It can help you to made it more readable,when reading the code for the first time and also helps to maintaining. Currently, if you rename your main to something else, then you need to change it in both Event listener. For bigger projects that would be lot of work and you can ending up missing one.
const main = document.querySelector("main") const successContainer = document.querySelector(".bg-continer-success") const submitBtn = document.querySelector(".submit") const dismissBtn = document.querySelector(".dismiss") submitBtn.addEventListener("click", () => { main.classList.add("none"); successContainer.classList.remove("none"); }); dismissBtn.addEventListener("click", () => { main.classList.remove("none"); successContainer.classList.add("none"); });Best regards. Sarah
Marked as helpful
0 What are you most proud of, and what would you do differently next time?
Hi here is my solution for Pricing-component-with-toggle. I used HTML, CSS, JS.
What specific areas of your project would you like help with?
Feel free to leave any comments.
Thanks.
Sarah• 540@AutumnsCode
Posted
I really enjoy this solution. Its include semantic HTML, layout looks good, is well-structured, readable and reusable.
My only suggestions is that the media-query need to have smaller breakingpoint. It just doesn't look right.
Bonus: I would be great if you had use some transition if you had build in some animation or transform when you switch from annual to monthly and vise versa.
Keep it up!
Marked as helpful
1- Vishal D.• 570
@Hummingcoder
Submitted
What specific areas of your project would you like help with?
any tip on Js or responsive design
Sarah• 540@AutumnsCode
Posted
Hi,
well done.
Here are some feedback in regards to your request. ** Responsive**: Start with the mobile design first, then I would go look into the other view. Also you might don't know it, but you are able to use logical property and not just min-width, width or max-width. Here is an example:
@media (width > 400px){ /* it only apply the next style if the width is larger than 400px*/ } @media (width >= 400px){ /* it only apply the next style if the width is larger or equal than 400px */ }Keep it up :)
Marked as helpful
0
