Responsive website using HTML & CSS

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in desktop seems fine, though it is much shorted than the original, some elements as well are missing like the background-wave-images. The mobile layout seems fine as well I think but I don't know if the text are supposed to have those huge gap between them.

  Well you can learn js, but do not be derailed like going through the data structures and algorithm right now, you can learn those later but for now, go with just basic, with dom manipulations. Learning algo-ds right now will just confuse you to where to use them, dom manipulations should be first because you will very much use them.

  Some other suggestions would be:

  • The huddle-website-logo-link, the img should have alt="huddle" on it, since the logo itself have the text, better use it as the alt value when it is an img.
  • The a tag as well that holds the logo-link should have aria-label="homepage". This aria-label is an attribute that is used to an element who doesn't have any text inside it that could describe what is the element is all about. Since as you can see, the a tag have an img inside it, but there is no text, so when you use aria-label on the a tag, the value of that attribute serves as the text for it. You will use a lot of this on a tags especially when the content inside it have no text. The reason that it should be aria-label="homepage" is because, typically the website link points the user to the homepage right, this way, users will know that this link will lead them to the homepage.
  • Do not remove the outline property on elements, outline serves as a visual indicator for users, for example, try using the tab keys in your keyboard, you should navigate the button or a tags with it, but since the outline: none is present, there is no indication to where you are at right now. If you removed it, better use some visual in the :focus-visible state of the element in the css.
  • I think those try for free and get started for free will be much great if they were a tags, since right now, it doesn't look like those are supposed modals of some sort, where button are much use.

  FOOTER

  • The website logo img should also use alt="huddle" on it.
  • The social media links should be inside a ul element, since those are list of social media links.
  • Each a tag that wraps the social media icon should have aria-label since it doesn't contain any text. For the facebook, it should be like aria-label="facebook".
  • The input along with the button should be inside a form element, since that will server as a form to be submitted.
  • The input as well should have label element on it, so that there will be a text that will be read when the user navigated on it, or instead, you could use aria-label on it, like aria-label="enter your email", this way, users will know what to input.

  Aside from those, great work.

  Marked as helpful

  1

  ---

  

  Medjahdi Islem•275

  @IslemMedjahdiPosted about 3 years ago

  @pikamart

  • These tips are really helpful. Thank you so much!
  • In terms of algorithms, I'm actually an undergraduate computer science student so I'm good at algorithms as well as data structures like trees & linked list... , From your comment I learned many things like the aria-label and the relationship between tab and the outline.
  • I will do more HTML/CSS mini challenges then I will start learning JavaScript.

  1
• 

  Bikrant Malla•990

  @vikrantmallaPosted about 3 years ago

  Add background in div three and seven. Learning JS makes it easier to develop a website but now HTML/CSS worked fine.

  1

  ---

  

  Medjahdi Islem•275

  @IslemMedjahdiPosted about 3 years ago

  @vikrantmalla Thank you so much for your reply ❤

  0