Michael Mushrush

@FloratobyDev

All comments

zdenman•140
@zdenmanSubmitted almost 2 years ago
Hello, this is my solution to this challenge. Any comment is highly appreciated. Happy coding!
Single price grid component
1
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
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!
0
Gino Tapia•50
@DestroctorGTSubmitted almost 2 years ago
Did i use HTML & CSS good practices?

How i can improve in my code skills?
QR card image code with CSS Grid & Flexbox.
2
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
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
1
Agustin•30
@katuramu27Submitted almost 2 years ago
It's my first project ever after studying off youtube for a month or so.
Qr code Component Main
2
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
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
0
Lenez•440
@lenez12Submitted almost 2 years ago
1. maybe on this occasion I will ask how to use margins wisely. I'm still confused to determine when to use margins and when to use gaps in flex, or use justify-content:space-between, to give the spacing between elements
can anyone explain?
News homepage HTML | CSS | JS
2
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
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.
1
Bvandyke•20
@ridge-runnerSubmitted almost 2 years ago
Hello all! This is my first submission to Frontend Mentor!

About: I've been interested in web development since the early 00's, but never gotten around to learning. Now, I'm working to change that!

QUESTIONS:
1. Is the markup semantic and accessible? I was unsure about how to markup the text on the card. I used an <H1> and a <span> for the body text. I suspect that the span should've been a <p> since it is content.
2. It was unclear to me whether or not to use <main> for the card itself, so I used a <div>. I haven't dealt with components, so I'm learning how to mark up and style them. I've only had experience writing traditional websites (back in the days when floats were all the rage) - not web apps.
TOOLS USED: CSS Grid, Flexbox, CSS Reset, and Custom Properties.

TO-DO: I tried to organize the CSS file in an easy-to-read manner, but I'm still working on it. In the next project, I plan to incorporate Cube.css. So hopefully that will organize things a bit better. Also read more about accessibility best practices.

I'll post this solution on Slack as well.

Thank you for your time is looking over my project!
First Review Request - QR Code - Semantic markup, Grid, Flex
3
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
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 :

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; }

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.

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
3
John Andre Yap•10
@apotato369550Submitted almost 2 years ago
Hi everyone!:D Feedback welcome. I'm new to this platform & frontend development isn't exactly my forte, so I'm always looking for ways to improve. I have a few questions:

How do I go about making this site more mobile friendly? (I'm not entirely sure if I implemented that part correctly:V) How do I test my site's mobile-friendliness? (is there a way to display it on my computer as if it were on a phone?) Any tips on organizing/making cleaner code? Should I try using React?
QR Code Solution Using Basic Bootstrap - First Frontend Mentor Problem
2
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
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
0

@DeyanIlievSubmitted almost 2 years ago

I have found difficult with making the font as per the requested. I am unsure of the dimensions of the card. I will be more than happy if someone explains to me how to arrange the dimensions as well as id fonts.

QR code

Michael Mushrush•250

@FloratobyDevPosted almost 2 years ago

Learn about flexbox and any other display values. It will make aligning so much easier for you. Here's an example:

HTML:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="css/style.css">
  
  <title>Frontend Mentor | QR code component</title>
</head>

<body>
  <div class="white-square">
    <img src="images/image-qr-code.png" alt="qr-code-component-main">
    <h1 id="content">Improve your front-end skills by building projects</h1>
    <p id="grey-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>

  </div>
</body>
</html>

CSS :

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

img{
    width: 90%;
    height: auto;
    border-radius: 5%;
    padding-top: 3vh; 
}

.white-square{
   
    width: 40vh;
    background-color: white;
    padding: 1rem 0px 2rem; 
    border-radius: 15px;
    font-size: 30px;
    
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 20px;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: rgb(148, 148, 192);
    max-width: 1440px   ;
    background-color: hsl(212, 45%, 89%);
}

#content{
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    width: 85%;
    color: hsl(218, 44%, 22%);
}

#grey-text{
    width: 80%;
    color: hsl(220, 15%, 55%);
    font-family: 'Outfit', sans-serif;
    font-size: .9rem;
    font-weight: 400;
}

If you're wondering about this :

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

It'll make your styling life easier if you add this. It basically eliminates all the default margin and padding of each elements so you can get a better control of how you want to pad and margin your elements. The box-sizing: border-box is use to keep the dimensions of an element from expanding any further than you have define them to be. For example, if you set width: 200px, then that is all it's going to be even if you change the padding or margin. It will not affect the width of the element at all. It is a very popular practice due to that.

