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

Workit Landing Page - Grid & Flexbox

@clinto-bean

Desktop design screenshot for the Workit landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Styling used

  • Grid for displaying main sections and containers
  • Flexbox used for positioning internal elements
  • Experimenting with nth-of-child/nth-of-type pseudo elements Tools Used
  • For positioning the hero image, I did consult ChatGPT for some assistance as it was not responsive enough for my purposes
  • CSS, HTML5 with semantic markup
  • VS Code Dimensions
  • Mobile 375x810
  • Tablet 768x1280
  • Desktop 1920x1080 Areas of Opportunity I struggled mostly with positioning. I like to believe I have strong styling skills, in terms of being able to generate color schemes, create borders, etc., but struggle with positioning, especially when trying to create a responsive page. Javascript was not used as I am still at a very base level knowledge of Javascript, but I believe it may have actually been a more helpful idea to use for responsive positioning. As I am focused more on broad styling, I did not bother with the background pattern images, but if I am not mistaken the two within the hero section would be positioned absolutely with overflow hidden.

Please provide any feedback you can on both my styling and my actual code - I know it definitely needs refactoring, but I am not sure where to start.

Community feedback

kakuhd 60

@kakuhd

Posted

Henlo, before you read my feedback please be aware that everyone new to web-dev does some mistakes, so don't be discouraged but rather embrace it - learning part will never go away in your IT career and overtime you'll get better at it :) a few suggestions from my side:

  • desktop design was not implemented, it's all mobile layout for me
  • fonts are not scaled up on desktop screensize
  • the phone hero img looks too small on desktop
  • you can use .container class with max-width so the content on the page is limited vertically to the middle part of the screen (it matters on ultra wide monitors)
  • the light gray background in 1st section (look below the phone img) is white but should be light gray
  • socials at the bottom are not clickable
  • text in the purple div (founder message) should be placed into <p> tags. <span> is used rather for stying some part of a paragraph/header. (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)
  • instead of the last section you can use <footer> which is exactly for that :)
  • I'd put top navigation and hero section's content into <header> tag, right now it's not semantic
  • for text underline all you have to do is just to wrap text within <span> and add some styling for on :hover for border-bottom: 1px solid --var(your-var-name);
  • I'd avoid calling classes with names (.louis), content may change at some point so always name the class to what it does/represents
0

@clinto-bean

Posted

@kakuhd

Thank you! I didn't even realize until after I had uploaded the files that the features section changes with the display size. I did know that the bio section with the image of the founder was supposed to, but I struggled with positioning. Probably because I did not have a container div with both items in it.

As for the light gray background, the color is there, but for some reason is far lighter even though I used the color codes directly from the figma design. I didn't realize the underline was that easy until I looked at someone else's solution, lol

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