Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions9Comments25

All comments

  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi the solution looks great and it's responsive here are a few things that you might wanna look into :

    • The loading takes unusually, I really don't know why this is but the api isn't that slow in sending data.

    • Search work properly only when the region is set to all regions.

    • Borders on the details page get messed up sometimes, where i can't even view countries that do have borders.

    • Dark mode doesn't work for me even though i can see the buttons.

    I did this same challenge a while back maybe it might help you, here is the link.

    Hope this helps.

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, I can't really see your code maybe you entered the wrong link there but what you could do is put the whole section into a <div> and give it a class .container then specify the width of the container using CSS i.e. width: 800px or whatever value you wanna give it then use position : absolute to centre the element also you can use flexbox to centre the elements.

    0
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, the solution looks great and i love the theme switcher especially, here is a few things you can tweak:

    • The region filter doesn't let me switch back to viewing all countries, maybe add an option for that.

    • If i click on the border for a given country then their is no way for me to see go back an see all countries since it only shows me the country that i clicked on.

    • When clicking on the borders the page should automatically show me it's details.

    • When i click on a random country in the beginning and start scrolling on the details page i can see the main page scrolling for some reason.

    These are the things that i noticed while looking at the site, I did this same solution a while back you can checkout my solution here.

    Hope this helps.

    2
  • Mohamed Abusrea• 160

    @mohamedabusrea

    Submitted

    This challenge was tricky especially with the responsive because the images don't have the same size so I tried some workarounds to solve this issue and make it looks good. Also, it's a PWA which means its installable and works even in offline mode. Feedback is much appreciated 😊🤓

    REST Countries API using React

    1

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hey, good job on the project here are a few things maybe you could fix:

    • The borders on the details page are supposed to take you to that page, basically they are supposed to be links.

    • Okay there are way to many html and accessibility issues maybe fix those.

    I did the same project using react, you can check it out here.

    Hope this helps.

    0
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, functionality wise the site works but their are a few problems :

    • The filtering using filter region doesn't work you actually need to make a new call to the api to filter by region.

    • On the details page you cannot see the surrounding borders for a country .

    • Plus you have a lot of html and accessibility issues.

    But i know this isn't an easy challenge so overall good job. Here is my solution for the same.

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, I don't see any problems with the design or the functionality, the code is clean and the site is responsive, good job 👍.

    1
  • Juan D.• 180

    @jarayabozo

    Submitted

    I would appreciate any feedback on this project. Thank you.

    Vue, sass

    2

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, awesome job on the project here's what i think you can improve:

    • First of all the icons in the search and filter regions aren't visible for some reason.

    • Second when you toggle dark mode on the homepage, it persists only until i click on the neighbouring borders of a specified country i.e. if i clicked on India the dark mode persists but as soon as i click on one of it's borders it disappears.

    • Third you are loading some wrong pages like for ex. when i clicked on India it opened up British Indian Ocean territories page, maybe you're making the wrong api requests.

    Here is mine solution although i did it using React.

    Hope this helps 😊

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, the loading skeleton looks great in fact i didn't know such a tool existed so thanks i learned something from you and on the subject of theme switching, it seems to work fine. But here's how i did mine, basically when i toggled dark mode i basically stored this info in local storage plus i made sure that as soon as body gets a class of .class everything else on the page also changes.

    This is my Solution

    Hope this helps!

    1
  • Safa Ruknuddin• 385

    @safruk

    Submitted

    Question: Is there any alternate to max-width. I find that I rely on it a lot specially for text. I used to use padding earlier but my design breaks a lot with padding. I don;t know if this is the correct way. I would be thrilled if you would share your views about this.

    Question: I just cant figure out when to use flex-wrap and when not to.Again my design just falls apart when i use flex wrap attribute. What are some use cases for flex wrap.

    Question: When I carefully look at this design ,the background image looks like its been set to contain and not cover.But I couldn't figure out how to implement that. The mobile view has the image only behind the mockups image. I looked at other peoples solution hoping to clear my confusion but I didnt find any.If anybody here has a solution can you please show me.

    Used sass and flexbox. Implemented BEM

    2

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, here are some of the answers to your questions:

    • For me i usually change the font sizes for the paragraphs on different screen sizes and in combination with width attribute it seems to work fine for me.

    • I'll be honest but i have never used flex-wrap ever but you could see a small example of how it maybe useful over here.

    • You could use a shorthand background: #ffffff url("img_tree.png") no-repeat right top; and put both the background-image and background-color on the body element,this worked for me.

    Hope this helps.

    2
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @LizUK, nice job and you've nailed the line heights and font sizes pretty accurately and you've got the positioning done correctly. Here are some suggestions for you:

    • You should provide a label for your inputs since labels are used by the accessibility API for screen readers and other things.

    • If you're asking for the users email address then the input type should be email i.e. <input type="email"> and not text.

    • Plus you should use a form submit button or in other words the button element instead of an input element.

    • I don't know the reason but on my screen width the design has a horizontal scrollbar which should be there.

    Hope this helps and keep coding 😃

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    It's a simple concept if you designed your site first for desktop screen sizes like 1400px then you need to scale down your design using max-width media queries and if you designed your webpage for mobile first screen sizes like 375px then you use min-width media queries to scale up your design.

    Here is an MDN page for the same although this contains a lot of details and might confuse you so here is a youtube video for the same.

    3
  • emmy-html• 345

    @emmy-html

    Submitted

    Any feedback is welcome! In particular I was having trouble with displaying the location marker in the footer as a block element next to the text, so I'd love any suggestions on workarounds for that. Thank you!

    Fylo Landing Page with SASS & Flexbox

    1

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, you could use display:inline-block to put them on each other sides, or if you put them inside a <div> element then you could use display:flex property on the <div> element to display them on each others side. Apart from this your design seems pretty good the design is responsive and adapts nicely to different screen sizes.

    • Just a few suggestion, the button at the bottom of the page needs more space to fit the text maybe increase the width of the same a bit plus you should provide some transitions to the way buttons change color upon hovering.

    • Second fix all those html validation and accessibility issues.

    Hope this helps and keep coding 👨‍💻.

    1
  • ntchungse• 40

    @ntchungse

    Submitted

    Could you give me some advice about my code? What should i fix ? And how to use media in this challenge? Thank you very much <3

    Four Card Fearture Section

    1

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @ntchungse, you could stack all the card on top of each other when you reach around 900px. Plus you should decrease the margins on the main heading at the top. Other than that the design seems fine.

    Hope this helps and keep coding 😊.

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @predeyo, i think there is something wrong with your media queries since even on a laptop screen it seem to be in a tablet portrait form.

    0
  • apoorva2019• 100

    @apoorva2019

    Submitted

    I am not able to manage the background (blue colored) image and also dint make it responsive? Any suggestions?

    HTML,CSS

    1

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @apoorva2019, you should keep the <footer> outside the container since that limits the size to which the background-color can spread. You can put the contents inside the footer in a container though i.e.

    <footer>
   <div class= container>
      your content goes here
   </div>
