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
OverviewSolutions4Comments17

All comments

  • Simeon Udoh• 535

    @simeon4real

    Posted

    Thanks a lot @mattstuddert . I appreciate your feedback on my solution. I've learn a thing or two from your response. I do appreciate. Thank you

    0
  • Teng• 170

    @pyteng

    Submitted

    Is it better to use a helper class or select all elements that you're going to style the same?

    Ping coming soon page

    2

    Simeon Udoh• 535

    @simeon4real

    Posted

    Congrats on your submission @Teng. Regarding your question, I usually use helper/utility classes as it helps on even big projects as well as small ones. I noticed you used BEM. That's sweet! Keep it up.

    You can take the step further and fix the outlined accessibility issues generated by the accessibility report. Once again, congratulations!

    If you found my recommendation useful, I'll appreciate if you upvote my feedback. Thanks

    2
  • Zac Heisey• 110

    @zac-heisey

    Submitted

    This was tough layout for me, especially with getting the size and positioning right for the SVGs (particularly under the 'Features' section). Any insights or advice on working with and properly sizing SVGs is much appreciated!

    I also used <details> and <summary> for the disclosure portion of the page under 'Frequently Asked Questions.' I'm curious how others approached this, and if using <details> and <summary> presents any usability/accessibility issues that I'm not seeing.

    Thanks in advance for having a look!

    Bookmark landing pager (Vanilla JS, HTML, and CSS)

    2

    Simeon Udoh• 535

    @simeon4real

    Posted

    Hello Zac, I must say, I am ver impressed with your solution. This is stuff way above my skill level and I liked it. I'm yet to attempt this challenge myself. Aside from the accessibility issues pointed out in the accessibility report, I have just one suggestion to add.

    Rather than resizing each heading and text font sizes individually, I think you should add

    html {
	font-size: 62.5%
}

    This way, 1rem will always be === 10px. Calculation: 100% ÷ 16px(browser default) * 10px === 62.5%. Now, your font-size is 10px aka 1rem in your root.

    What you could do on smaller screen sizes is to change the size of your root to say, 8px.

    html { 
	font-size: 50%;
}

    Now, 1rem === 8px. Calculation: 100% ÷ 16px(browser default) * 8 === 50%.

    If you found my recommendation useful, you can upvote my feedback. I would appreciate that.

    2
  • Simeon Udoh• 535

    @simeon4real

    Posted

    Hello Vincenzo, Congratulations on your new solution on this challenge. Like you, I plan on going back to all the projects I worked on to apply my new Javascript knowledge to them. I'm still learning like you. 😁 About your submission, I noticed some things which could be improved.

    1. First, Start using relative units instead of fixed units like pixels. Plus we don't know which devices our users will access our web apps from. Also, CSS is supposed to flow like water and adapt to any screen size you throw at it. But you can't do that if you defined fixed values with Pixels.

    So I suggest you start using relative units like rem and em. Trust me, they will make your life easier as they will scale to new screen sizes..

    1. Your HTML isn't that Semantic. You used way too many divs though it doesn't matter much since this is a relatively small project but you should look it up.

    2. Move that inline style for .attribution to your styles.css file. It's considered as a best practice to avoid inline styles.

    3. You forgot to add accessibility features to your password input but you added accessibility to the email and name. A quick accessibility fix should get this done.

    Once again, congrats on your solution. The only thing that works is more work

    You can upvote my feedback if you found it useful. I'll appreciate :)

    3
  • Simeon Udoh• 535

    @simeon4real

    Posted

    Hey @Yaakoubox, Congratulations on your submission. Not everyone gets to complete challenges.

    1. Firstly, I recommend working on your page's mobile responsiveness. You can improve it by using Media Queries. Learn more here

    2. Learn to make your HTML more semantic, I mean, instead of having excessive generic divs you can split them into nav, header, footer, sections etc.

    3. Don't use CamelCasing for your CSS classes. For example .DivRight should be .divright or you can further to give your classes more meaning text-box since it's about the section with text.

    4. You can make use of flex-box to make your contents wrap when there's not much space. Flexbox will make your life easier. Wes Bos has an awesome course on that.

    5. I suggest you start using BEM methodology for your HTML classes. See this referenced link: http://getbem.com/

    Don't forget to upvote my feedback if you found it useful.

    3
  • Dani• 90

    @dagonmar183

    Submitted

    This is my first project in Frontend Mentor. I made this landing page using anly html&Css, I used Flexbox to make responsive. Feedback is welcome!

    My first project! Fylo Landingpage

    4

    Simeon Udoh• 535

    @simeon4real

    Posted

    Hello @Dani. I just previewed your website site. In addition to the recommendations by Rafael, I will suggest you reduce the font size on smaller screens. I'm currently on Mobile and the text are way too bigger.

    One way I usually fix font-sizing is that I declare a base font size of

    html {
	font-size: 62.5%;
}

    62.5% means that 1REM = 10PX and not browser default of 16px.

    Then on small screens, using media queries, I set the font-size to

    html {
	font-size: 50%;
}

    Now 1REM == 8px. This way, all the elements get resized automatically with just that one line of code since I use relative units. You don't have to go back to everywhere you declared font-size: to change them.

    Kindly upvote my feedback if you found it useful.

    2
  • Simeon Udoh• 535

    @simeon4real

    Posted

    Hey Wayne, I just previewed your solution and It's on point. However, I have a couple of recommendations.

    1. Reduce the font size on smaller screen sizes. You can accomplish this using Media Queries.

    2. Don't use IDs for styling your websites. Javascript uses ID and you can't apply an ID more than once. Instead, I suggest you make use of classes. Instead of

    #submit { 
	styles here
}

    You can use

    .submit {
	styles here
}

    1. Embrace Cleaner Codes. Learn how to use the BEM methodology and learn about HTML5 Semantic markups.

    2. To fix those accessibility issues, you should wrap each of your input with a <label></label> element.

    Then you can add **aria-label="description of input" ** to your inputs.

    You can upvote my feedback if you found my recommendations useful.

    1
  • P
    Felix Anducho• 400

    @Pleopleq

    Submitted

    It took me a loong ass time to finally finish this project. It was the most difficult i learn a lot. It not 100% accurate (I didnt know how to set up the background image). But hey, im still learning CSS. Its finally here! haha Happy New Year everyone.

    Fylo landing page.

    3

    Simeon Udoh• 535

    @simeon4real

    Posted

    Hello @pleopleq, Congrats on your submission. Just saw you know, I had a hard time completing the Fylo dark theme challenge as well. I used CSS Grid for the Desktop version but didn't know how to make it responsive so on Mobile, I switched the display to flexbox 😁

    I have a couple of recommendations though:

    1. Wrap your input forms using the <label></label> element. Here's an example :
    <label> <input type="email" name="name" >
