Marzia Jalili

Latest comments

• 

  AngieLi98•50

  @AngieLi98Submitted about 11 hours ago

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

  The challenges I faced were the image change that I had to do, this change to mobile, I searched on the internet and code that colleagues to know how to do the image change in @media

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

  I would like some advice on the area where I change the image on my mobile to know if there is a better practice and to know when I should use rem or em.

  

  product page with @media and rem

  1

  20
  

  Marzia Jalili•3,970

  @MarziaJaliliPosted about 8 hours ago

  Nice work!

  Some sort of suggestion for you to consider in your next projects

  • Instead of using the div element to wrapp the img inside, you could use the picture element.

  The picture element is very handy when it comes to multiple images for different screen sizes. It gives you the ability to set different media attributes which can declare the screen size for each source element nested inside.

  You can take the code below as an example:

  <picture>
    <source 
      srcset="(path of mobile image)"  media="(max-width: 30em)"
     />
    <source 
      srcset="(path of desktop image)"  media="(min-width: 31em)"
    />
    <img src="(path of the image)" alt="image"/>
  </picture>
  

  The src attribute in the img will be the fallback source of the image if the other sources are not found.

  Here are some commonly used breakpoints:

  • Mobile: max-width: 599px
  • Tablet: min-width: 600px and max-width: 899px
  • Desktop: min-width: 900px
  • Large Desktop: min-width: 1200px

  You can change the values to rem or em by doing some math. I used to use em not px for breakpoints but px is kinda used by pros too.

  Great work overall, keep up the grid!

  😁😁😁

  0
• 

  jad58200•20

  @jad58200Submitted about 11 hours ago

  What are you most proud of, and what would you do differently next time?

  I'm most proud of creating a clean and functional Simple Recipe page using basic HTML and CSS. It was a great way to practice the foundational skills of web development. Next time, I would focus on adding more interactive elements, like buttons for recipe navigation or a responsive design, to enhance user experience across different devices.

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

  Nothing.

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

  also nothing.

  

  Simple recipe page solved using basic HTML & CSS elements.

  #bootstrap

  1

  10
  

  Marzia Jalili•3,970

  @MarziaJaliliPosted about 8 hours ago

  Hats off!

  Some areas you can amend:

  • First, you can set a maximum width to the image to prevent it from overflowing from the container:

  max-width: 100%;
  

  This will ensure that the image's width won't be wider than the full width of it's parent.

  • Second, the bg color in the design is different from the one you have set, bro. You can find the exact colors in the style-guide file provided by the challenge.

  • Also, the font is different for the headings. You could link that specific font from Google to either your HTML or CSS and then set it only for the headings:

  h1, h2, h3 {
  /* i guess it is outfit or whatever that will be...*/
    font-family: "Outfit", sans-serif
  }
  

  Great job overall, keep up the grind!

  😁😁😁

  0
• 

  jad58200•20

  @jad58200Submitted about 11 hours ago

  What are you most proud of, and what would you do differently next time?

  I’m most proud of the simplicity and clarity I achieved by solving the problem with basic HTML and CSS. It’s satisfying to create a clean, functional layout with minimal code. The focus was on organizing the social links in a way that’s easy to understand and visually appealing. If I were to do things differently next time, I would explore using Flexbox or Grid to create a more responsive design, ensuring it adapts to various screen sizes. I’d also consider adding subtle hover effects to make the project more interactive and accessible. Additionally, enhancing mobile responsiveness and improving accessibility by adding aria-label attributes could make the project more inclusive. Overall, I’d look for ways to refine the design and add extra polish while keeping the simplicity intact.

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

  Nothing.

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

  Please feedback me with any missed points.

  

  Simple Social links profile solved using basic HTML & CSS code.

  #bootstrap

  3

  20
  

  Marzia Jalili•3,970

  @MarziaJaliliPosted about 8 hours ago

  Awesome work!

  A cherry on the top?

  • For the smoother color of the links you can use the transition property:

  Take the code below as an example:

  transition: color 0.5s; /* or .5s for short */
  

  This ensures that the colors will change after 500 milliseconds which makes it look even better.

  • Also, you can click the Generate new screenshot for a new screenshot of your web to draw your network's attraction.

  Great job overall, keep up the grind!

  😁😁😁

  0
• 

  P

  Boris•3,940

  @makogeborisSubmitted 7 days ago

  What are you most proud of, and what would you do differently next time?

  I’m most proud of successfully setting up dynamic routing in Astro and rendering MDX content.

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

  Details in README.md file in github repo

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

  All feedback is welcome. Thanks!

  

  Personal blog with Astro | Tailwind CSS | MDX

  #astro#tailwind-css

  2

  221
  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 6 days ago

  Running like clockwork!

  A cherry on the top?

  To make the web look even more attractive, you can change the selection color for the element to the same color you've set for the highlighters.

  Here's how:

  ::section {
    background-color: lightblue; /* you may change this to that exact color;*/
    color: black; 
  }
  
  /* and for firefox */
  ::-moz-selection {
    background-color: lightblue;
    color: block;
  }
  

  This will change the default blue to your desired colors. And yeah, I've come to know that we can't just set both at the same time because the code is the exact same, I mean like separating them by a comma. So, it must be set separatly.

  Hope it was something worth mentioning.

  😁😁😁

  0
• 

  Nafis Sazzad Niloy•150

  @methane-jsSubmitted 9 days ago

  What are you most proud of, and what would you do differently next time?

  I am mostly proud because I have successfully used JavaScript in this project.

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

  I encountered the challenge to make buttons of the questions. But when I used JavaScript the problem was solved.

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

  If you find any way to improve my solution, please let me know.

  

  Responsive FAQ Page using JavaScript

  1

  30
  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 9 days ago

  Hats off to you!

  A tiny area you could fix:

  • For some SEO puposes, you could opt to use the <button> element instead of the <div>. The button element will give enough information to the screen readers and specify it's actully a button.

  • The button elements come with some default styles that we must get rid of them in the challenge:

  button {
    border: none; /* removes the borders
    background-color: transparent; /* removes that gray bg color */
  }
  

  • Also, you may need to have some text for the button. Since we don't have any that can be rendered we must use the aria-lable instead:

  <button aria-label="toggles the answers"></button>
  

  In case you find any difficulties, fell free to let me know.

  😁😁😁.

  0
• 

  Nafis Sazzad Niloy•150

  @methane-jsSubmitted 9 days ago

  What are you most proud of, and what would you do differently next time?

  I have completed this project successfully.

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

  The challenge was to put the two ball size images in the background.

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

  I still see some problems on my project. The background is coming up on the main section. Please tell me if you know the solution

  

  Profile Card Using CSS Flex

  1

  30
  

  Marzia Jalili•3,970

  @MarziaJaliliPosted 9 days ago

  Flawless work as always!

  Here's the answer to your question:

  Since the circle image are only for some design purpose, instead of having them as HTML elements, you could set it as the background images of the body element.

  Here how I set them and it turn out perfectly:

  • Mobile styles:

  body {
      background-color: var(--dark-cyan); /* or the code of that blue color */
  
     /* first, set the images... */
      background-image: url('./images/bg-pattern-top.svg'),
          url("./images/bg-pattern-bottom.svg");
  
      /* second, position them according to the element... */
      background-position: top -50vw left -50vw,
        bottom -50vw right -50vw;
  
      /* prevent the images from repeating... */
      background-repeat: no-repeat, no-repeat;
  
     /* change the size to match the design */
      background-size: 120%, 120%;
  }
  

  • And then for desktop, change the sizes only:

  @media (min-width: 30em) {
      body {
          background-size: 70%, 70%;
          background-position: top -30vw left -20vw,
              bottom -40vw right -20vw;
      }
  }
  

  That is definitely going to work, for more clarity you could check out my solution for this challenge too.

  😁😁😁

  Marked as helpful

  0