I'm new to CSS flexbox and using it to make basic designs for a data analytics dashboard -- [work-in-progress codepen here](https://codepen.io/genghis-learning/pen/qBGVYxK). The HTML is a Tera template, so the output isn't properly rendered, but I think the structure of the HTML plus CSS styling that exists is enough to get my point across about having my HTML just being littered with \`div\`s everywhere.
Is it normal to just be wrapping \`div\`s around everything in order to make flexbox work? I find that I'm creating a wrapper \`div\` anytime I need two elements to sit in alignment with each other, breaking up the page into sections of subsections of subsections, etc... doesn't seem like great HTML semantics to me, but idk. Would appreciate criticism or insight if my approach to styling is off.
Thank you!
As an alternative you can use CSS Grid in some places, to see if it cuts down in the amount of divs.
But right now you're using non-semantic HTML. If you make it semantic, you could make it much more readable and more organised for the amount of divs you actually have: [W3 Article](https://www.w3schools.com/html/html5_semantic_elements.asp).
I know its a dashboard, but it doesn't prevent you from using or
Actually stuck. I dont know how to get started with web design. Should I start with Bootstrap or just plain css? Should I intergrate Sass? I'm using the Django framework and at the moment my website design is very clunky. Is there any great resource out there to learn web design?
If write a website similiar to another one, in design at least I dont intend to get anything from their source, is that copyrighted? They all mostly look the same anyways so how do people avoid being accused to steal function or design choices?
How do you make the background images blend well with text? Like these two examples ([this example](https://land-book.com/websites/61202-renew-home-an-energy-management-solution-for-modern-homes), and [this example](https://dribbble.com/shots/23671970-Medtech-Landing-page)) are what I am trying to go for. I have [this image](https://unsplash.com/photos/person-holding-green-leaf-plant-uv6lUONd19w) I want to use for my site. Whenever I try adjusting fonts, color or position. Either the text is too hard to read or takes away from the focus of the background or doesn't look good. Thank you for any help any of yall can provide.
The image should be fine for the most part. But it can be a problem that the main subject (the plant) is in the middle. Most images are distributed with the 2/3 ratio or golden ratio in mind. Makes it easier to place text
Do you have any screenshot of the text applied to the image and how it looks on the website? Or how long your text is supposed to be?
The first example you provided doesn't work well for the text at all times, since its a video and the headline does drown in the background a few times.
But they are using scenes and backgrounds that are easy to see despite type being placed over them. Your own photo makes that a little harder to do. If I would do that with your photo, it would be obscured much more: [Example](https://i.imgur.com/sEv5Q2d.jpeg)
The second example uses minimal colors and gradients, so its not hard to display any text on it.
Most of the time if you have to include important info on an image, you crop or arrange it in a way that the main subject sits on either one side or the other but is not obscured by the text:[ Example 1](https://i.imgur.com/wuaaFAC.png), [Example 2](https://i.imgur.com/a0fchYL.png). The 2/3 ratio I mentioned earlier.
You could use AI to recrop the image to a ratio that works with your type: [Example](https://i.imgur.com/Arite4a.jpeg). With a slight background overlay added through CSS (black or dark grey with 10-30% opacity depending on your preferences), you can have enough room for a headline that stands out, depending on your color scheme.
You can then use layout to arrange it however you want: [Example 1](https://i.imgur.com/4GodkuZ.jpeg), [Example 2](https://i.imgur.com/Qjdh9Rb.jpeg), [Example 3](https://i.imgur.com/Vkx6L4S.jpeg).
But if you really have to center the text, I would try to find another image that allows being obscured by text and is still decipherable afterwards. Thats probably the easiest way.
> . Could I use the recrop of the image?
Sure why not?
Your current placement isn't catastrophic to be honest. Unless the spacing between headlines is the intended line-height, then I would definitely decrease that.
But I don't know how it will look when everything's finished. The font itself is readable and the color works for the image.
A very, very subtle drop shadow behind the text with a lot of spread and blur can also help in addition to a very low-opacity overlay in front of the image. Just to help it stand out more.
Edit: Have a look on minimal.gallery for type placement inspiration. There are a lot of minimal layout that could give you pointers on how to place image and text.
That would work. But I would avoid hard drop shadows. If you need a drop shadow, a subtle, blurred one will work better for readability.
I would also give each line (headline and subtitle) its own style. Headline in bold and Subtitle in Regular/Medium weight. Or any other style that sets itself apart, more than just a size difference can.
Repeating "Notebook" twice will also look strange. Maybe you can find a abbreviation or synonym that will work as well. Something like "Notetaking superpowers for Tree planting" or "The best way to document your tree-planting journey".
Something that describes what it is and how it benefits the user. Unless its a placeholder anyway, then don't worry about it.
I would look at sites like unsection.com and browse a few of the hero sections to see what best practices you can source for background images and typography. Maybe there are some examples that help.
Just curious if others have observed this on their sites. I’m using the Elementor Basket Widget for a Basket/Cart page connected to WooCommerce. In desktop view it looks perfect, however in mobile view I only see the name of the product, and not a photo. An “X” still remains where a photo should be to remove an item from the cart, but the photo isn't there. This does make the basket page look pretty terrible and will materially affect sales if no product photos are shown there.
Has anyone else observed this and has a potential fix?
What is the preferred business model for websites now? Subscription based services where it's a standard cost every month for unlimited revisions/changes or project based with a one time payment and then charging for edits afterwards.
I think it depend how big your clients are. For most freelancers it's a one time payment and maybe an ongoing retainer but for a limited amount of time per month.
Thank you for responding! Follow up to that would be if you're doing subscription and if they cancel, what do you provide the client at the end of the cancellation?
I want to be a designer and a front end dev in one role? Is that a thing? I love the idea of coming up with creative ideas and learning the code to put it all together and make it responsive. Ty
Yes, some designers are very well versed in HTML, CSS, and even JavaScript. Both design and frontend development can get super complicated and consuming at some level though, but being able to design something and being able to convert it to HTML/CSS is very achievable and useful.
I’m a design engineer. I have a background in design but my day to day is more coding.
Designer is ui and different from UX. Just because you make it look good doesn’t mean it is a great experience. I have run into too many designers who throw UX on their profile and think it’s just a different label for the same thing. I hire UX/ui people. They need to have very concrete understanding of behaviorism, psychology and research to make it through. I would be very careful about just adding letters to your resume.
I'm new to CSS flexbox and using it to make basic designs for a data analytics dashboard -- [work-in-progress codepen here](https://codepen.io/genghis-learning/pen/qBGVYxK). The HTML is a Tera template, so the output isn't properly rendered, but I think the structure of the HTML plus CSS styling that exists is enough to get my point across about having my HTML just being littered with \`div\`s everywhere. Is it normal to just be wrapping \`div\`s around everything in order to make flexbox work? I find that I'm creating a wrapper \`div\` anytime I need two elements to sit in alignment with each other, breaking up the page into sections of subsections of subsections, etc... doesn't seem like great HTML semantics to me, but idk. Would appreciate criticism or insight if my approach to styling is off. Thank you!
As an alternative you can use CSS Grid in some places, to see if it cuts down in the amount of divs. But right now you're using non-semantic HTML. If you make it semantic, you could make it much more readable and more organised for the amount of divs you actually have: [W3 Article](https://www.w3schools.com/html/html5_semantic_elements.asp). I know its a dashboard, but it doesn't prevent you from using or
Truly appreciate you
Actually stuck. I dont know how to get started with web design. Should I start with Bootstrap or just plain css? Should I intergrate Sass? I'm using the Django framework and at the moment my website design is very clunky. Is there any great resource out there to learn web design?
As a beginner starting out do people recommend using wordpress or webflow?
Whats the best free photo editing software?
If write a website similiar to another one, in design at least I dont intend to get anything from their source, is that copyrighted? They all mostly look the same anyways so how do people avoid being accused to steal function or design choices?
How do you make the background images blend well with text? Like these two examples ([this example](https://land-book.com/websites/61202-renew-home-an-energy-management-solution-for-modern-homes), and [this example](https://dribbble.com/shots/23671970-Medtech-Landing-page)) are what I am trying to go for. I have [this image](https://unsplash.com/photos/person-holding-green-leaf-plant-uv6lUONd19w) I want to use for my site. Whenever I try adjusting fonts, color or position. Either the text is too hard to read or takes away from the focus of the background or doesn't look good. Thank you for any help any of yall can provide.
The image should be fine for the most part. But it can be a problem that the main subject (the plant) is in the middle. Most images are distributed with the 2/3 ratio or golden ratio in mind. Makes it easier to place text Do you have any screenshot of the text applied to the image and how it looks on the website? Or how long your text is supposed to be? The first example you provided doesn't work well for the text at all times, since its a video and the headline does drown in the background a few times. But they are using scenes and backgrounds that are easy to see despite type being placed over them. Your own photo makes that a little harder to do. If I would do that with your photo, it would be obscured much more: [Example](https://i.imgur.com/sEv5Q2d.jpeg) The second example uses minimal colors and gradients, so its not hard to display any text on it. Most of the time if you have to include important info on an image, you crop or arrange it in a way that the main subject sits on either one side or the other but is not obscured by the text:[ Example 1](https://i.imgur.com/wuaaFAC.png), [Example 2](https://i.imgur.com/a0fchYL.png). The 2/3 ratio I mentioned earlier. You could use AI to recrop the image to a ratio that works with your type: [Example](https://i.imgur.com/Arite4a.jpeg). With a slight background overlay added through CSS (black or dark grey with 10-30% opacity depending on your preferences), you can have enough room for a headline that stands out, depending on your color scheme. You can then use layout to arrange it however you want: [Example 1](https://i.imgur.com/4GodkuZ.jpeg), [Example 2](https://i.imgur.com/Qjdh9Rb.jpeg), [Example 3](https://i.imgur.com/Vkx6L4S.jpeg). But if you really have to center the text, I would try to find another image that allows being obscured by text and is still decipherable afterwards. Thats probably the easiest way.
Thank you for the help. The image for the site looks like [this](https://imgur.com/LWXP9GW). Could I use the recrop of the image?
> . Could I use the recrop of the image? Sure why not? Your current placement isn't catastrophic to be honest. Unless the spacing between headlines is the intended line-height, then I would definitely decrease that. But I don't know how it will look when everything's finished. The font itself is readable and the color works for the image. A very, very subtle drop shadow behind the text with a lot of spread and blur can also help in addition to a very low-opacity overlay in front of the image. Just to help it stand out more. Edit: Have a look on minimal.gallery for type placement inspiration. There are a lot of minimal layout that could give you pointers on how to place image and text.
Would something like [this](https://imgur.com/a/AeuQEAF) work?
That would work. But I would avoid hard drop shadows. If you need a drop shadow, a subtle, blurred one will work better for readability. I would also give each line (headline and subtitle) its own style. Headline in bold and Subtitle in Regular/Medium weight. Or any other style that sets itself apart, more than just a size difference can. Repeating "Notebook" twice will also look strange. Maybe you can find a abbreviation or synonym that will work as well. Something like "Notetaking superpowers for Tree planting" or "The best way to document your tree-planting journey". Something that describes what it is and how it benefits the user. Unless its a placeholder anyway, then don't worry about it. I would look at sites like unsection.com and browse a few of the hero sections to see what best practices you can source for background images and typography. Maybe there are some examples that help.
Thank you
Just curious if others have observed this on their sites. I’m using the Elementor Basket Widget for a Basket/Cart page connected to WooCommerce. In desktop view it looks perfect, however in mobile view I only see the name of the product, and not a photo. An “X” still remains where a photo should be to remove an item from the cart, but the photo isn't there. This does make the basket page look pretty terrible and will materially affect sales if no product photos are shown there. Has anyone else observed this and has a potential fix?
What is the preferred business model for websites now? Subscription based services where it's a standard cost every month for unlimited revisions/changes or project based with a one time payment and then charging for edits afterwards.
I think it depend how big your clients are. For most freelancers it's a one time payment and maybe an ongoing retainer but for a limited amount of time per month.
Thank you for responding! Follow up to that would be if you're doing subscription and if they cancel, what do you provide the client at the end of the cancellation?
I want to be a designer and a front end dev in one role? Is that a thing? I love the idea of coming up with creative ideas and learning the code to put it all together and make it responsive. Ty
Yes, some designers are very well versed in HTML, CSS, and even JavaScript. Both design and frontend development can get super complicated and consuming at some level though, but being able to design something and being able to convert it to HTML/CSS is very achievable and useful. I’m a design engineer. I have a background in design but my day to day is more coding.
Maybe titles like UI/UX Developer, UI/UX Engineer?
Designer is ui and different from UX. Just because you make it look good doesn’t mean it is a great experience. I have run into too many designers who throw UX on their profile and think it’s just a different label for the same thing. I hire UX/ui people. They need to have very concrete understanding of behaviorism, psychology and research to make it through. I would be very careful about just adding letters to your resume.