Frictionless FRONT-ENDS FOR BACKEND DEVELOPERS. @MANDY_KERR
Frictionless FRONT-ENDS FOR BACKEND DEVELOPERS. @MANDY_KERR
MANDY MICHAEL @MANDY_KERR
HTML & CSS JS. @MANDY_KERR
& HTML CSS @MANDY_KERR
@MANDY_KERR
Choosing THE RIGHT TYPE. @MANDY_KERR
interface dog { name: string age: number isFluffy: boolean } @MANDY_KERR
Be explicit ABOUT THE SHAPE OF THE CONTENT. @MANDY_KERR
<html> <body> <header> <h1>Jello</h1> </header> <main> <h2>Is he a fluffy fellow?</h2> <p>Jello is indeed a fluffy fellow.</p> <figure> <img href =“jello.png" alt ="A golden retriever" /> <figcaption>Jello eating a marshmallow.</figcaption> </figure> </main> </body> </html> @MANDY_KERR
interface dog { name: any age: any isFluffy: any } @MANDY_KERR
<html> <body> <div> <div>Jello</div> </div> <div> <div>Is he a fluffy fellow?</div> <div>Jello is indeed a fluffy fellow.</div> <div> <img href =“jello.png" alt ="A golden retriever" /> <div>Jello eating a marshmallow.</div> </div> </div> </body> </html> @MANDY_KERR
SECTIONING ELEMENTS. <section> <article> <nav> <aside> @MANDY_KERR
CLEAR STRUCTURE AND HEIRARCHY. <header> <footer> <h1> <h2> <h3> @MANDY_KERR
MAKE THE MOST OF HTML’S BUILT IN FUNCTIONALITY. @MANDY_KERR
DIVS. SPECIFIC HTML. @MANDY_KERR @MANDY_KERR
LIGHTHOUSE @MANDY_KERR
@MANDY_KERR
Understanding CSS, SCSS, CSS in JS @MANDY_KERR
Tricks for CHOOSING FONTS @MANDY_KERR
fontpair.co/fonts fonts.google.com @MANDY_KERR
@MANDY_KERR
Simple tricks for LAYOUTS WITH CSS @MANDY_KERR
Header Navigation Sidebar Main Content Footer @MANDY_KERR
3 COLUMNS Header Navigation Main Content Sidebar Footer FIXED FLUID FIXED @MANDY_KERR
FIXED AT 200PX FIXED AT 250PX . page { display: grid; grid-template-columns: 200px 1fr 250px; } @MANDY_KERR
. page { display: grid; grid-template-columns: 200px 1fr 250px; } FLUID FRACTION UNIT @MANDY_KERR
HEADER SPANS TWO COLUMNS Header Navigation Main Content Sidebar Footer @MANDY_KERR
SPAN FOR 2 header { grid-column: 2 / span 2; } START AT 2 (THE INDEX STARTS AT 1 NOT 0) @MANDY_KERR
FIREFOX: CSS GRID INSPECTOR grid-column: 2 / span 2; @MANDY_KERR
3 ROWS FIXED Header Navigation Main Content Sidebar FLUID Footer FIXED @MANDY_KERR
. page { display: grid; grid-template-columns: 200px 1fr 250px; grid-template-rows: 60px 1fr 60px; } @MANDY_KERR
3 ROWS Header SPANS ALL ROWS SPANS Navigation Main Content Sidebar TWO ROWS Footer @MANDY_KERR
.navigation { grid-row: 1 / span 3; } aside { grid-row: span 2; } @MANDY_KERR
@MANDY_KERR
@MANDY_KERR
MARSHMALLOW @MANDY_KERR
. block-group { display: grid; grid-gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } @MANDY_KERR
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); @MANDY_KERR
@MANDY_KERR
. block-group : first-child { grid-column: 1 / -1; } @MANDY_KERR
.full-width { grid-column: 1 / -1; } @MANDY_KERR
@MANDY_KERR
@MANDY_KERR
YOU CAN USE CSS GRID FOR ALL SORTS OF LAYOUTS LIKE FORMS OR CARDS. @MANDY_KERR
EVERY-LAYOUT.DEV GRIDBYEXAMPLE.COM @rachelandrew @MANDY_KERR
@MANDY_KERR
Making the page FULL HEIGHT @MANDY_KERR
A percentage of the full viewport height or width 10vh 10vw VIEWPORT HEIGHT VIEWPORT WIDTH @MANDY_KERR
.page { height: 100vh; } @MANDY_KERR
@MANDY_KERR
Some ways to ALIGN THINGS @MANDY_KERR
@MANDY_KERR
<div> <p>Jello is a fluffy fellow</p> </div> div { display: flex; align-items: center; text-align: center; } @MANDY_KERR
<div> <p>Jello is a fluffy fellow</p> </div> div { display: flex; align-items: center; justify-content: center; } @MANDY_KERR
<div> <p>Jello</p> <p>Marshmallow</p> </div> @MANDY_KERR
<div> <p>Jello is a fluffy fellow</p> </div> A ROW!! div { display: flex; flex-direction: row; align-items: center; justify-content: center; } @MANDY_KERR
<div> <p>Jello</p> <p>Marshmallow</p> </div> A COLUMN!! div { display: flex; flex-direction: column; align-items: center; justify-content: center; } @MANDY_KERR
<div> <p>Jello</p> <p>Marshmallow</p> </div> @MANDY_KERR
ROW COLUMN JUSTIFY ALIGN ALIGN JUSTIFY @MANDY_KERR
. section-header { display: flex; justify-content: space-between; align-items: center; } @MANDY_KERR
WITHOUT FLEXBOX WITH FLEXBOX @MANDY_KERR
@MANDY_KERR
Working with VARIABLES IN CSS @MANDY_KERR
// CSS color: var(--primaryColor); --primaryColor: #6c4bdf; // scss $primaryColor: #6c4bdf; color: $primaryColor; // JavaScript color: primaryColor; const primaryColor : '#6c4bdf'; @MANDY_KERR
Margins & Padding Colours Fonts @MANDY_KERR
Setting up CONSISTENT MARGINS @MANDY_KERR
spacing-1: 9px; spacing-2: 18px; spacing-3: 27px; spacing-4: 36px; @MANDY_KERR
@MANDY_KERR
@MANDY_KERR
36px 9px 18px 27px spacing-1: 9px; spacing-2: 18px; spacing-3: 27px; spacing-4: 36px; @MANDY_KERR
TIPS Have a consistent set of spacing values Use a larger value between sections Use a medium value between boxes Use smaller values for content in tight spaces @MANDY_KERR
Adding in COLOURS & FONT SIZE @MANDY_KERR
@MANDY_KERR
TIPS Draw attention with a large font size Use a smaller font size for supplementary information Link colours should generally be consistent Have a colour palette @MANDY_KERR
coolors.co @MANDY_KERR
Styling THE MAIN NAVIGATION @MANDY_KERR
NAVIGATION @MANDY_KERR
nav a { BLOCK ELEMENT display: block; color: white; text-decoration: none; padding: 18px; } nav a: hover , nav a: focus { background: pink; color: white; } @MANDY_KERR
DISPLAY: INLINE Only take as much space as they need Displayed side by side You cannot set width, height or top & bottom margin Cannot contain block elements @MANDY_KERR
DISPLAY: BLOCK Take full-width by default (100% width of space) Displayed on a new line You can set a width and height Can contain other block elements @MANDY_KERR
INLINE BLOCK @MANDY_KERR
FIREFOX: CONTEXTUAL INFORMATION @MANDY_KERR
.navigation a { display: block; color: white; SET THE COLOUR padding: 18px; INCREASE CLICK AREA } @MANDY_KERR
MARGIN PADDING @MANDY_KERR
.navigation a: hover { background: pink; color: white; } MAKE REACT TO INTERACTION .navigation a: focus { background: blue; color: white; } @MANDY_KERR
@MANDY_KERR
.navigation a { display: block; color: white; text-decoration: none; padding: 18px; transition: background 250ms ease; } ANIMATE BETWEEN THE COLOURS @MANDY_KERR
@MANDY_KERR
Making PERFORMANT IMAGES @MANDY_KERR
@MANDY_KERR
<img src ="jello.png" width ="476" height =“479” /> img { width: 300px; height: 300px; } @MANDY_KERR
@MANDY_KERR
<img src ="jello.png" width ="476" height =“479” /> img { width: 100%; height: auto; } @MANDY_KERR
@MANDY_KERR
@MANDY_KERR
Aside.. STICKING THINGS @MANDY_KERR
nav { position: sticky; top: 0; } @MANDY_KERR
@MANDY_KERR
@MANDY_KERR
Recommend
More recommend
