islandskan / test-your-skills

Web design assignment I built to the "IT - Tech for Women" course. The objective was to recreate a Figma design under 12 hours.

Test your skills frontend-challenge:

Challenge I did for the 'Women in Tech'-course, as the last assignment for the frontend module of the course.

The original challenge had a deadline of 12 hours, from the first commit until the last.

Challenge:

• The assignment was to recreate the given Figma design into a functioning webpage.
• To get as many of the criterias as possible.

Teacher's Criteras:

• 1. Valid HTML/CSS(no errors, warnings, etc)
• 2. Semantic markup(nav, navigation as list, section for sections, etc)
• 3. Everything should look like the design(fonts, colors, background, borders, etc). The only exceptions are large margins, paddings, and position. These are not allowed.
• 4. Use normalize.css or reset.css
• 5. Use Google Fonts and Font Awesome(if a font is not available for free, find the most similar free option)
• 6. All interactive elements such as buttons and links need to have hover and focus styling
• 7. Add a favicon to the website
• 8. Use Sass
• 9. Make sure the website is croww browser compatible by checking it in Chrome and Firefox. It should look similar/the same in both browsers
• 10. The page should be fully responsive down to 320px
• 11. The form should have validations
• 12. Completeness: It is better to aim for all the sections to be done but not perfect, instead of having only one section done perfectly. However, it is better to have one section donw ell than to have all sections be a complete mess. You need to find a balance between completeness and perfection.

Updates:

Starting to remkae this page, since the original one I submitted to the teacher was a mess

test-your-skills's Issues

To Fix

• Add hover to all interactive elements
• Fix the layout
• Set margin auto on body
• Fix the media queries from 660 px and below
• Put arrow icon inside the a-tag
• Fix the responsiveness overall

To fix

Add hover to all interactive elements (except the searchbar)

Fix layout

Margin auto on body

Media queries - from 660px screen width and below

Put the arrow icon inside the a-tag

Fix the responsiveness - with media queries