Qr-Code responsive web design using HTML and responsive CSS (Flexbox)

Community feedback

• 

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  Hey! I like your take on this challenge. Nice work.

  Suggestions regarding your project/code:

  • Your div.container has overflow set to hidden. I would avoid this because your body tag CSS is set to height: 100vh. When you do this, if the window's height is too small for the content, the content is cut off and lost. I would remove the overflow: hidden from your div.container.
  • When you remove the overflow: hidden from your div.container, you will also need to change your body's CSS property of height: 100vh to min-height: 100vh or else you will get an unwanted gap at the bottom of your page at certain window sizes.

  Try these suggestions out yourself if you would like and you should see what I mean. I just went into the dev tools in browser and changed your CSS code to my above suggestions and it solves everything. These are just my personal opinions though!

  To your question regarding best approach for creating a website from the beginning:

  1. You need a design of some kind to code, so design is where things need to start, whether that is conceptualizing the idea, sketching design ideas, creating high fidelity designs, producing prototypes of how the website will interact with the user, user flows, etc. There are many things you can do in the design phases. Some are necessary and some are not depending on how significant the project you are working on is and if you have a team or if you are solo. In a perfect world you want to check all the boxes to ensure you get the best results from your project, but sometimes when it is all you, you do what you can and focus on what you are especially interested in and good at. For example, if front-end development is your interest, yes you need a solid design, but that also doesn't mean you need to create a complete design system, branding, logo, typography, user personas, user flows, and all of the hundreds of design tasks you could put upon yourself. You want to get a solid design, but focus on showing how great your front-end development skills are. You want to be a front-end developer, not a graphic designer, unless that is what you want. I hope that makes sense.
  2. After you have a solid design to work from, I'd advise you to build the HTML structure either while styling your project with CSS simultaneously or code the HTML structure completely first, then do CSS completely, until you have completed the HTML and CSS for your project. I personally like to code all the HTML first, but when I first started this was hard because I was still learning CSS and if you don't account for certain layout aspects/proper HTML structure for your layout when coding the HTML, you will have to restructure later after doing a bunch of CSS and backpedaling. So, if you are still new to HTML and/or CSS, I recommend going little by little from coding a little HTML to a little CSS and repeat. Upon completing this phase, you will have created the visual appearance of your site and ensure it's responsiveness. Functionality may not exist yet besides minimal/simple functionality like linking pages and CSS state effects. During the HTML and CSS phase, you want to ensure you are using proper code structure and make sure you are keeping it clean, don't repeat yourself, etc. If you aren't careful, your code will get unnecessarily messy, fast.
  3. Once you have your HTML and CSS complete, I would then start working on the functionality which will come in the way of JavaScript, the actual programming part. This could be where you start manipulating the DOM with event listeners, adding logic and conditions to user actions and interactions, etc. You can do quite a bit during this type of phase. Beyond this phase is likely ending up dipping into back-end development working on the server-side of things.

  I hope that helps! Feel free to reach out with any other questions. I'm always up for offering up what I know to whoever needs it.

  Great job!

  Marked as helpful

  2

  ---

  

  Jhon Alessandro (@Master_Aless)•140

  @The-BoxHead-GuyPosted about 1 year ago

  @thenihilistdev

  Greetings bro, thanks for your comment, I really appreciate that you've taken the time to write all of those words, and opinions. 🙏

  Furthermore, I've got to say that I applied your suggestions, and it has worked, I knew that there was something wrong with the CSS code, but I couldn't grasp what was occasioning it.

  I got the first key point in what you've written, It's good to know the what is going to be built, but in order to get this done, there should be anything from where we can guide from, in this case, a pre-made design and the main ideas about how to the interface is going to work along with user's actions.

  Structure, and layout, integrating all things and make them work essentially first, the style of building the website can be in parallel or sequentially (first HTML and then CSS)

  So good your words man, I really appreciate them, it was like asking for gold and I obtained diamonds, thank you so much.

  1

  

  Aaron Varga•370

  @avinnoPosted about 1 year ago

  @The-BoxHead-Guy Hey! Absolutely!

  I genuinely love to give whatever I know to whoever it may help. I know I don't know everything and may not do everything 100% correct, but that doesn't stop me from trying to help others, so I am really happy to hear my comment helped in some way.

  And I am glad you were able to check out my suggestion(s). They were super minor suggestions, but I am glad you were able to take a look at it regardless. Again, great work on this challenge!

  It sounds like you get the whole process perfectly and I know it will become second nature to you as you continue on, if it is not already!

  I look forward to seeing more of your completed challenges/solutions! Don't hesitate to reach out if you need/want!

  Marked as helpful

  0