A website draft can be a great way to get your layout down before beginning to code.
Adobe XD has a bunch of useful tools for web designers. You can start with a basic template, such as websites designed for mobile or computer viewing.
Next, you can play around with text, color, and element blocks using the shaping tools to the left of your screen (square, circle, triangle). I prefer to start off this way, creating shapes on my page where I plan to put texts and images. Then I will select the background colors I want.
Once I have the basic shape down, with proper visual hierarchy, I tend to go into text elements. I begin with the headers and down to the body p text. Lastly, I chose my images. Using the shaping tool beforehand will automatically adjust the images you place inside of them to the correct measurements. That is why starting off with your general layout will save you lots of time.
I hope that was a helpful guide for beginners! There is much more to learn once you get the basics of Adobe XD down.