How can I create a parent div with 100% width and manually change the height at a specific breakpoint in Webflow, and have an image that covers the parent div as well as a gradient div on top, without using background images? And can you please provide guidance on how to learn these basic concepts in Webflow?

To create a parent div with 100% width and manually change the height at a specific breakpoint in Webflow, you can follow these steps:

1. Start by adding a div block to your Webflow project. Set its class name (e.g., "parent-container") in the Navigator panel.
2. By default, the div block will have a width of 100%, but you can double-check this by selecting the div block and checking its Width settings in the Styles panel. Make sure the Width is set to 100%.
3. To manually change the height at a specific breakpoint, you'll need to use media queries. Click on the Responsive icon in the top-right corner of the Webflow Designer.
4. In the Media Queries panel, select the desired breakpoint at which you want to change the height of the parent div.
5. With the parent div selected, go to the Styles panel. Adjust the height of the div block to your desired value for that specific breakpoint.
6. Repeat steps 4 and 5 for any additional breakpoints where you want to modify the height.

To add an image that covers the parent div and a gradient div on top, without using background images, follow these steps:

1. Place an image element inside the parent div. You can drag and drop an image from your computer onto the Webflow Designer or use an image from your project's assets.
2. With the image selected, go to the Styles panel. Set the position of the image to "Absolute" so it can be layered on top of other elements.
3. Adjust the width and height of the image to cover the parent div. You can do this by setting the image's Width and Height styles to 100%.
4. To add a gradient div on top, click the plus icon (+) within the parent div and add a new element, such as a div block.
5. Set the position of the gradient div to "Absolute" so it overlays the image.
6. Adjust the width and height of the gradient div to match the parent div.
7. With the gradient div selected, go to the Styles panel. Add a background gradient to create the desired effect. You can modify the gradient's colors, direction, and opacity to achieve the desired look.

To learn more about these basic concepts in Webflow, consider the following resources:

1. Webflow University: Webflow offers an extensive collection of tutorials, videos, and courses on their website. The Webflow University covers everything from the basics to advanced techniques. Start with their "Intro to Webflow" course, and then explore more specific topics like responsive design and positioning.
2. Community Forum: Webflow has an active community forum where you can ask questions, learn from others, and explore discussions on various topics. The forum is a great place to find inspiration and solutions to common challenges.
3. YouTube tutorials: Many Webflow experts and enthusiasts share their knowledge through YouTube tutorials. You can find step-by-step guides and walkthroughs on specific topics by searching for "Webflow tutorials" on YouTube.

Don't forget to practice and experiment with building websites in Webflow. The more you work on projects and explore different features, the better understanding you'll gain of the platform's capabilities.