Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Landing page mainly working with Flexbox

Stefanoβ€’ 250

@stefanovidmar2005

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


i had some issues when i started the project mobile first responsive as i found some of the markup had to be changed when i started making it desktop responsive πŸ˜‚.

I am proud however of pushing until the end and having the project look very similar.

also i used a regular jpg preview of the design without using FIGMA or SKETCH which was tricky decided what were the sizing and padding etc.. but overall very fun and exciting project to build. I definitely did not factor my CSS it can be a lot better but at least i was able to reach the end of the project πŸ˜ƒ

Community feedback

@VCarames

Posted

Hey there! πŸ‘‹ Here are some suggestions to help improve your code:

  • The header element should only be wrapping the "logo" and β€˜nav`.
  • The β€˜alt tag` description in the "logo" needs to be improved upon. The description should state the company name.
  • The Illustrations serve no other purpose than to be decorative; They add no value. Their Alt Tag should left blank and have an aria-hidden=β€œtrue” to hides it from assistive technology.
  • Your headings are being used incorrectly. When it comes to using headings, you are not allowed to skip heading levels. so "Stay productive, wherever you are", "Get early access today" are suppose h2 headings.
  • Your email input and button needs to be wrapped inside a form and have a visibly hidden label attached to it for improved accessibility.

More Info:πŸ“š

MDN Email Input

  • For the testimonial, it is best to to wrap the testimonial component in a figure element, the individual’s information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

Code:

<figure>
	<blockquote></blockquote>
 	<figcaption></figcaption>
</figure>

More Info:πŸ“š

MDN Figure Element

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding!πŸŽ„πŸŽ

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord