All solutions

Hello!!! 👋

Thanks for checking out my solution! 🙂

This project was built using, 🖥️

• HTML
• CSS
• JavaScript
• SASS/SCSS

I had difficulties in, 😔

• Setting transition effects for the drop down menu on click.
• Choosing appropriate class names for styling.

I aim to improve my understanding of, 😄

• CSS transition property
• CSS animation property

I have the following questions, 🤔

• Q1: How can I make my code more readable?
• Q2: How can I apply transition effects for on-click events?
• Q3: Is my semantic HTML correct? How can I improve it?

Any feedback regarding best practices would be much appreciated! 😇

Until next time!!! 🥳

Hello!!!

Thanks for checking out my solution!

This project was built using,

• HTML
• CSS
• JavaScript
• SASS/SCSS
• React

I had difficulties in,

• Using the correct regular expression for email validation
• Controlling state passed to child components using parent component
• Conditional rendering
• Dynamic styling

I aim to improve my understanding of,

• state
• props
• styling in React

I have the following questions,

• Q1: How can I make my code more readable?
• Q2: Will it be better to apply conditional rendering to the element with the .container class?
• Q3: Should I create a separate child component for the form?

Any feedback regarding best practices would be much appreciated!

Until next time!!!

Hello!!!

Thanks for checking out my solution!

I learned a lot about,

• position property in CSS
• display: flex for singular column or row generation

I had difficulties in,

• Specifying the correct dimensions for the position properties
• Positioning elements to the correct locations to match the design

I aim to improve my understanding of,

• z-index CSS property
• absolute and relative size in CSS

Any feedback regarding best practices would be much appreciated!

Until next time!!!

This project proved to be good practice for basic HTML and CSS. Let me know if there are any things I need to improve upon.

Q1 Whenever the error message was displayed on the mobile layout the scroll bars (vertical and horizontal) were enabled. Clearly overflow is occurring but I don't know why. Is using overflow:hidden the only way?

Q1 Any best practices?

Q1 Any best practices for the code?

Q1 Any best practices for SCSS?

Q2 The #space-container worked fine except for when it was used in the media query for the mobile layout. I could not specify a different height value to it. Why is that?

Q3 How can I better utilize partials for my SCSS?

Q1 Are there any best practices especially in using Bootstrap?

Q2 Bootstrap makes even the text in tags responsive. How can I prevent that?

Q3 Making this without Bootstrap would have taken longer but be more accurate. How do I force it to create one breakpoint rather than *-sm *-md *-lg breakpoints?

Q4 Is Bootstrap only good for responsive grid layouts or am I using it wrong?

Q5 How do I efficiently add <svg> elements to my HTML?

Q6 How do I set the background <svg> for the page and change it depending on desktop or mobile layout?

Q1 Any best practices that I may be missing? Q2 Are there any other ways to center an element without using flexbox > align-items > justify-content?

Q1 Any guidelines on reducing the code size but retaining the structure? Q2 Which is generally more versatile grid or flexbox? Q3 Ant best practices that I should follow?

Q1 Any guidance for using .json files in HTML? Q2 How can I make this code more "pleasing to the eye"? Q3 What other unit scheme should I adopt?

Q1 Any guidelines regarding relative and absolute units, I always "lose my way" when the code gets longer. Q2 How do I center my .svg cart icon with the inline <a> tag text? Q3 How can I be more organized in my code to be able to view and understand it easily (other than the use of comments)?

Q1 I know that media queries are used to make a page responsive to variations in viewport size but how do I implement this, say for this case I wanted the qr code to occupy the full height of the viewport whether it be using a desktop or mobile screen. How do I "resize" the html elements accordingly?

Q2 What are the problems associated with the code and any best practices that could be recommended to facilitate a more efficient code and way of coding?