Skip to content
OverviewSolutions
4
Comments
1
kakuhd
@kakuhd

All comments

  • Clinto Bean•130
    @clinto-beanSubmitted over 1 year ago

    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.

    Workit Landing Page - Grid & Flexbox

    1
    kakuhd•60
    @kakuhdPosted over 1 year ago

    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