FRONT-ENDS FOR BACKEND DEVELOPERS. @MANDY_KERR Frictionless - - PowerPoint PPT Presentation

▶
front ends for backend developers
SMART_READER_LITE
LIVE PREVIEW

FRONT-ENDS FOR BACKEND DEVELOPERS. @MANDY_KERR Frictionless - - PowerPoint PPT Presentation

Sep 09, 2022 176 likes •1.27k views

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

slide-1
SLIDE 1 @MANDY_KERR

FRONT-ENDS FOR BACKEND DEVELOPERS.

Frictionless

slide-2
SLIDE 2 @MANDY_KERR

FRONT-ENDS FOR BACKEND DEVELOPERS.

Frictionless

slide-3
SLIDE 3

MANDY

@MANDY_KERR

MICHAEL

slide-4
SLIDE 4 @MANDY_KERR

JS.

&

HTML CSS

slide-5
SLIDE 5 @MANDY_KERR

& HTML

CSS

slide-6
SLIDE 6 @MANDY_KERR
slide-7
SLIDE 7 @MANDY_KERR

THE RIGHT TYPE.

Choosing

slide-8
SLIDE 8 @MANDY_KERR

interface dog { name: string age: number isFluffy: boolean }

slide-9
SLIDE 9 @MANDY_KERR

ABOUT THE SHAPE OF THE CONTENT.

Be explicit

slide-10
SLIDE 10 @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>

slide-11
SLIDE 11 @MANDY_KERR

interface dog { name: any age: any isFluffy: any }

slide-12
SLIDE 12 @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>

slide-13
SLIDE 13 @MANDY_KERR

SECTIONING ELEMENTS.

<section> <article> <nav> <aside>

slide-14
SLIDE 14 @MANDY_KERR

CLEAR STRUCTURE AND HEIRARCHY.

<header> <footer> <h1> <h2> <h3>

slide-15
SLIDE 15 @MANDY_KERR

MAKE THE MOST OF HTML’S BUILT IN FUNCTIONALITY.

slide-16
SLIDE 16 @MANDY_KERR

SPECIFIC HTML.

@MANDY_KERR

DIVS.

slide-17
SLIDE 17 @MANDY_KERR

LIGHTHOUSE

slide-18
SLIDE 18 @MANDY_KERR
slide-19
SLIDE 19 @MANDY_KERR

CSS, SCSS, CSS in JS

Understanding

slide-20
SLIDE 20 @MANDY_KERR

CHOOSING FONTS

Tricks for

slide-21
SLIDE 21 @MANDY_KERR

fontpair.co/fonts fonts.google.com

slide-22
SLIDE 22 @MANDY_KERR
slide-23
SLIDE 23 @MANDY_KERR

LAYOUTS WITH CSS

Simple tricks for

slide-24
SLIDE 24 @MANDY_KERR Navigation Main Content Sidebar Header Footer
slide-25
SLIDE 25 @MANDY_KERR Navigation Main Content Sidebar Header Footer

3 COLUMNS

FLUID FIXED FIXED
slide-26
SLIDE 26 @MANDY_KERR

.page { display: grid; grid-template-columns: 200px 1fr 250px; }

FIXED AT 200PX FIXED AT 250PX
slide-27
SLIDE 27 @MANDY_KERR

.page { display: grid; grid-template-columns: 200px 1fr 250px; }

FLUID FRACTION UNIT

slide-28
SLIDE 28 @MANDY_KERR Navigation Main Content Sidebar Header Footer HEADER SPANS TWO COLUMNS
slide-29
SLIDE 29 @MANDY_KERR

header { grid-column: 2 / span 2; }

START AT 2 SPAN FOR 2 (THE INDEX STARTS AT 1 NOT 0)
slide-30
SLIDE 30 @MANDY_KERR

FIREFOX:
 CSS GRID
 INSPECTOR

grid-column: 2 / span 2;
slide-31
SLIDE 31 @MANDY_KERR Navigation Main Content Sidebar Header Footer

3 ROWS

FIXED FIXED FLUID
slide-32
SLIDE 32 @MANDY_KERR

.page { display: grid; grid-template-columns: 200px 1fr 250px; grid-template-rows: 60px 1fr 60px; }

slide-33
SLIDE 33 @MANDY_KERR Navigation Main Content Sidebar Header Footer

3 ROWS

SPANS
 TWO
 ROWS SPANS 
 ALL
 ROWS
slide-34
SLIDE 34 @MANDY_KERR