Marked as helpful

Deyan Iliev•10
@DeyanIlievSubmitted almost 2 years ago
I have found difficult with making the font as per the requested. I am unsure of the dimensions of the card. I will be more than happy if someone explains to me how to arrange the dimensions as well as id fonts.
QR code
4
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
How absolute and relative position works in terms of its effect on the width and height of a container. A relative position can still affect the width and height of a container like div. An absolute position does not affect the width and height of a container and can go wherever in the screen unless its parent has the relative position property. If so, then it can only move around that parent's container.

Here's an example of setting an element inside a container to absolute :

| element one | element two |

Think this two elements are stored in a container. The width of that container is affected by the widht of both elements. If you set element two to position absolute, then the width of that element will not affect the container's width anymore like so:

| element one |

Instead, it will be on top of element one. I can't draw that here but just imagine it being on top of element one. Any element inside a container with an absolute position, will always be initially positioned as the first element of that container.

Hope that's good enough to describe the difference.
Marked as helpful
0

Deyan Iliev•10

@DeyanIlievSubmitted almost 2 years ago

QR code

Michael Mushrush•250

@FloratobyDevPosted almost 2 years ago

HTML structure is essential when it comes to styling your website. It can easily make your life miserable if you don't properly think of how your structure is going to affect your styling later on. Your current HTML structure is pretty difficult to work on because you separated them into containers. A container is an element like div, main, section, etc. where you can put a bunch of elements together and use that to align them or execute a group styling on them. You should always group elements together if you're trying to align them together properly. Also, if you just want to store a text in an element, it's better to just use a <p> element or other elements that is meant to store a text content. Trust me, it'll make structuring much easier.

Here's how I restructured your code:

<body>
    <div class="white-square">
      <img src="images/image-qr-code.png" alt="qr-code-component-main">
      <h1 id="content">Improve your front-end skills by building projects</h1>
      <p id="grey-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </div>
 </body>

Here's also another structure where it's good enough :

  <div class="white-square">
    <div class="blue-square">
      <img src="images/image-qr-code.png" alt="qr-code-component-main">
    </div>
    <div id="content"> Improve your front-end skills by building projects</div>
    <div id="grey-text">Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</div>
  </div>

I simply took out the <br> element. Leave it to the styling to do the spacing for you. And the element I also took out. Since there's nothing in the div element but the text, this works just fine. This is all fine for starters but in the long run, make sure to learn more about different elements and how they're being use.

Marked as helpful

Deyan Iliev•10

@DeyanIlievSubmitted almost 2 years ago

QR code

Michael Mushrush•250

@FloratobyDevPosted almost 2 years ago

Please don't use import and inside a body element. If you want to import your fonts, either copy-paste the link URL from Google Fonts and paste them in the <head></head> element or take your import URL and put them on top of your .css file. Note that the files you import inside a .css file only work for that specific file. However, the other method is going to work globally which means you can use it wherever you have multiple .css files.

Here's an example:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

img{
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 15px;
    /* margin: auto; */
    /*padding-left: 5vh;
    padding-top: 3vh;*/
    /* display: block; */
    /* transform: translateY(5%); */
    
}

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="css/style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
  
  <title>Frontend Mentor | QR code component</title>
</head>

Marked as helpful

adr99•410
@leorichy99Submitted almost 2 years ago
Reviews are welcome !

Help me become better 😍
Notifications-page
1
Michael Mushrush•250
@FloratobyDevPosted almost 2 years ago
It's pretty close to the design. Probably just need a little bit of resizing and making sure that it looks nice on mobile. The error is probably an easy one but basically what it's trying to say is that you should avoid it or else you'll be getting problems. For example, you might want to start an event with that button but since you have two interactive elements in an enclosed area, there could be times when the event wouldn't trigger because you click the other button that doesn't have the trigger. Small problem but it can cause a ton of frustration. Well done finishing the project!
Marked as helpful
0

Michael Mushrush

All comments

Single price grid component

QR card image code with CSS Grid & Flexbox.

Qr code Component Main

News homepage HTML | CSS | JS

First Review Request - QR Code - Semantic markup, Grid, Flex

QR Code Solution Using Basic Bootstrap - First Frontend Mentor Problem

QR code

QR code

| element one | element two |

| element one |

QR code

QR code

Notifications-page