</footer>
    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi Matas, nice work on the design, it is responsive and looks good on most view-port sizes. Here some suggestions for you:

    • You should probably give some margin-right on the social icons they are sticking really close to each other.

    • You should give a cursor:pointer to your button element.

    • Always provide altattribute to your images since they're important for screen readers and for general accessibility purposes.

    • Input should always have a label with them and can be hidden in CSS.

    • The input type should be email since you are taking the email address from the user not text and this provides some basic HTML5 validation.

    Overall nice job and keep coding 😊

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @ornel77, your design is looking great and here are some fixes for your issues:

    • You should provide a label for your input. You can hide it in CSS using display:none property.

    • The <form> element shouldn't have an empty action attribute just remove the attribute all together.

    • The input type should be email rather than text since users would be entering an email address and html5 provides some basic form validation when type is set to email.

    Hope this helps and happy coding.

    1
  • Tulsi Prasad• 140

    @heytulsiprasad

    Submitted

    I used just flexbox for this page to make the desktop first version, later in mobile devices the image came to the top of the page when flex direction was changed. So used positioning absolute to make some space below the logo and put the image there. I am curious if this is a correct way of designing the webpage? Also, I have made efforts to make it fully responsive, any comments please hit me up.

    Responsive site using flexbox with css and html

    2

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, if you're using flex-box for this project then i don't think there is any other way to position logo on top other than to use position:absolute. The site is responsive although i have some suggestions for you:

    • You should fix all the accessibility issues by providing a label for input and name attribute for button element.

    • The site is responsive on tablet devices although the image is very stretched and doesn't look good.

    • You forgot to add the background to the site.

    Hope this helps and keep coding 👨‍💻

    1
  • Solomon Ekrebe• 610

    @krebeDev

    Submitted

    Hey! This challenge is detail-packed!

    I need help with getting rid of the scrollbar on the testimonial section in Firefox. I've set ::-webkit-scrollbar to display: none on the testimonial-row but it's being ignored by Firefox.

    Any ideas on how to resolve this? Thanks in advance.

    Manage Landing Page with: Vanilla JS, HTML, CSS

    1

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    @krebeDev hi, from what i gather webkit prefixes are usually used for chrome and safari or any chromium based browsers so they won't work on firefox. You should try using scrollbar-width:none although this a pretty experimental feature from what i know.

    0
  • Carolina• 30

    @CaroAFR

    Submitted

    This is my final solution to the challenge. I Would like to know your opinions, I think the only thing that is quite different in style is the email box. Looking forward from your feedback! Thank you!

    Atom

    1

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @CaroAFR, first of all welcome to the community and congratulations on completing your first project. Your design is definitely closer to mock-ups provided but here are some suggestions that i would give you:

    • The hero image is actually overflowing the page and shouldn't exceed the view-port height since it is a single page website.

    • I see that you've used 2 <h1> in your code which isn't a good practice since the search engines use this for displaying top page hits and hence only one h1 should be used. You could instead use <span> elements inside h1 and style them differently.

    • Margins don't seem to be proper, you should space your items well for easy reading.

    • The placeholder font isn't centered and should be pink instead of black.

    • The website is responsive on phones and desktop but not for tablets.

    • You should always add alt attribute to images since, if they fail to load or something goes wrong and they aren't visible then this text is used in it's place plus screen readers use this for visually impaired people.

    Those were some of my suggestions and you could look at my code for reference if you want Base-Apparel and here is the live version of the site Live-Version.

    Hope this helps and happy coding 😊.

    2
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @jamorajj your design is looking great, it's responsive and fits most of the screen sizes. Some suggestions i would give would be:

    • Your "get started" button should have a cursor: pointer.

    • The overall font size seems to big for the small screens specially after going down from 500px.

    • In the desktop version the features section should be pushed a bit more down it's almost approaching the header section.

    • Plus you should fix the accessibility issues by providing a label for your inputs and removing the type attribute from element.

    Hope this helps and keep coding ☺️

    1
  • ASlawinska• 80

    @ASlawinska

    Submitted

    I have problem with changing hamburger buttom for close buttom in mobile version. If some one help me with that I will be very glad :)

    HTML5, CSS3

    2

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Okay i see that you've posted a new solution but you could as well update your previous solution by changing the source of your repository. Anyways the hamburger is usually made using JavaScript although i sometimes use something known as a checkbox hack which you could learn more about here: Checkbox Hack this doesn't require JavaScript.

    As for the code you've written, I'll be honest i really couldn't understand how you've implemented it since hovering over the header displays the drop-down and in my opinion you would probably need to write a JavaScript function for that.

    You could learn about it W3S.

    2
  • aaditya78• 60

    @aaditya78

    Submitted

    I am new to web development there are a lot of areas to be furnished in this, its the first time i am using CSS grids

    Basic website using CSS Grids

    2

    Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi @aaditya78 the grids look awesome and the positioning is great and the site is responsive all the way. Here are some suggestions i would make:

    • The font sizes for the headings seems to be wrong, you should give hierarchies in design i.e. some things on the page are more important than others and should be visible first.

    • At around 400px the images seem to be touching the bottom of the boxes maybe give them a bottom margin.

    That's all, keep working hard and keep coding ☺️.

    1
  • Shubham Sharma• 855

    @shubhamthedev

    Posted

    Hi, the design looks great in my opinion specially the way you nailed responsiveness is great even i wasn't able to do that on this project. Some suggestions that i would make:

    • The font sizes seem to be a little to small specially on bigger screens.

    • The hero image looks a tad bit thin in the final design.

    • The mobile version of the site has a blank space on the top for some reason and I'm not sure if it's my browsers fault or not, since i read the code and couldn't figure out where that space is coming from.

    • You should color font inside the input element to pink.

    • Lastly you should fix the accessibility issues which i wouldn't say much about because i make those mistakes myself.

    Those were some of my suggestions. Keep working hard and Happy Coding 👨‍💻.

    2