Frontend Mentor | kakuhd's profile

@clinto-bean

Submitted 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

kakuhd• 60

@kakuhd

Posted 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

kakuhd

All comments

Workit Landing Page - Grid & Flexbox