Skip to content
OverviewSolutions
10
Comments
7
P
Ahmed Lemssiah
@Arteque

All comments

  • Manove Kumar•100
    @Manove2003Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    i have learned alot things in that like property like order in css and many much things in that project.

    What challenges did you encounter, and how did you overcome them?

    i have learned alot things in that like property like order in css and many much things in that project.

    What specific areas of your project would you like help with?

    i have made it most easy and in react js so it may be helpful other has made it on next and other thing and using multiple library so i have made it easy.

    Space-tourism-multi-page-website.git

    1
    Ahmed Lemssiah•410
    @ArtequePosted about 1 month ago

    Hello, and congratulations on your achievement! This challenge is quite tricky, but I think you did a great job.

    Just a small tip: your website has an 8-pixel margin. Perhaps a reset on the body element could help?

    body{margin:0;}
    0
  • Alonso Vazquez•170
    @alonsovzqzSubmitted 9 months ago
    • I wasn't able to figure out how I can push the images on the "Technology" page to the very right of the page to make it touch the border of the browser. How can I achive that?
    • I have some weird bugs on the tabs in the "Technology" page and I had to make some minor adjustments in the code to make it work. Does anybody have an idea about how can I tackle that? (Sometimes it doesn't update the content and the image)

    Space tourism mobile-first solution using CSS Grid and Flexbox

    1
    Ahmed Lemssiah•410
    @ArtequePosted 9 months ago

    Hello @alonsovzqz, congratulations on finishing the challenge though 😉 I had a hard time with this one too 😕

    First Question: the picture alignment

    The 100% width in the index.css file on line 797 takes up all the available space, which is why justify-self: flex-end does not trigger. Changing the width to fit-content solves the problem, but you need to check the behavior in the mobile view. You can also add this as a media query though:

    @media screen and (max-width: /*your desired width*/) {
  .grid-container--technology > picture {
    grid-area: image;
    max-width: 100%;
   /* width: 100%;*/
    justify-self: flex-end;
   width:fit-content;
  }
}

    Second question: "the bugs"

    I think the problem with this project is the fact that there are 3 "Sliders" Style and as a dev, I tried to use as less Js as possible and css. That's why I opted for self-contained class names, at least I tried, with no nesting with the parents' element. Like so, I could place the element of the sliders where I wanted after displaying a grid element. I was too lazy and didn't take that much time analyzing the template designs... 😞

    You did a good job though. Just take time and read your code again, try to use global reusable classes.

    Marked as helpful
    0
  • Alejandro Cañon•260
    @alecanonmSubmitted 9 months ago

    Hi!, this was my approach to this challenge

    • I found difficult the importing way using @path/... instead of ../../path.
    • I am unsure of the way i implemented the dark mode i would like to know how to make it permanently one time i reload the page
    • i would like to know best practices of importing, name conventions, typescript and tailwind

    this is all, hope you having a good day 🌱

    regards, Alejandro

    Responsive Country web using grid, flexbox, React and Typescript

    1
    Ahmed Lemssiah•410
    @ArtequePosted 9 months ago

    Hello Alejandro,

    I loved this one too. Pretty challenging though. I'm not an expert, but I'll try to help :D (I mean, you used React, and I know so little about it).

    For the dark mode, I used the localStorage option!

    Here is my way:

    When the dark mode button is triggered, I check for the dark mode value in the localStorage. If it doesn't exist, I'll save the dark mode value to the localStorage.

    When the light mode is triggered, I check if the dark mode exists in the localStorage. If it does, I'll remove it.

    I added a DOMContentLoaded event to check if the dark mode exists in the localStorage to decide which color mode the page will use. Perhaps there are some gurus here to correct or validate this method.

    // Set dark mode in the localStorage
localStorage.setItem("theme-mode", "darkmode")

// Get the dark mode item
localStorage.getItem("theme-mode")

// Remove the dark mode
checkDarkmodeExist() && localStorage.removeItem("theme-mode")

    Hopefully, I could help.

    Regarding the global considerations:

    In the desktop view, you need to use a maximum of 4 cards in a single row. If the cards have more width, the flags are going to render much better.

    Keep up the good work and take care though ;)

    Marked as helpful
    0
  • Ahmed Lemssiah•410
    @ArtequePosted 9 months ago

    Hello Hassan Moataz, Congratulations on finishing the challenge, though. I noticed in the mobile view that the pseudo ::after element is causing a scroll on the x-axis. Perhaps setting right: 0; could be better?

    Marked as helpful
    0
  • Tolulope Oluwabukunmi•240
    @TheTreeveloperSubmitted 9 months ago

    I need help!

    I'm not sure I understand how responsiveness works. I get confused because I don't know if I am to do a media query for every screen size or not, I don't know what the "standard" is. Also, I can't seem to align my form to the left, I'm at wits end. Any help and feedback to help me improve would be greatly appreciated! Thank you.

    Responsive page using CSS

    1
    Ahmed Lemssiah•410
    @ArtequePosted 9 months ago

    Hello Tolulope Oluwabukunmi,

    First and foremost, congratulations on completing your challenge! 😊

    In your code, you've already used media queries in the right way, I think. The idea is not to use Media Queries for everything. Most of the time, it means that your HTML structure needs improvement. Block-level DOM elements like divs, sections, headers, paragraphs, and headings are by default taking up all the device width. That's why, and you did it right, I think, we start with mobile-first when we code web apps. The breakpoints are to be used when your layout breaks in the browser: for example, when images are way too big and blurry, or paragraph tags are way too large and hard to read for the users.

    • Now onto your form :D

    The fact that you used flex-direction: column in style.css line 58 has rotated the axis of your flexbox. That means that align-items is affecting the "X" axis now - normally the "justify-content" would do that. In this case, I would write my code like this:

    .form { display: flex; /* flex-direction: column; / / align-items: center; */ justify-content: center; margin-top: 1.5rem; margin-bottom: 0; padding-bottom: 0; }

    And for the desktop view (in your case):

    @media screen and (min-width: *****px){ .form { justify-content: unset; } }

    I hope this helps a little bit 😊.

    My advice is to take more time at the beginning of your coding by analyzing your design carefully and thinking about which HTML structure is the best to use to recreate the current fraction of your design system, and how you are going to make the transition between mobile design to tablet to desktop. The best advice is to try and try again, though.

    Marked as helpful
    0
  • Ahmed Lemssiah•410
    @ArtequePosted 9 months ago

    Hi Youcef Laala,

    Though I don't know if it's just me, but for me, there was no margin-inline: auto; for the divs. Everything is on the left side. Perhaps you need a container element for all the elements or something like: body { width: fit-content; margin-inline: auto; } On the mobile view, the control arrows are floating in the middle of the screen. Take care tho ;)

    0
  • Ahmed Lemssiah•410
    @ArtequePosted 9 months ago

    Hello Matheus,

    There are some issues with your <a> tags and hovering behaviors. I think you have to use padding on the <a> tag elements instead of the <li> elements. Some images do not show up. Perhaps check the paths again. Keep it up. It's pretty nice.

    Marked as helpful
    0