Be taught HTML + CSS with Tales

Each idea is gently launched with tutorials and instance code

Begin out with a visible code editor in your browser

Graduate to working in your native machine throughout the course

Be taught not solely the way to code, but in addition how the online works

Comply with your nostril wherever it takes you, and make pals and enemies alongside the way in which

Herd geese, trade tales with a madman, and defuse traps

Cut price for marbles, construct bridges, and draw faces for an outdated woman

Fulfill your future – the constructing of your personal web site!

Earn the straightforward farmer’s potato (Chapter 1 – HTML & CSS Fundamentals)

Battle for the fashionable paladin’s feather (Chapter 2 – Superior CSS Styling)

Steal the structure wizard’s jewel (Chapter 3 – Flexbox & Grid Format)

Get the publishing spider’s e-book (Chapter 4 – Get it on-line)

And trick the cell monkey for his mirror (Chapter 5 – Cell)

Arrange your web site (present a “hiya world” message)

Use completely different types of textual content and keep organized (headers, paragraphs, feedback)

Begin with styling your textual content in-line (immediately within the HTML doc)

Use a customized font in several types (common, daring, italic)

Experiment with colours for textual content and background (rgb, hex, and css colours)

Add photos to your web site, and work with transparency (jpg, png)

Make your stylings reusable (write a CSS file with lessons)

Put parts into different parts, or set them aside (padding, margin)

Hyperlink to different web sites, or to pages inside your web site (hyperlinks)

Get artistic with shapes (strains, rounded buttons, circles, and bins)

Construct fancy buttons (hover results and rounded corners)

Beef up your visuals with animated photos and vector graphics (gif, svg)

Make your photos much more snazzy (filters, textual content, and spherical photos)

Check out various kinds of shadows (“blurry” gentle, “artsy” onerous)

Give your shapes and backgrounds a shade gradient (linear, radial)

Make your textual content dazzlingly multi-colored (textual content gradients)

Perceive flexbox ideas (1-dimensional, “content-first”)

Begin out with flexbox horizontal positioning (button with textual content and an svg)

Get artful in horizontal positioning (navigation bar with gaps)

Put a number of textual content columns subsequent to one another (footer multi-column structure)

Construct one thing massive with flexbox (web page structure with header, physique, and footer)

Discover out about grid fundamentals (2-dimensional, “layout-first”)

Be taught grid second positioning (picture tiles of the identical dimension)

Escape from the proper grid (completely different distances and picture sizes with a masonry-type structure)

Use grid for the massive image (web page structure with header, physique, and footer)

See Also

Drunk Grizzlies Hold Getting Hit By Trains In Montana

Layer parts on prime of one another (z-index, relative and absolute positioning)

Create a “sticker impact” (partial overlap with damaging margins)

Get your ft moist (add web site with netlify drop)

Go area procuring (register your area with a registrar)

Wrap your head round DNS file varieties (CNAME, TXT/SPF, A, and MX)

Be taught concerning the internet (area fundamentals, TTL, and community propagation)

Select your webhost (listing of advisable hosts – no associates)

Carry it to life (navigate directories and add recordsdata)

Arrange an e mail handle (configure e mail host and e mail consumer)

Make modifications to your operating web site (browser cache)

Present completely different device-dependent layouts (media queries based mostly on display sizes)

Embrace mobile-friendly design (font dimension, zoom, distinction, and horizontal scrolling)

Enhance loading instances (optimize picture sizes, and lazy loading)

Construct easy responsive structure (one-column flexbox structure for desktop and cell)

Create cell navbar (hamburger that exhibits full-screen nav when clicked)

Slender your grid (variety of columns relying on display width)

Work smarter not tougher (design layouts to be simply translatable to cell, or mobile-first)

Develop and collapse gadgets (faq part with particulars and abstract parts)

Be strategic about what to indicate (make the very best of restricted house, disguise parts)