Skip to content
OverviewSolutions
10
Comments
12
Hossein-H-I
@Hossein-H-I

All comments

  • Ejiro Frances•190
    @Ejiro-FrancesSubmitted 7 days ago
    What 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.
    What specific areas of your project would you like help with?
    • 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?

    Time Tracking Dashboard

    1
    Hossein-H-I•200
    @Hossein-H-IPosted 7 days ago

    Hi 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
  • Zeyu Long•60
    @ZoeLong98Submitted 2 months ago
    What 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

    newsletter sign up with success message

    1
    Hossein-H-I•200
    @Hossein-H-IPosted 17 days ago

    Hello 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 helpful
    1
  • Hossein-H-I•200
    @Hossein-H-IPosted 22 days ago

    Don't miss the mobile version.

    0
  • Hossein-H-I•200
    @Hossein-H-IPosted 22 days ago

    Everything is OK but when I want to click on the button the share-box doesn't remove

    0
  • Vynny LonlySoft•160
    @LonlysoftSubmitted 27 days ago
    What 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: absolute stuff. 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 the background-image property. 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.

    Testimonials (desktop-first approach)

    1
    Hossein-H-I•200
    @Hossein-H-IPosted 26 days ago

    Hi 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
  • Hossein-H-I•200
    @Hossein-H-IPosted 28 days 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 helpful
    0
  • Hossein-H-I•200
    @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 helpful
    0
  • Hossein-H-I•200
    @Hossein-H-IPosted about 1 month 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 helpful
    0
  • Alexander Roan•110
    @dearestalexanderSubmitted about 2 months ago
    What 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.
    What challenges did you encounter, and how did you overcome them?

    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.

    Responsive recipe page with vanilla HTML & CSS (BEM naming)

    1
    Hossein-H-I•200
    @Hossein-H-IPosted about 1 month ago

    Nice ! .

    1
  • Hossein-H-I•200
    @Hossein-H-IPosted about 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
  • WhyEmBee•50
    @WhyEmBeeSubmitted about 2 months ago
    What 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

    blog preview card

    3
    Hossein-H-I•200
    @Hossein-H-IPosted about 2 months ago

    I used flex box to create this project if you have any advice for me, feel free to share it.

    1
  • Hossein-H-I•200
    @Hossein-H-IPosted about 2 months ago

    say your opinion

    0