Skip to content
OverviewSolutions
9
Comments
9
P
Michał
@miedzygalaktycznygit

All comments

  • Taiwo Sumayyah•150
    @Sumta4realSubmitted 7 days ago
    What are you most proud of, and what would you do differently next time?

    Finally getting hang o responsive design

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

    I was not able to style the bottom component as required. And I also had chellenge with uing javascript to change the compnents of the bottom div

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

    I would appreciate help with my getting better on Javascript, any recommendations on practical hands on tutorial or useful books. I woul also appreciate corrections on best way to style the bottom div

    article component slution

    1
    Michał•140
    @miedzygalaktycznygitPosted 6 days ago

    Hello, I’m not sure if my way is the best because I’m also just starting to learn, but I just made another div for socials, and with JS, I made it pop up on the screen when a button is clicked and disappear when clicked again. On the mobile design, I made the div with the photo disappear and replaced it with socials.

    
button.addEventListener('click', () => {
    if (mediaQuery.matches && !landscapeQuery.matches) {
        divPersonalInfo.style.display = 'none';
        divSocials.style.display = 'flex';
    } else {
        if (isToggled) {
            divSocials.style.display = 'none';
        } else {
            divSocials.style.display = 'flex';
        }
        isToggled = !isToggled;
    }
});

button2.addEventListener('click', () => {
    if (mediaQuery.matches && !landscapeQuery.matches) {
        divSocials.style.display = 'none';
        divPersonalInfo.style.display = 'flex';
    }
});
    • You can look on my code and feel free to use it to try to improve Your website.
    • And I think that You have small mistake that's making this bottom div looks weird
    background: linear-gradient(to bottom, white 90%, hsl(217, 19%, 35%) 100%);

    You simply write "background-color" and You should udes "background" instead

    • I hope that You can find my message helpful and I wish You best in Your future projects.
    0
  • Michał•140
    @miedzygalaktycznygitPosted 25 days ago

    Very well made page and I really like your creativity in terms of additional design. Good luck in your next projects

    0
  • Michał•140
    @miedzygalaktycznygitPosted about 1 month ago

    You did a very good job on this project and good luck on Your next projects

    Marked as helpful
    0
  • youngimmortal-p•100
    @youngimmortal-pSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of being able to use CSS Grid to build a responsive layout especially with the Grid-template-areas.

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

    One challenge i encountered was using the @font-face property after i downloaded it, but i was able to use it by reading about web-fonts on W3schools. Another challenge was using the justify-items and align-items property to manipulate grid items, thanks to Webos for his comprehensive course on CSS Grid which helped me to understand how to use Grid.

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

    Any idea on where i can improve will be much appreciated

    Responsive Card page using CSS Grid

    1
    Michał•140
    @miedzygalaktycznygitPosted about 2 months ago

    Hello Your project looks good but I have some ideas for You to test out.

    • Try to use "sass" next time it may inprove Your cooding
    • Try to make Your cards not changing size while website size changes I personaly made it by using (height: rem; and width rem;) so Your cards will always be the same like in design
    • Using the "font-display: swap" property in the @font-face rule improves page performance. Instead of waiting for a custom font to load, the page displays text using a fallback font
    0
  • petemac281•220
    @petemac281Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Overcame a few challenges and got a pretty decent result

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

    n/a

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

    n/a

    Responsive Product Page

    2
    Michał•140
    @miedzygalaktycznygitPosted about 2 months ago

    Looks good to me,
    You did a good job keep it up

    0
  • M Asim Saeed•270
    @asimsaeed353Submitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm glad I have started using global variables, and utility classes and tried to achieve more with a smaller number of lines of code.

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

    I find styling list-style elements a bit tricky but I'm glad I managed to solve it using

    li::marker{}
    What specific areas of your project would you like help with?

    I'm trying to learn more about spacing across different devices.

    Recipe Page using CSS

    1
    Michał•140
    @miedzygalaktycznygitPosted about 2 months ago

    Hello

    • First of all You need to set min-values like "min-height:" and "min-width: ;" this will prevent Your website to escape of the screen when You swith to smaller device.
    • For some basics in case of @media here is video that helped me in understanding this link_to_yt
    • I hope that You find my advice helpful
    Marked as helpful
    0
  • Michał•140
    @miedzygalaktycznygitPosted about 2 months ago

    Hello. First of all You do very good job with styling Your website and its look very similar to design.

    • My advice to You is to stop using px to position or style Your objects on website because they can bring some issues like when someone dont see things well he might swap his font size to large and on Your website nothing will happen, try to use rem instead and here is the video explaining why You shouldn't use px link_to_yt_video.
    • Hope You find my comment helpful and i wish You best with Your upcoming projects.
    0
  • Michał•140
    @miedzygalaktycznygitPosted 2 months ago
    • You should not use units like px and instead use units like rem.
      Example for code:

    .card .topic { font-size: 19px; }

    • here is a link to yt with an explanation of the topic
    • link
    1
  • Michał•140
    @miedzygalaktycznygitPosted 2 months ago

    You need to make a bit smaller space between qr code and text container and it will be perfect. I also saw that if webside is to short vertically to fit content it end up getting cutted. My advice to this problem is setting minimal height to the size of your content

    0