@justinepeterson
Submitted
I had a tough time figuring out the best DRY approach, I would love to hear what the best DYR approach are there in relation to sass
Gavin
@DesignAssembly
All comments
- Gavin• 180
@DesignAssembly
Posted
Hi There is no "best DRY Approach" really but there are meaningful guidelines on how to implement styling to not create bloat. I find breaking down the site into "components" that are reused across the site. then create a class for those components and if there is a small change that needs to be added to one of the components i would just use the @extend method to extend on the components class. But other than that break down your sass files into digestible files so it becomes easier for your to see what it it your working on. use good naming convention when it comes to class names ( I use the BEM Model - works for me) hope this helps point your in the right direction
Happy Coding
Marked as helpful
0 - PHarm Intemann• 590
@ghintema
Submitted
I have one problem left that I simply don't understand and I hope for help. The black button in upper right corner (and only this one ) doesn't show hover-states when in tablet or desktop mode. It does however show hover state when in mobile mode. I don't get it why... :/ May be someone feels challenged to find the mistake in my code? Thanks a lot!!!!
Gavin• 180@DesignAssembly
Posted
Hi Harm
Good effort but there are quite a couple of issues that need to be addressed. To answer your question as to why your top button is not getting a hover state.. well firstly your large hero image is positioned absolute and its containing parent the "header" is positioned relative but your "topline" container which contains the logo and the button has no display property associated with it neither a z-index. So in order to fix your issue with your current code just add position relative to the topline with a z-index of 1.
Some other feedback is look at how you design your layout. you over complicating things. How i go about it is before i even touch code I do a rough sketch of the container structure and how i could lay them it in the simplest way possible. then once im ready ill lay them out either using flexbox or grid. If you not familiar with those two layout methods I would strongly suggest your look into them as they will help you a lot down the road.
Look at your Validation results and correct them is also a good first step.
Happy Coding
Marked as helpful
1 - Eriks Dobelis• 50
@phaethon
Submitted
When using flexbox with wrap - what techniques are recommended in such design to make upper and lower parts break at the same time? (i.e. changing image and layout in upper side while at the same time wrapping from 2 to 3 columns on lower side)
This was done using flexbox. Anybody done this using grid? pros/cons for that?
Gavin• 180@DesignAssembly
Posted
Yeah I used CSS Grid. just felt I had more control when setting up my grids. The one issue you have is that your sit is not "fully responsive".
meaning you have hard changes between the different viewport sizes instead of adaption seamlessly from one to the next whilst scaling. I just set a max-width for the main container then let grid do the rest whule scaling and set media queries where needed.Good Efffort - happy coding0 - Isaac Andrade• 40
@Isaaccna
Submitted
I need help to position the image
Gavin• 180@DesignAssembly
Posted
Hi Isaac dont overthink the positioning, there are many ways to solve it. I just used negative margins to position the image. To get consistency in the height of your "cards" usilize css grid or flexbox. I used css grid which gave me the good control over what it is I wanted to achieve.
Happy Coding
0 - Gavin• 180
@DesignAssembly
Submitted
Used this as a Timebox project to see if I can stick to the planned 1-hour time cap. was fun. any feedback always welcome
Gavin• 180@DesignAssembly
Posted
Hi @tediko, thank you for the feedback much appreciated. Yeah, my focus was definitely not on accessibility but more on layout and time boxing. if we really want to go down that rabbit hole then the first thing you need to add is a "skip to content" button (which is added in). there is way more to accessibility than a couple of tab functions. this page scored a 97 on the accessibility chart so I'm good with that. Added in the outline so all is good. thanks again and happy coding to you too.
0 - Eyram• 270
@EYRAM565
Submitted
all feedbacks are welcomed specifically for the background images and others, thanks.
Gavin• 180@DesignAssembly
Posted
Congratulations on your attempt to complete this project. Just looking through the site and code there are obvious glaring issues at hand. I would suggest you better familiarize yourself with concepts such as flex-box and understanding responsive design. Look at your solution vs the design and you will see you need to try to correct a couple of things in the layout.
One tip I can give you is to not set fixed widths to images but rather set with to 100% and the parent container holds the "width parameter for you to adjust. Before you even touch code look at the design and do a rough sketch of how you think you could set up your "containers and padding" to get the layout to look the same as the design, once you have that in place the rest becomes cosmetics.
You asked about your background image - firstly it is on the wrong container - maybe think of creating a wrapper container just below the body container that holds everything else. then set the background image on this container. tip - background-size is not contain :)
Happy Coding
0 - rafet• 925
@rafetbasturk
Submitted
Any feedback is highly appreciated. 🙏
Gavin• 180@DesignAssembly
Posted
Hi Rafet
Great work on the build. a couple of things I'd like to point out that may be of help. When a user clicks the selected pledge - maybe highlight that pledge already in the modal, with the cursor in the input box ready for the user to make his/her pledge. This way the user does not have to do the same action twice - just a little UX feedback.
Would also keep the modal fixed and not scroll with the whole container- but rather scroll the content inside the container - just personal preference I guess.
Once a user exits the modal then goes back with a different pledge, the previous pledge is still highlighted - maybe think of clearing out all pledges on close of modal and on close of thank you modal.
But from a javascript point of view - man that is some beautiful code!!!!! I'm nowhere on that level as I come from a UX background and currently learning my Javascript. That blew my mind. really something I will bookmark for myself to learn from.
I'm still trying to get my head around passing functions into other functions. - lol But well done !!!!!
1 - verywebdone• 190
@verywebdone
Submitted
Hi,
I used this project to get practice with SASS and improve my responsiveness skill. Any advice to get my CSS more dry would be appreciated.
Many Thanks.
D.
Gavin• 180@DesignAssembly
Posted
Welldone on completeing th challenge! I have a couple of suggestions to help you improve your code and representation thereof. Let's start with the most glaring issue as this creates a huge visual difference in the design - the box-shadows. Look at the design and look at your solution. you need to lower the opacity of your shadow quite a bit to give it a more subtle look. this will improve your design drastically. Next, I would suggest setting your wrapper div to a max-width of 1440px, the same as you have for the footer. Apply the same to your header tag.
the Header - I would suggest only have the logo and the "try free " button in there. Split the rest out into its own "hero" section, and put the background image on the hero section. then add position absolute to the header so you have the new "hero" section align to the top of your page.
Check your text alignment on desktop - should not be left-align instead of center-aligned.
From an Scss point of view, your specificity level is exceptionally deep. My suggestion here would be to think of each item as a component. in another word "can you strip it out with only its piece of HTML and SCSS and place it in another file and it would render almost exactly the same? example of this would be your "box" components. Kick-off your SCSS for this component apply this class only to these 3 elements and nothing else ie:
.box { background: white; padding: 2rem; box-shadow: 0 0 20px rgba(0,0,0,.2); display: flex; flex-direction:row; &__inner { display: flex: flex-direction: column; &--left { text-align: left; ... } } }as you can see no need to refer to the body tag or a div tag, you already have a class to that div tag. keep it at the component level. create good class names - read up on BEM model. great info on structuring your classes and CSS
other that that good job, and well done
0 - Gesiere• 780
@Gesiere
Submitted
Feedbacks are welcomed
Gavin• 180@DesignAssembly
Posted
Not a bad attempt. there are quite a couple of issues. not sure if you did not push all the code but in the live preview you have both your mobile and desktop menus visible. so need to sort that out. also there is no need to create two different menus you could just use the one and style it differently depending on your media query. Everyone seems to be battling with the placement of that background image - a suggestion would be to split the gradient from the image and place the image in its own container this way you have more flexibility for placement. you % zoom on the background-size to get this right. Maybe pay attention to spacing and vertical rhythm to get your solution closer to the design other than that, not a bad attempt. good job
1
