Hi,
I’ve been dipping a toe into the waters of Webflow for the last few days, and I’m finding myself constantly struggling with some core concepts.
A couple of notes:
- I’m not a web designer - my background is in animation/illustration - but I have a general understanding of HTML and CSS core concepts.
- I’m interested in creating webpages with parallax scrolling elements and integrated After Effects output that can tell stories using a combination of text and imagery.
- I recognise that some of that stuff is quite advanced, so at this stage I’m simply trying to make a page with some sections and text on it, to learn some of the very basics.
The project I have set myself is to make a single page that is divided into 8 sections, all 100 vh, that contain text boxes with the words from the nursery rhyme ‘three blind mice’. I want to be able to position these with each section, and I’ve also coloured each section’s container so I can see what I’m doing more easily. All I’m trying to achieve at the moment is that when the user scrolls down the page, they can read the nursery rhyme. Very very simple stuff. I will explain how I’ve done it, which I suspect is really not the best way.
I have used text blocks within each container, and positioned them relative to the container to be able to move them around the page. I immediately found that when I moved the position of one, they all moved because they were the same class. So I duplicated the class of each text box as I created it, to make a new one, so I could affect the position of each independently.
This seemed to work and I was able to layout all eight pages to my satisfaction. However, when I then changed the breakpoints to see how it would appear on different devices, it quickly became a mess. The font size didn’t scale down, which is what I wanted to happen. I tried to change the font size for different break points, and realised that because they were all different classes, I had to change each one individually.
I have a suspicion that I’m not using classes properly, or that I should be using tags, but I can’t wrap my head around either of these things sufficiently. I wish there were a manual rather than all these short tutorials, or an actual tutorial that took me, step by step, through the building of a very simple project. Does anyone know of any resources of this kind?
I have felt this helpless at the beginning of learning other software, like After Effects, but recognise that some paradigm shift occurs as I get my head round something, and I’m hoping that the same may be true for Webflow. Any help or guidance would be much appreciated.
thanks in advance,
Joe
Here’s a link to my site: https://preview.webflow.com/preview/joes-blank-site-bdc24d?utm_medium=preview_link&utm_source=dashboard&utm_content=joes-blank-site-bdc24d&preview=e0a4a2a33ccf9e4050c4a73caa7c27cf&mode=preview
Please note I messed with the first section after the title screen (three blind mice, three blind mice) in order to try and rectify my problems. The subsequent sections are a better demo of what I’m trying to achieve.