Skip to content
OverviewSolutions
10
Comments
12
ijohnst
@ijohnst

All comments

  • Caelus•520
    @Caelus111Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud in general of this project, it's a stepping stone of coming projects that will need to be professional and wrote in with a deadend limit. And I would do the JS better next time I have better understanding of DRY coding, but for now this is my solution... 😊

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

    I did the project normally (large screen and then phone), but it didnt work well, the layout would jump when I change the window's width... but when I built the other way around in turned out great. in the end it's just how to think out of the problem and keep calm... dont panic. 👌

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

    I would love a rewrite of JS with a DRY code that doesn't have alot of repeats of same code doing same thing... but overall any advices are welcomed. 😁

    A time tracker dashboard.

    1
    ijohnst•230
    @ijohnstPosted 5 months ago

    Your way certainly works, good job.

    0
  • Lara Mesa•180
    @Lara-artSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    I’m really proud of this CSS code because I made it mobile responsive without using any @media queries.

    h1 {
    font-size: clamp(2.2rem, 1.986rem + 0.571vw, 2.5rem);
}

.container {
    max-width: 1440px;
    margin: auto;
    padding: 2rem;
    display: grid;
}

    Using place-content: center, I was able to align and justify it both vertically and horizontally.

    .container {
    display: grid;
    place-content: center;
}
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge for me was not using @media, instead relying on relative units, and making sure everything was centered on the screen.

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

    I’d like to know if this is actually the right way to do it to avoid using @media. Also, how can I improve my CSS writing skills?

    QR-code-component

    2
    ijohnst•230
    @ijohnstPosted 5 months ago

    First of all great work, you definitely got it working. To add on to the other comment you really don't need grid or flex on your container and you don't need the unnecessary divs you have throughout the HTML. All of these elements are going to be block elements so they will stack by default (you can see it if you write all the HTML and don't add CSS yet).

    Wrap your <img><h1><p> in an <article> and then let either some padding or margin handle the spacing.

    You can however use the grid, place contents trick on either your <body> or <main> (if you choose to wrap it in that) to center the content. But inside the card you should avoid the divs and flex for now. You'll have plenty of opportunities to use them in the later challenges.

    Marked as helpful
    0
  • Jan Kotvaš•290
    @DrakeHermitSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    This is the second time I finished this challenge and I wrote my JS way different this time, and added a new feature to it(automatic error state remover). So I suppose that I could redo this challenge every so often as my JS skills improve and all the time the solution would be different to a degree.

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

    I faced different kind of challenges all that I would overcome by researching topics or watching videos. The biggest problem I faced and didn't manage to overcome was the fact that I wanted to store the current state of the html in a variable which sort of worked but it didn't store the CSS itself for some reason. But this is something I will do my best to learn for the next challenges that are coming up.

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

    Just general code review for my JS code and how I styled the page with CSS. I still have a ton to learn from my mistakes.

    Newsletter signup form with JS validation

    1
    ijohnst•230
    @ijohnstPosted 5 months ago

    First of all great work!

    One thing that might help is to use the <picture> element to swap from the desktop to mobile image on mobile screen sizes (right now in mobile view you have the desktop.svg showing). This worked for me: <picture class="signup--image"><source srcset="./assets/images/illustration-sign-up-desktop.svg" media="(min-width: 55em)"><img src="./assets/images/illustration-sign-up-mobile.svg" alt="Illustration of a website dashboard and tablet"></picture>

    Just make sure the media attribute in there matches whatever breakpoint you are using for your media queries

    Marked as helpful
    1
  • Caelus•520
    @Caelus111Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    this is the first projects after a long haitus, so I am kinda pround of returning to making things with JS.

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

    the gray pop up was kinda hard at first but just with little thought, I got it

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

    I think I need help in thinking of the right sequence of doing the project... i get lost because i dont think about how I am gonna do X thing, I just do it without thinking...

    Article Preview Component

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    i like how yours came, especially after my own struggles. Couple of really minor things:

    1. The share button is missing the active state colors when pressed (like in the design).
    2. On the next project I'd suggest naming the main thing something easier to follow than 'container', just makes it difficult for someone who didnt write your code to read it

    Looks good though!

    0
  • Hussain Ahmed•300
    @hussain-ahmed2Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    testimonials-grid

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    looks good. I'd just make sure to use relative units (REMs or EMs) for your font size instead of px

    0
  • Alexdoom25•20
    @Alexdoom25Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    .I'm having difficulties with the SVG, but I'm close to designing it. Some points are not too good, but it's a great progress.

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

    Some with the SVG, specially in how to center in the div

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

    The div center

    Blog Preview Card

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    For the SVG you can use it simply as an image by putting it in an image tag <img src="/assets/images/illustration-article.svg" alt="Whatever you want your alt text to be">

    Then in your CSS make sure that you set the img { max-width: 100%; display:block } this should help with the responsiveness

    Marked as helpful
    0
  • BillRozy•170
    @BillRozySubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of making notebook size version as well. Css selectors might be less messy next time...

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

    documentation of css grid is fun, spent some time figuring out why 1 / 2 doesn't take rows 1 and 2 :)

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

    no

    Responsive landing using CSS Grid

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    looks good!

    0
  • Sadiki Benda•180
    @SadikibendaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to work on my first responsive project. despite all the struggle I will keep going

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

    working on mobile size was a bit challenging

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

    I would like to get help on how to set the mobile image given. how do you insert into @media querry ?

    product-preview-card-component-main

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    This is a great start for a first project. The way I got it to work using two different images (desktop and mobile) is by using a <picture> element and a <source> element with an srcset attribute that points to the desktop image and a media attribute that points to your media query.

    Read more about it on MDN

    0
  • F-L-D-B•60
    @F-L-D-BSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud I was able to do most of this on my own. I really was quick with getting the HTML sorted and the CSS structure going. Next time I would like to possibly somehow do a table instead of a grid for the items at the bottom.

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

    I didn't have to many challenges in this one.

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

    none

    recipe-page-main

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    Looks good. I'd suggest using REM or EM for the font sizes. the 12px fonts on desktop look really small. Otherwise good stuff

    0
  • raheem king•80
    @Raheem-kingSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    mixing grid and flexbox

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

    deciding what layout to use from either grid or flexbox then decided to use both

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

    none

    social links profile using grid and flexbox

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    I think using the recommended font "Inter" would take this up a notch. Also the buttons/links need some kind of hover state to stand out. From a layout perspective though its spot on, good stuff

    Marked as helpful
    0
  • ijohnst•230
    @ijohnstPosted 6 months ago

    Looks good but its not yet responsive. When I drop it down to a mobile size the card is getting cut off. You want to aim to make it a maximum of 327px wide with 24px padding between the card and the edges of the screen up until a 375px viewport.

    0
  • Nour Hamed•10
    @NourCodeWizardSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    centering div using flexbox

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

    centering div, make it usable for mobile. I used flexbox

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

    Is applying flex on the body a good choice? can you suggest the best solution for centering the div? and making 3 divs one containing text the other containing an image with text div and the third container containing all of them (card) is this a good solution and thinking about how to write the structure of design?

    layout using flexbox

    1
    ijohnst•230
    @ijohnstPosted 6 months ago

    Looks good to me. I'd suggest using relative units (rems or ems) for things like font size and padding, it helps with the responsiveness. Other than that great work

    Marked as helpful
    0