Learning Website Design & Development, step by step.


Section is for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries). It's considered best practice to begin each section with a heading; also note that you can break up into different sections, depending on the context.


CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).

Margins, Padding, Layouts


As the name suggest, columns are layout methods we have in CSS in that it fragments the content, including all descendent elements, into columns.

Heading, Text Block, Label, Paragraph, Link Block

Navigation, Footer, Dropdown

Self Explanatory


An accordion is used to show (and hide) HTML content.

Contact Forms, Subscribe Form

Self explanatory

Call to Actions (CTA)

A call to action (CTA) is a prompt or section on a website that tells the user to take some specified action. ... In digital marketing this can take the form of the text on a button (a CTA button) or a web link and in email campaigns CTAs are often links to a web page where the user can take further action.

Framer X

FramerX is an Advanced Design tool. It's more like Sketch, Figma and other design tools out there. Its a major plus is the High level of Interaction designs you can provide for your pages and also build React code components in the FramerX itself.


Figma is a vector graphics editor and prototyping tool. It is primarily web-based, with additional offline features enabled by desktop applications.


Canva is a graphic design platform that allows users to create social media graphics, presentations, posters and other visual content. It is available on web and mobile, and integrates millions of images, fonts, templates and illustrations.

The Noun Project

The Noun Project is a website that aggregates and catalogs symbols that are created and uploaded by graphic designers around the world.