Skip to content
OverviewSolutions
5
Comments
11

Michael Mushrush

@FloratobyDev250 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Michael Mushrush•250
    @FloratobyDev

    The code looks clean to me. Probably the only thing I would add is a cursor: pointer in your sign-up button. Other than that, well done!

  • Michael Mushrush•250
    @FloratobyDev

    Besides what the accessibility report said, I don't think it's necessary to use the figure element in this case unless you want to add a caption to that image with the figcaption element. I wouldn't recommend adding a br element just for spacing here. I would just do that when it's time to style the page with CSS. So if you take out figure, then you can just take out the section element as well and just put all the remaining elements inside your .card class. It's much cleaner that way and it actually removes the unnecessary elements. Lastly, learn about landmarks and use those instead of just storing everything with div. Say for your .container class, you can use the main element instead rather than div. It's good practice and it's accessibility-friendly. Other than that, I think your CSS looks good. I would recommend learning a CSS methodology in the near future though once you get a hang of CSS properties. It will help make your modular and easy to follow. Overall, well done completing the challenge! If you want to improve your coding skills in web development, you have definitely come to the right place! Make sure you reflect on your code after you're done with the project. You can do that in the README.md file of your project. It might be a hassle but it's important to do so, so you can remember properly what you've learned.

    Hope that helps!

    Marked as helpful
  • Michael Mushrush•250
    @FloratobyDev

    The code looks great! Here's a simple tip when trying to add a Google Fonts link to your website and you need to add the font weights. First, copy the given font URL in the style.md. Then, add the following to it : :wght@600;700;900&display=swap . Let's cut that into pieces: :: Make to add this. wght@600;700;900: Each number signifies a font weight for that specific font family. If you want a font-weight added, simply add a semi-colon and then the weight. &display=swap: Usually when you add a font to a certain element like p for example, you do font-family: 'Outfit', sans-serif. Outfit is the font family you got from Google Fonts. Then, the sans-serif is a default font integrated into a .css file. It's a fallback font. This is important to explain because what display=swap does is use the fallback font while it's still loading the Google Font that you're trying to get online to your page. Once it's done loading, then it'll start using the Google Font.

    Hope that helps.

    Marked as helpful
  • Michael Mushrush•250
    @FloratobyDev

    Generally, I use gap to separate elements that are inside the container. Then, use margin if I need to specifically add a margin to an element. You can use margin for each element but don't you think that's a little tedious? For justify-content: space-between, I'd use it if I want to separate an element with flexibility in mind. A simple example would be separating the brand name from the tab container, like in this challenge. It's nice to use it in that situation since it will automatically figure out the spacing between them even if the viewport size changes.

    Hope that's a good enough explanation. Well done finishing the project mate.

  • Michael Mushrush•250
    @FloratobyDev

    Hello Bvandyke, first off, good job on finishing the challenge! I checked your code and I see a lot of unnecessary processes you had to go through just to do this challenge. However, I don't see that as a bad thing, I think it's actually good if you're just starting out, to learn about all types of things. Watching Youtube tutorials is great but it's nothing better than actually doing the work yourself. Some things I'd like to point out though to make life a bit easier for you are the following :

    1. You can simply put margin: 0 inside the * selector if you just want it to be used by every selector. If not, then you can keep doing what you did here :
    h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

    1. There's no need to add a media query about animation if you don't have one. But if you're just learning, then that's acceptable I guess. However, I don't know if you'll be able to see the difference if it doesn't show when you try and test it out.

    2. Also, you can just use .card img rather than .card > img since you only have one img element. > symbol styles all the img elements inside the .card class so you may want to take note on that. It may cause you problems in the future.

    I think that's all I can say. Other than that, well done, and keep it up! Keep learning! .

    Marked as helpful
  • Michael Mushrush•250
    @FloratobyDev

    For this project, you probably don't have to think much about mobile-friendliness. But if you want that, you can look up articles about responsive website and media query. Media query essentially allows you to tweak your default styling to fit on mobile.

    To test if your site is mobile-friendly, press Ctrl + Shift + I and click that mobile-tablet icon usually set up on the top-left of the developer tools. From there you can change whatever phone or tablet you want to check your site on by clicking the Dimensions: ****** drop-down menu.

    You can try using React, but in my opinion, I think you should focus on learning the basics first like HTML, CSS, and Javascript. Once you have a better understanding of those three, then you can start using a framework like React. For this project though, you don't need to. If you want your code to look cleaner, name them properly and learn about how each HTML element are supposed to use. Also, try and research a front-end developer roadmap. I'm sure it would help you a lot in the long run.

    Marked as helpful
View more comments