Skip to content
OverviewSolutions
8
Comments
6

Jhon Alessandro (@Master_Aless)

@The-BoxHead-Guy140 points

Future Great Web Developer | Specialised in Front-End development | English C2 | 🇻🇪

Latest solutions

View more solutions

Latest comments

  • NatSolo•110
    @nataliiasolomchak21
    What are you most proud of, and what would you do differently next time?

    I am proud of finishing this challenge pretty quickly.

    What challenges did you encounter, and how did you overcome them?

    I encounter some challenges with form validation and used Bootstrap fomr validation to solve this problem.

    What specific areas of your project would you like help with?

    I need help with responsibility, is there any tip to how to make the content as responsible as possible without using a lot of media queries? Thank you in advance ;)

    Responsive coming soon page using HTML, CSS, JS and Bootstrap

    #bootstrap#accessibility
    1
    Jhon Alessandro (@Master_Aless)•140
    @The-BoxHead-Guy

    Hey Nat, I've checked out your solution, and it seems amazing. I needed to zoom it a little bit as in my screen it was displayed a little bit small (I use a 1980x1080 monitor) but at the end, I could see it all

    My favorite part was indeed the validation method, you saved yourself so much time there as it's not easy to do it from zero

    On the other hand, there are several ways to make your website responsible without using many media queries summonings...

    I recommend you to take the course of responsive design from google at Google-Web-Dev as it will teach you such useful ways to develop the font-sizes of your website using the viewport width as well as learning how to use properly width and height properties and finally comprehending how to use: Unit measurements such as:

    • rem
    • em
    • px
    • ch

    What results useful for me it's to use @container and css functions such as min(), calc(), max() and so forth, as well as starting by making the "mobile-layout" first but thinking a little bit about how it'd be better to do it.

    I dare to say that it's a fact of: 50% structure and 50% of styling

    Marked as helpful
  • Geokobby•80
    @Geokobby
    What are you most proud of, and what would you do differently next time?

    Getting to understand how Max-width and Min-width response with various screen size display

    What challenges did you encounter, and how did you overcome them?

    1. I was confuse about how Max-width and Min-width works, which size screen to be used on and to scale them. search for solution online (https://www.youtube.com/watch?v=6UXn3U1dXH0&pp=ygUibWluLXdpZHRoIHZzIG1heC13aWR0aCBtZWRpYSBxdWVyeQ%3D%3D) (http://stackoverflow.com/questions/16647380/ddg#24640497)

    2. how to center the cards. Thanks to @Carmenyo on Frontend Mentor for helping out with the source code to help center the cards

    What specific areas of your project would you like help with?

    I used anchor tag for the links, cause i thought i will work better over buttons

    HTML, CSS, Media Query

    1
    Jhon Alessandro (@Master_Aless)•140
    @The-BoxHead-Guy

    Nice try at this one bro! it seems incredible, and the code it's also clean.

    I noticed that you stylized the "location" text without being bold, I found that a 600 font-weight would seem delightful to it once applied!

    Greetings!

  • Markoroque•40
    @Markoroque
    What specific areas of your project would you like help with?

    Guide me for the best results and help me to grow

    html5,css3

    #accessibility
    1
    Jhon Alessandro (@Master_Aless)•140
    @The-BoxHead-Guy

    Hey yo, hope you're very good, it was a good try of your part, let's take a look at a few things that can be improved

    If you are creating a single application in a website and you want it to be centered, there are a few steps that should come earlier:

    body {
  min-width: 100vw; // this will take all the width of the viewport, the screen of the device
  min-height: 100vh; // Same as the min width

  display: flex;
  align-items: center;
  justify-content: center;
}

    This will help you to center any kind of application you'd want to create 💯, the great thing of this is that it'll last responsive (However; in several cases it'd necessary to use @media queries to make it look better)

    Keep doing your best, you're on the right way!

  • Jhon Alessandro (@Master_Aless)•140
    @The-BoxHead-Guy

    Quite good solution, congratulations!

  • Jhon Alessandro (@Master_Aless)•140
    @The-BoxHead-Guy

    Hi dear friend nice job at tackling this challenge, it seems quite good!

    I've reviewed the code, and it's clean and easy to read, great job there. I saw also that you used certainly a display: flex approach in order to solve this problem, it might not make such a great difference but, did you know that you can use two lines of code to center an element, it's cool

    Check this out!

    display: grid;
place-content: center;

    Voila! As easy as writing console.log("Hello World").

    I noticed that you used em to measure the font-size of the text, it's a good choice and it can also be upgraded if it's used rem which takes directly from the html or root of the document's font-size preset font-size and apply it automatically

    An example of what I'm referring:

    html {
  font-size: 16px;
}

/* Now I can reference an scalable font-size using rem anywhere */

text-container p {
  font-size: 1rem; /* Equivalent to: 16px */
}

    Hope it can help you out a bit, thanks for reading!

  • Jhon Alessandro (@Master_Aless)•140
    @The-BoxHead-Guy

    Hey bro, nice to meet you

    body {
  background-color: rgba(213, 225, 239, 255);
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  align-items: center;
  display: flex;
  justify-content: center;
  /*! margin: 14rem 20rem; */
  font-family: 'Outfit', sans-serif;
  width: 100vw;
  height: 100vh;
}

.container {
  background-color: white;
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /*! height: 100%; */
  /*! width: 25%; */
}

img {
  /*! width: 66%; */
  /*! height: auto; */
  /*! border-radius: 1rem; */
  /*! margin-left: 4.4rem; */
  /*! margin-top: 1rem; */
  width: 20rem;
  border-radius: 0.5rem;
}

h1 {
  color: rgba(104, 111, 125, 255);
  font-size: 1.35em;
  text-align: center;
  width: 25rem;
}

p {
  color: rgba(150, 155, 161, 255);
  font-size: 0.95rem;
  text-align: center;
}

.qr-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  padding: 2rem 0.5rem;
}

    I've edited your app's css stylesheet, I've highlighted the changes within "comment blocks" and since I've seen that you like to work with flex, I adjusted the solution using it.

    If you want to go through it in detail, let me know

    Marked as helpful