Skip to content
Submitted about 4 years ago

Huddle Single, CSS and HTML (Desktop first, Mob second)

Robert McGovern•1,095
@tarasis
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

First attempt at anything like this.

Spent far too long using diffchecker to compare the design image and an output grab from chrome. You can see mob-img-diff-1.png & img-diff-2-desktop-near-enough.png in the work-through directory in the repo to see how close I ended up (there is some mild diff because of the image quality, the illustration mockup has slight diff colors in it, likewise the background)

With positioning like this, is it better to use %, rem, or px?

I tried using 700 weight for the header "Build the ...." but it never looked right. Nor does 400 but it's close enough. What should have it been?

How best to get the fontbook-awesome images more central in the circles?

How close should I be looking to get?

Community feedback

  • David Omar•580
    @davidomarfPosted about 4 years ago

    Hi Robert.

    This is really the closest I've ever seen someone replicating a layout. Kudos for that dedication and attention to the details.

    I didn't know about the existance of diffchecker. I'll give a look to it.

    And definetely documenting your process is really useful. It's something not everyone does, but should.

    About the website, I think it's better to take what a design "means", than what it literally looks like.

    For example, the design probably means that, in wide formats, the page should cover all the screen. Both in height and width. And that is a more powerful meaning that "The image should be Xpx wide and Ypx tall. This text should be Xpx wide and Ypx tall. There should be a space of Xpx between these two eleemtns".

    Along those lines:

    Try to limit the width of your components and to contain them at the center of your screen.

    If you're in Chrome, open the console with Ctrl + Shift + I and then press Ctrl + Shift + M to open the "Device Toolbar". With that, you can set custom resolutions and see how your page would look in a screen of that size.

    In your page, if you go to really wide resolutions, the text will appear in only one line. And it starts to lose its expected design.

    To prevent that, you can create a main container that will hold everything inside it. Then limits its size, and automatically center it.

    My favorite way to do that is with something like this:

    <body>
  <div class="main-container">
  </div>
<body>


body {
 display: flex;
}

div.main-container {
   margin: auto; // This centers it horizontally

  // This limits the width. 
  // So in ultriwide screens, it'll not grow any bigger than this.
  // And therefore, will keep the layout (e.g., the text not overflowing)
  max-width: 1280px; 
  
  // This is what the width will be on screens smaller than the max-width.
  width: 90%;
}

    I see you use flexbox, but some of the child elements of flex-elements are not restricted in the size they can take. This is useful to maintain proportions in different sizes.

    For example, to avoid the image taking more space than it should, you could limit its width. Just as before. And you can set it to percentages, too. And those percentages will be relative to what their parent width is.

    <div class="some-container">
  <div class="image-container">
    <img src="">
  </div>
  <div class="other-container">
  </div>
</div>

div.image-container,
div.other-container {
  // This will make both containers be 50% of the size of some-container.
  // It doesn't matter what's the width of some-container.
  width: 50%
}