.navigation { grid-row: 1 / span 3; } aside { grid-row: span 2; }

slide-35
SLIDE 35 @MANDY_KERR
slide-36
SLIDE 36 @MANDY_KERR
slide-37
SLIDE 37 @MANDY_KERR MARSHMALLOW
slide-38
SLIDE 38 @MANDY_KERR

.block-group { display: grid; grid-gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

slide-39
SLIDE 39 @MANDY_KERR

grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));

slide-40
SLIDE 40 @MANDY_KERR
slide-41
SLIDE 41 @MANDY_KERR

.block-group:first-child { grid-column: 1 / -1; }

slide-42
SLIDE 42 @MANDY_KERR

.full-width { grid-column: 1 / -1; }

slide-43
SLIDE 43 @MANDY_KERR
slide-44
SLIDE 44 @MANDY_KERR
slide-45
SLIDE 45 @MANDY_KERR

YOU CAN USE CSS GRID FOR ALL SORTS OF LAYOUTS LIKE FORMS OR CARDS.

slide-46
SLIDE 46 @MANDY_KERR

EVERY-LAYOUT.DEV GRIDBYEXAMPLE.COM
 @rachelandrew

slide-47
SLIDE 47 @MANDY_KERR
slide-48
SLIDE 48 @MANDY_KERR

FULL HEIGHT

Making the page

slide-49
SLIDE 49 @MANDY_KERR

10vh

VIEWPORT HEIGHT

10vw

VIEWPORT WIDTH

A percentage of the full viewport height or width

slide-50
SLIDE 50 @MANDY_KERR

.page { height: 100vh;
 }

slide-51
SLIDE 51 @MANDY_KERR
slide-52
SLIDE 52 @MANDY_KERR

ALIGN THINGS

Some ways to

slide-53
SLIDE 53 @MANDY_KERR
slide-54
SLIDE 54 @MANDY_KERR

<div>
 <p>Jello is a fluffy fellow</p>
 </div>

div { display: flex; align-items: center; text-align: center; }

slide-55
SLIDE 55 @MANDY_KERR

div { display: flex; align-items: center; justify-content: center; }

<div>
 <p>Jello is a fluffy fellow</p>
 </div>

slide-56
SLIDE 56 @MANDY_KERR

<div>
 <p>Jello</p>
 <p>Marshmallow</p>
 </div>

slide-57
SLIDE 57 @MANDY_KERR

div { display: flex; flex-direction: row; align-items: center; justify-content: center; }

<div> <p>Jello is a fluffy fellow</p>
 </div>

A ROW!!

slide-58
SLIDE 58 @MANDY_KERR

div { display: flex;
 flex-direction: column; align-items: center; justify-content: center; }

<div>
 <p>Jello</p>
 <p>Marshmallow</p>
 </div>

A COLUMN!!

slide-59
SLIDE 59 @MANDY_KERR

<div>
 <p>Jello</p>
 <p>Marshmallow</p>
 </div>

slide-60
SLIDE 60 @MANDY_KERR JUSTIFY ALIGN

COLUMN

ALIGN JUSTIFY

ROW

slide-61
SLIDE 61 @MANDY_KERR

.section-header { display: flex; justify-content: space-between; align-items: center; }

slide-62
SLIDE 62 @MANDY_KERR

WITHOUT FLEXBOX WITH FLEXBOX

slide-63
SLIDE 63 @MANDY_KERR
slide-64
SLIDE 64 @MANDY_KERR

VARIABLES IN CSS

Working with

slide-65
SLIDE 65 @MANDY_KERR

// scss $primaryColor: #6c4bdf; // JavaScript const primaryColor: '#6c4bdf'; // CSS

  • -primaryColor: #6c4bdf;

color: var(--primaryColor); color: $primaryColor; color: primaryColor;

slide-66
SLIDE 66 @MANDY_KERR

Margins & Padding Colours Fonts

slide-67
SLIDE 67 @MANDY_KERR

CONSISTENT MARGINS

Setting up

slide-68
SLIDE 68 @MANDY_KERR

spacing-1: 9px; spacing-2: 18px; spacing-3: 27px; spacing-4: 36px;

slide-69
SLIDE 69 @MANDY_KERR
slide-70
SLIDE 70 @MANDY_KERR
slide-71
SLIDE 71 @MANDY_KERR 18px 27px 36px spacing-1: 9px; spacing-2: 18px; spacing-3: 27px; spacing-4: 36px; 9px
slide-72
SLIDE 72 @MANDY_KERR

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

