Skip to content
Submitted 10 months ago

Base Apparel coming soon page

Saktiā€¢190
@saktiajadeh
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, I'm Sakti, This is my solution in this challenge.

This is my first time & I am having difficulty with this challenge I have to make it with flow mobile first and make it as similar as possible to the design and also use the VeeValidate library to overcome validation & errors on the form.

Build, function or package i use:

šŸš€ Nuxt.Js

  • This project was installed using Nuxt.js v3.9.0

šŸš€ Vue.js Some of the functions from Vue.js that I use in this project are :

  • @click
  • ref variables
  • addEventListener javascript

šŸš€ HTML

  • Semantic Tags
  • Accessibility

šŸš€ Sass/Scss

  • Sass/Scss Variables
  • CSS Flexbox
  • CSS Animation with keyframes
  • CSS Media Queries
  • CSS Transitions
  • etc.

šŸš€ Sweetalert2 v11.10.3

  • Another library or packages for nice & easy to makes alert or message box

šŸš€ VeeValidate

  • Library to handle validation & error form

Any tips, comments & suggestion are welcome

Community feedback

  • Graceā€¢31,270
    @grace-snowPosted 10 months ago

    The accessibility needs improvement in this:

    • a link wrapping the logo should not open in a new tab and must have an accessible name so you know where the link is going. Currently the name is "image, logo"
    • the alt text on the logo must say the text of the logo
    • the images should be served with the picture element not two Img tags (performance issue rather than accessibility)
    • inputs must have a label
    • the rest of the field is not exposed in the code as you're importing it so I don't know if it's OK or not. The error message container must have aria live and be programmatically linked to the input with aria-desciribedby. It wouldn't normally have a name attribute but I don't know if that's what that prop is doing (I'm away from my computer so can't inspect in browser)
    • if sections don't have a heading (usually h2) they should be a div
    • do not use br to force line breaks. That should be done with max width (often in ch units on text elements). The br element will be announced as "break" to some screenreader users so is best avoided when possible
    Marked as helpful
    0
    Saktiā€¢190
    @saktiajadehPosted 10 months ago

    Hi @grace-snow, thanks a bunch for your awesome advice! I really appreciate your input on making things better. Your suggestions were spot on, and I wanted to let you know that I've already started making some updates. Your help means a lot, and I'm super grateful for your support and tips. Cheers!

    0

Please log in to post a comment

Log in with GitHub

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