</label>

    1. Add arial-label to your input forms. It helps with accessibility which is continuously growing on the web. Eg: <input type="email" **aria-label="email address"** >

    2. Learn BEM Methodology:https://www.smashingmagazine.com/2018/06/bem-for-beginners/

    3. Decrease the font size on smaller screens.

    You can upvote my feedback if you found it useful.

    2
  • Guilherme Silva• 140

    @silva-guilherme

    Submitted

    Hi everyone, first of all it's a pleasure to be here sharing my stuffs and acquiring knowledge with all of you.

    I have some issues when i was doing this challenge.

    First, i don't know javascript yet to build beautiful interfaces, so it was kind hard to me (a novice in web development) to complete perfectly the site exactly the same as the example.

    The hover effects don't work as it should be when i hover the mouse on it, especifically on the social media icons, that i used svg's and i dont know how to change the color of it even passing hours trying to do so :x

    I really really enjoy doing this, and i hope you guys read my submit and could give me a feedback and tips to improving my code.

    (Sorry if you are reading grammar errors, english is not my primary language)

    Single column page using html and css(without js)

    1

    Simeon Udoh• 535

    @simeon4real

    Posted

    I have a couple of recommendations:

    1. To get hover effects on buttons and links, add: display: inline-block to your .btn class

    2. Your webpage breaks on screens sizes => 1400px

    3. Learn CSS methodology, preferably BEM. Learn how here: https://www.smashingmagazine.com/2018/06/bem-for-beginners/

    4. Don't use SVG images as Social icons. Instead, use SVG icons. You can use icomoon for that. It will improve performance.

    Upvote my feedback if you found it useful.

    2
  • Simeon Udoh• 535

    @simeon4real

    Posted

    Nice one 🔥. I'll submit my solution soon as well. Kudos Patrick

    1
  • Simeon Udoh• 535

    @simeon4real

    Posted

    First things first, Congratulations on your solutions 🔥 I'm yet to submit a solution to this challenge btw. Here are a few pointers, You can use BEM methodology for making your HTML more semantic. That way, instead of using generic class names like txt-box1 you can use intro, subscription or even card

    Also, Instead of using generic divs everywhere, you can use semantic tags like section, nav, article etc

    Finally, I would suggest that you give class names to some of your tags like h1. So you don't repeat yourself by using same declarations for many tags. For instance

    .text-box-1 h1 { 
Styles here
} 

