Yaroslav Sventsitskiy

Latest comments

• 

  Simon Hickling•340

  @SimonHicklingSubmitted 27 days ago

  

  Responsive Grid Layout

  1

  00
  

  Yaroslav Sventsitskiy•160

  @yarsventPosted 27 days ago

  Good job! It looks quite accurate to the solution!

  Some things to consider:

  • The minimum screen size is too low. On laptops which have a width of 1440px the page will be displayed in mobile view.

  • The colors are not accurate. Use the style guide provided by the task to get better colors. Also, use the correct font and font weight for page elements.

  0
• 

  Charles7458•80

  @Charles7458Submitted about 2 months ago

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

  I'm proud of the JavaScript I wrote for this webpage.

  if(window.innerWidth<=430) {
      document.getElementById("img").src="mobile.jpg";
  }
  

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

  I didn't know how to change the image according to screen width. I used JavaScript to do it.

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

  Any suggestions are welcome. :)

  

  Responsive product page using media queries and JavaScript

  #sass/scss

  1

  10
  

  Yaroslav Sventsitskiy•160

  @yarsventPosted about 2 months ago

  Good work, it looks the same to me!

  Some suggestions:

  • Use rem instead of px. There are many reasons to do this, including accessibility and responsiveness of the website

  • To change the image depending on screen width, you can use the picture element with a media attribute on its source elements. Like this:

  <picture>
    <source srcset="images/image-product-desktop.jpg" media="(min-width: 40rem)">
    <img src="images/image-product-mobile.jpg" alt="A picture of 
    the perfume.">
   </picture>
  

  You can read more about responsive images here and about using <picture> for responsive pages here

  0
• 

  Lawal Mutairu•90

  @Mutairu-LawalSubmitted about 2 months ago

  

  Built a fully accessible contact form with Scss,HTML,CSS,Js & Jquery

  #sass/scss#jquery

  1

  20
  

  Yaroslav Sventsitskiy•160

  @yarsventPosted about 2 months ago

  Quite an elegant solution! I love how readable and well-organized the code is, comments are where they should be and it is easy to read. The page is also accessible and responsive, can be navigated with the keyboard. The solution lacks semantic HTML. Add sections to the form, as well as the <main> tag. The style is similar to the original design, but some improvements can be made, adjust width, font sizes and colors of elements. Also, the radio and checkbox buttons are too big

  Marked as helpful

  0
• 

  Elilly17•20

  @Elilly17Submitted 10 months ago

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

  I would say i'm glad i was able to search through web documentations, and was able to get the perfect tags i didn't have proficient knowledge on.

  Before next time,i'll make sure to get and learn as much knowledge on html and css codes. This would thus, help me do a quick and good project and ease my working processes.

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

  I encountered challenges in making my tables and table alignment. I overcame through critical study and practice on web documents such as w3 and MDN ( the both helped a lot). Sometimes, most times, ensure to understand every bit about a HTML and CSS code.

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

  I would like help with my sizes being displayed on whether a mobile device or desktop.

  

  omelette recipe by Elizabeth lilly

  #accessibility

  1

  21
  

  Yaroslav Sventsitskiy•160

  @yarsventPosted about 2 months ago

  Congrats on finishing the challenge! This one requires styling lists and tables, and yours are well-made.

  To display the website differently on mobile, you can use media queries.

  @media (max-width: 450px) {
    .container {
    /* Mobile style goes here */
    }
  }
  

  This will make your CSS look different depending on screen size. Try to optimize it for a width of 375px (as given in the task.

  To test your website on different devices, you can use the Chrome tool called device mode.

  More info here

  0
• 

  KwameSA•40

  @KwameSASubmitted 11 months ago

  

  Responsive Social Links Page

  #accessibility

  1

  40
  

  Yaroslav Sventsitskiy•160

  @yarsventPosted about 2 months ago

  Good job on finishing the challenge! I see you have implemented the media query and used Google Fonts API to style the fonts.

  A few things to consider:

  • Define variables for colors at the start for easier implementation. For example:

  :root {
   --grey900: hsl(0, 0%, 8%);
  }
  body {
    background-color: var(--grey900);
  }
  

  • Surround your container with another div, written like this:

  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  

  to center the card horizontally and vertically.

  • The box stretches on bigger desktop devices. Add a width or a max-width attribute to it.

  Marked as helpful

  0
• 

  P

  Emil Raubach•140

  @emil-raubachSubmitted about 2 months ago

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

  I like how I used CSS grid and Flexbox to get the layout to look how I want as well as make the card responsive with a simple media query.

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

  Mostly minor issues or things I haven't encountered frequently like CSS properties for strikethrough text, letter-spacing, etc. Also, I haven't dealt much with svg's so adding the cart to the button was new. Using multiple images was something I have read about but not really implemented. I searched for info on the web, but not gonna lie, I used ChatGPT to get most of the information for these items.

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

  Not much really. Only two minor items come to mind:

  • How to center the cart svg horizontally? Can't seem to get it exactly how I want.
  • When the screen changes orientation on the mobile design it looks a bit wonky and stuff spills out of the container.

  

  Responsive product preview card using Flexbox and CSS grid

  #bem

  1

  20
  

  Yaroslav Sventsitskiy•160

  @yarsventPosted about 2 months ago

  Good job! The code is well-organized and you got quite close to the original image. The cursor changing to a pointer is a nice touch To center the cart svg, you can put it in an <img> tag and then include in one container with the text. Then style the container like this:

  display: flex;
  align-items: center;
  

  Worked for me

  Marked as helpful

  0