We kick off Day 1 with a very simple objective. Translate a basic layout from a screen design tool like Sketch, Figma or Adobe XD to a web page using the no-code Webflow Designer.

We'll explore some of the most frequently encountered CSS properties in web layout—margin, padding and flex box. With just three properties we'll construct the scaffolding of our page layout using a section/container/content model.

These simple tasks will introduce you to fundamental concepts of web layout—typography, the DIV element and CSS classes.

Our second lesson starts where we left off the day before. This time taking it a step further by adding content to our layout, in the form of text and images.

We'll spend a bit of time on typography, it's the most fundamental part of web design, and builds a strong foundation. We'll explore the best practices of using and styling headings, paragraphs, lists, links and block quotes. We'll once again use the margin and padding properties to specify layout.

Next up images. Two types, background and content images, the difference between them and ways to handle them with the introduction of new style properties for each.

Designing for every screen or at the very minimum, desktop and mobile, is standard in modern web design. Webflow makes responsive web design (RWD) easier than ever with its visual designer. On the final day of this beginner course, we'll convert the desktop layout we've built into a mobile responsive one.

We'll use device breakpoints to apply different layouts to page elements so they appear correctly on a smaller screen. But we won't stop at just one mobile layout, we'll create several by pushing the limits of what we can do by using the powerful features of CSS Grid and Flex-Box.

At the end of this beginner course you'll have learned the fundamentals of web design and layout, along with a powerful tool to get you up to speed quickly. It will pave the way for you to create a basic site in Webflow, like your portfolio or a simple landing page.