Martin• 1,150
@ringm
Posted
Hey Faraz! Greay job on completing this one. The site looks really good. I have some suggestions to take it a step further:
- Accesibility Issues: your img tags are missing the ‘alt’ attribute, which specifies an alternate text for an image, if the image cannot be displayed. Also, you are using the backslash character () for the path of the imgs. You should use the forward slash symbol (/).
- Layout: I think the site would look much better if you make the background img stretch the whole width and height of the viewport. Right now you’re working with fixed units which is something you almost never should do in responsive design, its making and undesirable thick white frame all around the site. I would suggest placing the background image as a background img on a wrapper div, and then change the img according to the device on CSS.
- Carefull with the phrase “GB Left”, it has the wrong typography.
- You could get a much precise layout if you use flexbox for the general layout as well as the individual components. Try replacing your absolute positioned elements and the floats for some flexbox directives! Let me know if you have any questions, I’m happy to help! I leave you my solution to this challenge here in case you want to take a look at the code for some ideas.
Happy coding!
2