TIPS

slide-73
SLIDE 73 @MANDY_KERR

COLOURS & FONT SIZE

Adding in

slide-74
SLIDE 74 @MANDY_KERR
slide-75
SLIDE 75 @MANDY_KERR

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

TIPS

slide-76
SLIDE 76 @MANDY_KERR

coolors.co

slide-77
SLIDE 77 @MANDY_KERR

THE MAIN NAVIGATION

Styling

slide-78
SLIDE 78 @MANDY_KERR NAVIGATION
slide-79
SLIDE 79 @MANDY_KERR

nav a { display: block; color: white; text-decoration: none; padding: 18px; } nav a:hover, nav a:focus { background: pink; color: white; }

BLOCK ELEMENT

slide-80
SLIDE 80 @MANDY_KERR

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

DISPLAY: INLINE

slide-81
SLIDE 81 @MANDY_KERR

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

DISPLAY: BLOCK

slide-82
SLIDE 82 @MANDY_KERR

INLINE BLOCK

slide-83
SLIDE 83 @MANDY_KERR

FIREFOX: CONTEXTUAL INFORMATION

slide-84
SLIDE 84 @MANDY_KERR

.navigation a { display: block; color: white; padding: 18px; }

SET THE COLOUR INCREASE CLICK AREA

slide-85
SLIDE 85 @MANDY_KERR PADDING MARGIN
slide-86
SLIDE 86 @MANDY_KERR

.navigation a:hover { background: pink; color: white; } .navigation a:focus { background: blue; color: white; }

MAKE REACT TO INTERACTION

slide-87
SLIDE 87 @MANDY_KERR
slide-88
SLIDE 88 @MANDY_KERR

.navigation a { display: block; color: white; text-decoration: none; padding: 18px;
 transition: background 250ms ease; }

ANIMATE BETWEEN THE COLOURS

slide-89
SLIDE 89 @MANDY_KERR
slide-90
SLIDE 90 @MANDY_KERR

PERFORMANT IMAGES

Making

slide-91
SLIDE 91 @MANDY_KERR
slide-92
SLIDE 92 @MANDY_KERR

img { width: 300px; height: 300px; }

<img src="jello.png" width="476" height=“479” />

slide-93
SLIDE 93 @MANDY_KERR
slide-94
SLIDE 94 @MANDY_KERR

<img src="jello.png" width="476" height=“479” />

img { width: 100%; height: auto; }

slide-95
SLIDE 95 @MANDY_KERR
slide-96
SLIDE 96 @MANDY_KERR
slide-97
SLIDE 97 @MANDY_KERR

STICKING THINGS

Aside..

slide-98
SLIDE 98 @MANDY_KERR

nav { position: sticky; top: 0; }

slide-99
SLIDE 99 @MANDY_KERR
slide-100
SLIDE 100 @MANDY_KERR
slide-101
SLIDE 101 @MANDY_KERR
slide-102
SLIDE 102
slide-103
SLIDE 103 @MANDY_KERR body { font-family: black; color: #59576d; } h1 { margin: 0 0 18px 0; font-family: "IBM Plex Serif", "Times New Roman", serif; } p { margin: 0 0 9px 0; line-height: 1.3; } a { color: #ce69ea; } a:hover, a:focus { color: #0e9dba; } img { width: 100%; height: auto; margin-bottom: 18px; border: 1px solid #59576d; }
  • l {
margin: 0; padding-left: 18px; }
  • l li {
margin: 0 0 18px 0; font-size: 0.9rem; }
  • l li span {
font-weight: bold; display: block; color: #444051; font-size: 0.7rem;

174 LINES
 OF CSS.

slide-104
SLIDE 104 @MANDY_KERR
slide-105
SLIDE 105 @MANDY_KERR
slide-106
SLIDE 106 @MANDY_KERR
slide-107
SLIDE 107 @MANDY_KERR

START WITH
 A STRONG FOUNDATION 
 BUILD UPON IT.

&

slide-108
SLIDE 108 @MANDY_KERR

THANK YOU

adognamedjello

MDN
 developer.mozilla.org/docs/Web Every Layout 
 every-layout.dev Grid by Example
 gridbyexample.com
 CSS Tricks Flexbox Guide
 css-tricks.com/snippets/css/a-guide-to-flexbox
 CSS Tricks Grid Guide
 css-tricks.com/snippets/css/complete-guide-grid