Skip to content
OverviewSolutions
9
Comments
27
Nebiyou Ersabo
@NebiyouErsabo

All comments

  • Alain•205
    @Alain-sysSubmitted over 3 years ago

    Hello everybody,

    I'm glad to present my first project solution on Frontend Mentor.

    Any feedback is welcome and very appreciated !

    Maker pre-launch landing page

    3
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Hello Alain-Sys,

    I think you have done a great job on this challenge. Your page is nicely responsive as well 👍.

    I was having some problems when inspecting your page for responsiveness on chrome (the .img-hero-right and the .footer-squiggle svgs were extending way far to the right, making your page align to the left), but it was okay when I opened your page on safari. Not sure if it is my problem or that you haven't used some cross-browser css properties.

    But overall you have done an awesome job on your first project! 🙌

    Marked as helpful
    1
  • Vanza Setia•27,775
    @vanzasetiaSubmitted over 3 years ago

    Hello Everyone! 👋

    I was doing this challenge on my Android phone. Hopefully, it looks good on your deskop. 😅

    Questions:

    • I struggled with the footer layout, but this is what I've come up with so far; do let me know if you have any recommendations!
    • I am not sure about the accessibility of this solution. So, feedback on the accessibility part is appreciated!

    Of course, any feedback is appreciated!

    That's it! Happy coding everyone!

    Fylo Dark Theme Landing Page HTML5 CSS3 Sass

    5
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Hey Vanza 👋,

    I looked at your solution on my PC and it looks great and nicely responsive! I've a few suggestions design wise though.

    • First i suggest you to reduce the max-width of the header description to somewhere around 35rem.
    • I also suggest reduce the font of the features description to either 0.875rem or 1rem. And set a max-width of 25rem. Then to align everything, maybe add align-items:baseline; on the features__list container.
    • For the the testimonial__card you need to add some more padding to the sides. Something like padding:1.5rem 1.7rem; Also, perhaps make the testimonial__text margin for bottom only (instead of top & bottom like it is right now).

    Other parts look awesome as far as I can see, well done! I also worked on the same challenge recently, you can def take a look at it and let me know what you think. https://www.frontendmentor.io/solutions/fylo-dark-theme-solution-PYxlNFkZR

    Marked as helpful
    1
  • Lester Niel Fong•50
    @Lester-FongSubmitted over 3 years ago

    I made the desktop design in just one day, but it took me 2 days to make it responsive. Is there any tips for me to apply to think responsively? I find it hard to make my ddesktop website compatible to phone or other devices.

    VS Studio HTML CSS Git Github

    2
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Hey bro,

    I gotta say you've done a great job for desktop view. However, everything looks a bit broken below 1200ish px (mobiles and tablet views). There is some more work that needs to be done on making it responsive.

    Again great job on yours!👍

    Btw, I also just finished the same challenge few hrs ago. you can def check it out and help me with my issues if possible (https://www.frontendmentor.io/solutions/fylo-dark-theme-solution-htmlcssflexboxgrids-c1HhQJkG2).

    0
  • Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    looks great (funny with them links on the buttons too)! The hover effects are missing tho

    Marked as helpful
    1
  • Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Hey there, Your solution looks good. You just have to import the the font provided in the style guides.

    0
  • Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    I mean it looks okay for a desktop view. But it is not responsive tho.The content and the images are overflowing. I suggest you use flexboxes and grids next time.

    Marked as helpful
    0
  • Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Great job! What you did works just fine for the background SVGs 👍

    0
  • Philip Droubi•575
    @Philip-DroubiSubmitted over 3 years ago

    Hey everyone 🙋‍♂️, this is my solution for Huddle-landing-page challenge, please Take a look at my solution and tell me your feedback. thanks :)

    HTML and CSS huddle landing page

    2
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Hey there, It looks really good. My one suggestion would be to set a max-width for the image and the contents, because the images gets unnecessarily big and the content gets highly stretched till the screen reaches the 767px breaking point.

    0
  • Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Looks great! Yes, this challenge doesnt need js. My only suggestion would be to add a margin-top on the attribution to create some space. Also you're meant to fill in your name in the coded by section 👍

    0
  • ToNisamBioJa•330
    @ToNisamBioJaSubmitted over 3 years ago

    Hii!

    I would really appreciate if somebody looked at this one for me!

    I used the BEM naming convention and I paid attention to make the code readable and clean. I also ordered declarations by type(position, display, colors, font, miscellaneous…).

    This one was trickier for me than I expected. The background image was a problem for me but I managed to complete it on my third try.

    I tried hard to get it to the original design but I still didnt manage to place the social links where I wanted. But I think its still pretty close to the original one.

    I went with a mobile first approach as always and on mobile I think I got it very close to the original.

    On a previous challenge somebody pointed out that I dont use box shadow and hover effects enough so I added some on this one(just something simple). I need to learn animations more and I apply them to these designs more.

    On the design comparison it shows it a little different than it is when you preview the site :/.

    Sorry for the long text on such a simple challenge.

    All feedback is appreciated as always. Thanks in advance!!!

    Mobile first huddle landing page with scss

    3
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Great job here! Just add cursor:pointer on the social icons and you're good to go.

    I think you nailed this one! 👍

    Marked as helpful
    1
  • Sebastian•10
    @iamseb1Submitted over 3 years ago

    My first ever lines of independent code!!!

    Overview

    After learning basic HTML/CSS, I've decided to try my new-learned skills with real life challenge. To do that I've used https://www.frontendmentor.io which turns out it has a large number of real-life scenarios.

    The challenge

    The card even though seemed to be a fairly easy challenge, soon created quite a lot of problems. Things that I've learned from my previous endeavours went out of the window as soon as I sat down in front of my code editor. I found it really hard to code everything to spec. Most of the things were breaking as soon as I started a new line of code and I had to go back multiple times and google for solutions.

    Even tough I didn't manage to completely finish the challenge I'm quite happy with how it turned out. I have definitely learned a lot and will be definitely trying out new challenges soon... but for now, back to the drawing board.

    Screenshot of the final design

    (https://cdn.discordapp.com/attachments/260729565217947648/855458257978785792/Screenshot_2021-06-18_at_15.45.25.png)

    ORIGINAL CHALLENGE https://www.frontendmentor.io/challenges/stats-preview-card-component-8JqbgoU62

    Links

    My process

    First I've tried to lay everything out. Put some of the text into h1,h2 and p tags. Later on I've started to style everything which turned out to be a huge mistake, as the card website soon started to break apart. I've decided to go back and work on the structure of my HTML code, so I've googled around and decided to focus on putting my code into flexboxes using div tags. As it turned out the div tags actually helped alot and website started to look like the image I was given for this project. Unfortunately, I managed to break something along the way, as when I was styling the text, boxed, etc. the site was putting additional padding everywhere else. Definitely will have to look into it.

    My first ever lines of code

    1
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    Great attempt bro, looks great for the first time. I suggest you learn more about css flexboxes and grid. Those are the ones that you use here for styling and making the page responsive. Again great job, and keep coding!🔥

    0
  • visualdennis•8,375
    @visualdennissSubmitted over 3 years ago

    Any feedback is appreciated. Using an image in a flexbox was a bit tricky when it came to responsive design, as preserving the correct ratio of an image was not easy at different widths. I've included therefore tablet version as well. I wanted to have in the desktop version, an flexible image size, while for tablet and mobile fixed image size. So when i added fixed max-widths to image size in that browser-width range, i couldn't get an flexible image on desktop version that keeps also the flex ration (flex: 56% for img, flex: 44% for text-block). I ended up doing fixed image sizes for all version, but if has a suggestion about how to have flexible image that grows and shrinks on desktop version and still have fixed image size in mobile version, please let me know. thnx

    Mobile-first using Flexbox

    2
    Nebiyou Ersabo•185
    @NebiyouErsaboPosted over 3 years ago

    looks great! try to include the social media link/icons in the footer tho

    0