@Zeey76Submitted 11 days ago
Hossein-H-I
@Hossein-H-IAll comments
- @Ejiro-FrancesSubmitted 20 days agoWhat are you most proud of, and what would you do differently next time?
I am proud of the project outcome.
What challenges did you encounter, and how did you overcome them?Challenges include:
- Using the json file. I did not eventually use it and I would learn more on how to use it.
- converting font size from px to rem in sass was a bit tricky as '/' was an issue. I used sass maths instead.
- I was unable to use grid-areas in Sass. A solution to this would be greatly appreciated.
- I would also like a code review with pointers on how to improve my code.
- Finally, I'm wondering if it's possible to use wrap in grid or if I have to use auto-fit or minmax?
@Hossein-H-IPosted 20 days agoHi my friend everything is fine in your solution but if you add some code to your CSS, it can be more better. for body add these code : min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; and for main tag add some max-with for example this code: max-with: 900px ; or anything you want to prevent container from getting too width value
0 - @ZoeLong98Submitted 3 months agoWhat are you most proud of, and what would you do differently next time?
First time to practice js
What challenges did you encounter, and how did you overcome them?don't know how to pass variable between html solved by using localStorage
What specific areas of your project would you like help with?more JS method
@Hossein-H-IPosted 30 days agoHello my friend your solution in desktop and mobile devices looks pretty the same to design. but there is some problem with tablet devices or screens sizes like that.
another thing is:
@font-face Declaration
Issue: The format values for the font URLs are incorrect. The correct format for TTF files should be format("truetype") instead of format("ttf"). Correction: css@font-face {
font-family: "roboto";
src: url("assets/fonts/Roboto-Bold.ttf") format("truetype"),
url("assets/fonts/Roboto-Regular.ttf") format("truetype");}
Marked as helpful1 - @Hossein-H-ISubmitted about 1 month ago
- @Fikerte-TSubmitted about 1 month ago@Hossein-H-IPosted about 1 month ago
Everything is OK but when I want to click on the button the share-box doesn't remove
0 - @LonlysoftSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
Now I decided to go for a desktop-first approach. And I also changed IDEs so now I don't need to go for inline SVGs. It was also my first time putting the CSS grid to work. It was pretty easy to do it with the grid-area and even made it quite responsive in desktop mode. I think I will use it more often when I decide to go for a design that It's needed to nest a lot with flexbox.
What challenges did you encounter, and how did you overcome them?The quotation SVG is something that I struggled with. At first I thought that it was an
position: absolutestuff. Because it overlaps the text. I did it, but it looked off and made the text ""blurry"". Then I tried dividing the content in HTML to use z-index, but no matter how I tried the SVG refused to go to behind the text. So then I remembered thebackground-imageproperty. That makes an image be behind text by default. After that, I used it and it was just a matter of setting values of position and no-repeat to get the design right.@Hossein-H-IPosted about 1 month agoHi well done Everything is good on mobile devices. Using ' grid-template-areas: 'a a b c' 'd e e c'; ' is a verey special idea. But if you like to do it in another way that is easier to do, is to use grid-template-columns : repeat(4,1fr) and use' grid-column: span 2 ' for those section that are biger than the others, also for the right section you can use grid-row: span 2;.
1 - @Djamel1133Submitted 3 months ago@Hossein-H-IPosted about 1 month ago
Hi well done, everything is fine. but there is some issue on mobile device that you can fix it by set the grid-template-columns to 1fr
Marked as helpful0 - @JPcaitumSubmitted about 1 month ago@Hossein-H-IPosted about 1 month ago
Hey I really like solution. everything is fine, but there is some issues in tablet size with header that can be fix. but mobile and desktop is Ok
Marked as helpful0 - @PDineshMuruganSubmitted about 2 months ago@Hossein-H-IPosted about 2 months ago
Hey, I really liked the creativity in your presentation. I think if you do this with grid instead of flexbox it can be better
Marked as helpful0 - @dearestalexanderSubmitted 2 months agoWhat are you most proud of, and what would you do differently next time?
Took my time with this one and came back to it a few times over a couple of weeks. I guess it's a fairly simple exercise, but I tried to focus in on a few areas:
- Making use of what I think are correct HTML tags
- Ensuring CSS is well structured with block element method naming
- Making use of variables and responsive units of measure
- Testing from the begining with 320px in mind
- Adding comments to html and css to explain the approach.
Nothing significant, a bit of reading up on formatting list markers and the different ways to do it, and I had to look up table formatting guidelines.
What specific areas of your project would you like help with?For some reason I couldn't seem to get the 'Outfit' font to apply to the ordered list markers. It seems to show up when inspecting, but the actual digits displayed look wrong.
- @Djamel1133Submitted 2 months ago@Hossein-H-IPosted 2 months ago
I used media queries and flex box to build this project.
I'd love to hear any suggestions you might have.
0 - @WhyEmBeeSubmitted 2 months agoWhat challenges did you encounter, and how did you overcome them?
the only problem i had was with the hosting, as you could see i dont know why github didnt read the picture files and when i use git i get 404 page not found sadly
@Hossein-H-IPosted 2 months agoI used flex box to create this project if you have any advice for me, feel free to share it.
1
