I go through the steps of taking an initial mockup, writing html, css layout, css styles and javascript to make a fully functioning webpage.

If you like the content so far, tweet @MannIsaac so I'll be motivated to finish the series.

I break down a design mockup into its semantic information and encode that information into html.  I also show how to use Emmet tab completion to help speed up the repetitive task of making large html files.

html

Create html from a design mockup using Emmet tab completion

CSS Grid and Flexbox are very useful tools for providing the overall layout of a page.  I take a specific design and create the high level layout using css grid and then arrange an individual section using flex box.

flexbox

Layout a webpage using css grid and flexbox

Most webpages are nothing but rectangles, but css can do circles too.  We use css transforms (specifically translate and rotate) to break out of the rectangle mode and create a page where elements are positioned along the edge of a circle.

From Mockup to Webpage

Isaac Mann

Course Content