div.image-container img {
  // This doesn't mean it'll take all the width, 
  // but all the width of image-container (which is half the size of "some-container") 
  width: 100%;
}

    And finally, check your "intermadiate" widths.

    Try not to restrict your designs to two resolutions. Make it work for in-between widths.

    Set at 650px wide, for example, only the image is visible. And it's overflown to the right.

    You can use flex-box, max-width, and width for that.

    Congrats for your solution. I'll definetely give diffchecker a try. It looks like this solution had a lot of effort behind it. Keep the good work!

    3
    Robert McGovern•1,095
    @tarasisPosted about 4 years ago

    @davidomarf fabulous comment David, thank you for taking the time to write all of the that. Lots of helpful tips & things I need to take onboard & digest.

    I did know that the in between states where less than ideal (esp the way the social buttons ended up in completely the wrong place between about 600-1200px wide), but felt I needed to stop and get feedback before I maybe went too far in the wrong direction.

    Reg "Set at 650px wide, for example, only the image is visible. And it's overflown to the right.". Ahh this is something I thought was a bug with Chrome. Sometimes, but only sometimes, when I used the 375x800 "device" it would do that too. The mockup would be huge and got right off the side of the screen. Sounds like its more a bug in how I tried to use grid.

    I had used the "Device Toolbar" but only really for the resolutions in the style doc (375 & 1440 wide), and using "responsive" to sometimes look at how it looked between the two. I didn't check to see how it looked at larger than 1440x800. My long winded way of saving, "noted, will adjust" :)

    Reg "better to take what a design "means", than what it literally looks like" I'll point to my comments to Emmilie & Emin.

    I need to go for now, but thanks again. I'll try and finish responding later and will make some changes based on your feedback <3

    1
    David Omar•580
    @davidomarfPosted about 4 years ago

    @tarasis It's very nice to see your thoughtful responses to every comment you received. That's important. Even more important than code, I'd say.

    Working as a developer is more about people than about code. It's important to communicate and get involved. You're definetely on the right track!

    I wish you the best of luck. I hope to see more of your work around here! :D

    0
  • Emmilie Estabillo•5,540
    @emestabilloPosted about 4 years ago

    Hi Robert, wow great job. Paying attention to detail has its rewards :-) I suggest you download the chrome extension PerfectPixel to superimpose your work on the design. That and access to the sketch files will take it to the next level. Another small thing is that I can't see the links on your footer. BTW, your work-through is a good starter for a blog. Hope this helps! :-)

    2
    Robert McGovern•1,095
    @tarasisPosted about 4 years ago

    @emestabillo Thanks Emmilie, I am grateful for your input and that extension will be super helpful. It would have saved me some roundtripping effort 🤣🖤.

    Mind set was "well I have the design doc, if thats what I'm handed to do, thats what I'm going to try and do. The designer has obviously chosen this combination for a reason". At some point I hope to do this to earn some money, I want to point and say if you give me a design, I will get as near as I possibly can.

    I've been considering the pro sub, but I wanted to get a couple of these exercises done first to see if I would definitely stick to working through them.

    Last about the work through ... thanks. thats basically the reason I started writing that doc. It might not be helpful to anyone else but its useful for me & if I can stay focused I will clean it up and post it as a blog entry.

    2
    David Omar•580
    @davidomarfPosted about 4 years ago

    @tarasis Yup! Definetely the biggest advantage of trying to set up a blog, is that writing helps you be more conscious of what you're thinking. And that you'll definetely re-read your own content for times when you're struggling with the same thing again, hahaha.

    0
    Mark Mitchell•1,820
    @markup-mitchellPosted about 4 years ago

    "well I have the design doc, if thats what I'm handed to do, thats what I'm going to try and do. The designer has obviously chosen this combination for a reason"

    This is an admirable attitude, and - broadly speaking - the right mindset to start with, but to echo some of the other commentators, designs are (and/or should be) malleable to a degree.

    What gets handed over for you to implement is an artifact of the design process; it's a document of the designer's intent, but they are just people and they make mistakes, and weird things happen with their tools that set things out of whack, and fonts render differently in different browsers... the list goes on and on!

    Sometimes there's a trade-off where you might say "I can do this, but it's fiddly and hacky and might take a day... OR we could do this other thing, and it'll take 15 minutes" and the designer's like, sure, that's fine!

    Other times the design and content might be impossible to square with good accessibility practices and you need to negotiate a solution that everyone can live with.

    1
  • Emin Muratoglu•190
    @scorpion61Posted about 4 years ago

    Hi Robert, good job on completing this. It looks very nice and works well with mobile. A small suggestion I d give you is it is not that important to make everything 100% exact same as mockup. I mean it should look same mark up, but a bit up / down slightly bigger / smaller doesn't matter. That's why you ended up with playing with margins a lot and waste too much time. Just my opinion. Great job again. Thanks.

    2
    Robert McGovern•1,095
    @tarasisPosted about 4 years ago

    @scorpion61 Thank you Emin <3 Noted about not aiming for 100% matching the mockup.

    I had felt, particularly as it was a first attempt, that I was given a design image and thats what I should do. The designer chose the layout they did, my job is to replicate it. My loose analogy is: it's not an editors job to change/rewrite an author's content. :)

    But I did waste way to long tweaking 🤣

    Thank you

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord