Skip to content
Submitted over 2 years ago

Workit Landing Page - Grid & Flexbox

Clinto Bean•130
@clinto-bean
A solution to the Workit landing page challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • kakuhd•60
    @kakuhd

    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

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