// and later doing this : 
.text-box-3 h1{
styles here
}

    You can do it better, like this:

    .heading__primary { 
styles
}

    Now you can use that single class for both text-box1, text-box-2 etc. Hope that helped.

    Don't forget to upvote my feedback. Will be appreciated :)

    3
  • Simeon Udoh• 535

    @simeon4real

    Posted

    Your solution looks good. About your HTML5 and CSS code, I think It will be better if you apply BEM - Block Element Modifier to your solution. It will make your markup more semantic. Also, I recommend using classes to style elements. for your headings, You can use a class like .heading__primary { __code here__}

    This article on SmashingMagazine will help with that.

    Don't forget to upvote my feedback if you found it useful

    2
  • Simeon Udoh• 535

    @simeon4real

    Posted

    I added before pseudo-elements to with contents like content: "facebook"; etc for all 3. and then hid it using visibility or opacity. still, the report still says I have to fix it. what else can I do?

    0
  • Sajal• 150

    @sajalsirohi

    Submitted

    In the section "foot" of my code, how do I make it go underneath the top section as given in the design? I tried using the Z-index, but it is still not working. Any help would be really appreciated.

    flyo dark theme landing page

    3

    Simeon Udoh• 535

    @simeon4real

    Posted

    You are welcome,Don't forget to upvote my feedback. Thanks.

    Edit: For your question, You need to add position: relative to the parent container when you move it.

    0
  • Sajal• 150

    @sajalsirohi

    Submitted

    In the section "foot" of my code, how do I make it go underneath the top section as given in the design? I tried using the Z-index, but it is still not working. Any help would be really appreciated.

    flyo dark theme landing page

    3

    Simeon Udoh• 535

    @simeon4real

    Posted

    First, I recommend not using IDs to style. Secondly, to fix the sign-up box not cutting across the footer properly, add:

       .info-box {
         position: relative; 
      }

    You forgot to add the bg-curvy for both mobile and desktop versions. Also you didn't add the quote photo to the reviews section.

    Edit: also add: border: none; to your input form

    2
  • Simeon Udoh• 535

    @simeon4real

    Submitted

    There's an annoyingly huge amount of whitespace on the bottom. I would appreciate it you tell me how to fix it.

    That's why the padding of 3rem on screens > 600px is only applied to the top, left and right but not bottom.

    Edit: Fixed. I'll push most recent version soon.

    Edit2: fixed.

    I look forward to your valuable response on how I can improve. I just learned CSS variables today and my next update will feature CSS variables rather than sass variables.

    SASS, HTML5, NPM

    2

    Simeon Udoh• 535

    @simeon4real

    Posted

    Hello, About my solution, I can add text to the labels and use display: none; for the label, will it work?

    0
  • Simeon Udoh• 535

    @simeon4real

    Posted

    @mattstuddert I like desktop first compared to mobile first.

    0