P
@HelewudSubmitted about 1 month ago
P
Kiara
@Kiara523All comments
- P@Kiara523Posted about 1 month ago
Hey I looked at your solution and I've found it too advanced for me, I can definitely learn something from it.... It made me realized that I'm missing a part of javascript, the "this" keyword, not very familiar with that...let know if you have any good resources to share...thanks bye😊
0 - @razanabbasSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I am proud that i successfully made my code functional
What challenges did you encounter, and how did you overcome them?This was my first time working with regex to make an email validator so it took me a while to work it out
What specific areas of your project would you like help with?Any general advice
P@Kiara523Posted about 2 months agoHi! I had a look at your code and I it was very well organized easy to read. I liked the semantic and also that the form even if is not visible is still accessible to screen reader.
Just a small thing to improve the code could have been to show the actual email of the user in the success message page, utilizing the some span elemenr that you used for styling and handle the innerText with javascript.
I hope it was useful, have a good day!
0 - @DanieleErcoli243Submitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
I'm proud because I found all the solutions by myself when I had a problem of layout or so and I'm proud because I've been able to apply something I read on an article. Next time I would like to be faster at finding those solutions.
What challenges did you encounter, and how did you overcome them?I had troubles handling the dimensions of the cards in the different breakpoints. I overcame them using the inpsector of the browser and all my knowledge and experience.
What specific areas of your project would you like help with?I would really like to master Javascript, because on html and css I'm confident.
P@Kiara523Posted about 2 months agoHey I took a look at your solution and all looks great, semantic HTML, well organized and structured.
The improvement on the HTML could be to use a <picture> tag which allows you to use the <source> tag to switch in between the two main images. It works a bit as a media query where you can set a break point <source media"(width: 650px)" srcset="...">
In the message page you could also show the actual email address of the user using a span in the HTML and then display it with javascript.
I hope this was useful.
Marked as helpful1 - P@JairRaidSubmitted about 2 months agoWhat challenges did you encounter, and how did you overcome them?
The challenge for me is to create this little animation for the share links.
What specific areas of your project would you like help with?If someone has any suggestion to easily animate this "share links" please share the code.
P@Kiara523Posted about 2 months agoHello there, I'd like to let you know that thanks to one of your comment on somebody else solution I was able to find the error in my code...
The problem I was having it was for the
overflow:hiddenthat wouldn't allow the popup to be on top.At the moment the GitHub server is having problems so I cannot look at you solution
I'm sorry...
0 - P@aysenurtatliSubmitted 4 months agoP@Kiara523Posted 4 months ago
Amazing job in my opinion, I had a look at your code and I find it very well organized.
I liked how you took advantage of flexbox and use it to center the main section all at once.
The webpage is very well done and on moblie looks good as well. A way to implement it would be to create variable for the font size using relatives units and clamp so that you do not need to rewrite the font size in the media queries.
Code is clean. Good breakpoint choise.
Great job!
Marked as helpful0 - @lordagSubmitted 4 months agoWhat specific areas of your project would you like help with?
I'm trying to get better with semantic HTML and aria attributes
P@Kiara523Posted 4 months agoGreat work! I found your CSS very organized and clean! More relatives units could have been applied though.
The HTML it's good, for Semantic you did very well using section and article where you could, it's important for browsers and screen readers to use headings starting from h1(only 1 per page) and then the others, as many as you need.
Happy coding 😎
0 - @developertaskinSubmitted 4 months agoP@Kiara523Posted 4 months ago
Your solution looks good and pretty close to the original one. The variable are very well organized and easy to read, also you ahve named the classes is pretty clear way. I would suggest to keep specificity on the same level as much as possible to avoid rules to be overridden by using more specific name for the element itself, an example the ".header h2 " it has an higher specificity, but giving it a class name would lower it, example header__title.
Giving specifics width and height it can be dangerous as you did here.. '#container { width: 1272px; height: 735px; display: flex; flex-direction: column; justify-content: space-between; }' give a max-width and let the browser figure out the height can be a possibility, it helps with responsiveness.
Great job over all. Well done!! I enjoying seeing how the same project can have different solution...
1 - @NeoV10Submitted 4 months agoP@Kiara523Posted 4 months ago
Very nice looking solution...
You could implement it using BEM naming convention, its a way of naming classes that helps with organization, readability and reusable component (https://www.geeksforgeeks.org/understanding-the-css-bem-convention/ this is just a link to an article, but there are plenty out there)
Also..It is good to have general reset at the beginning of the css style sheet like setting margin and padding that comes with the browser default to zero (
*(this selects all) { margin:0; padding:0; box-sizing:border-box}), another very useful one is to reset the img (img { diplay:block;}) this will help with the white space showing below the img that is because it is an inline element.Marked as helpful0 - @kdugasparSubmitted 5 months agoP@Kiara523Posted 5 months ago
It has some differences from the original design but it looks good and efficient on large screen and also on mobile.
I do have some suggestion to avoid the white space below the image, set the image display:block or inline-block and it will make it disappear.
The html article tag should be used with an article that can stand alone in an other web page and still make sense on his own. It's ok if it is not possible to use all the semantics tags when the content doesn't allowed (lack of headings for example).
Something I use to check the html and CSS file is the w3validator page, it's very useful, for CSS go to: https://jigsaw.w3.org/css-validator/, for html go to: https://validator.w3.org.
0 - @Suleiman-OzSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
design to code
What challenges did you encounter, and how did you overcome them?to understand readme-temp;ate.md
What specific areas of your project would you like help with?#flexbox
P@Kiara523Posted 5 months agoHello, overall the project looks good, although there is always room for improvement.
I can only see one of the three layout, I believe there was a different layout for mobile, desktop and laptop, try using relative units (rem, em, %) and media queries can help you make the page more responsive.
Setting a width and a height (.card) to something can compromise the responsiveness of the page, if you can try to go for min-width/min-height or max-width/max-height instead.
I believe that using a display: flex for the body it would have made it easer to center the card and also to align the items within. Make sure that the flexbox has enough room to move if you want to center something. You can have a flexbox inside another flexbox and so on..
For CSS there are very good resources out there, here are some that I use: w3schools webpage, MDN Mozilla developers webpage, Kevin Powell has a you tube channel with plenty of CSS explanation.
The readme-template is a guide on how to fill it up, you have to modify the generic text with your own info, for example replacing the live URL link etc. If you use VSCode when you open the readme file at top right corner there is a button that looks like a book with a magnifier, press it to see the preview of the file, it might be helpful.
I hope that my feedback was useful... let's keep up the good work! 👍
0 - @AeroBWSubmitted 5 months agoP@Kiara523Posted 5 months ago
Well done on the mobile Version. I like the fact that it does not scroll at all, beautiful!
0 - @arthuvinciSubmitted 5 months agoP@Kiara523Posted 5 months ago
It looks a bit different from the original one because I kept the additional copyright message.
0
