Δωρεάν μάθημα: Δημιουργία ιστολογίου από το μηδέν; ‍;

ΤΙΛ…

Δωρεάν μάθημα: Δημιουργία ιστολογίου από το μηδέν; ‍;

Μπορεί να είναι ευκολότερο από ό, τι φανταζόταν

Προτού φτάσω στο άρθρο, θέλω απλώς να μοιραστώ ότι δημιουργώ ένα προϊόν και θα ήθελα πολύ να συλλέξω ορισμένα δεδομένα σχετικά με τον τρόπο καλύτερης εξυπηρέτησης των προγραμματιστών ιστού. Δημιούργησα ένα σύντομο ερωτηματολόγιο για να το ελέγξω πριν ή μετά την ανάγνωση αυτού του άρθρου. Ελέγξτε το - ευχαριστώ! Και τώρα, πίσω στον κανονικό προγραμματισμένο προγραμματισμό μας.

Αν είστε σαν εμένα, σας ενδιαφέρει ο ιστός και η συντριπτική του εμβέλεια, αλλά πλημμυρίζετε επίσης με το χάος των πληροφοριών που μαθαίνουν HTML και CSS. Το θέμα είναι ότι αυτές οι γλώσσες είναι σε αντίθεση με άλλους τομείς, όπως οι επεξεργαστές κειμένου και οι γλώσσες προγραμματισμού. Ο ιστός είναι ένας άλλος κόσμος και δεν είναι το πιο όμορφο πράγμα.

Έχοντας μάθει κάποιον ιστό, είμαι εδώ για να ενθαρρύνω, γιατί, με λίγη καθοδήγηση , αυτοί οι τομείς μπορούν να είναι πολύ πιο εύκολο από ό, τι φαντάζεστε. Συνεχίστε να διαβάζετε και θα δημιουργήσουμε ένα όμορφο blog από το μηδέν. Θα μάθουμε επίσης CSS Grid, Flexbox και Responsive Design.

Ο στόχος είναι να κάνω για σένα αυτό που έχω κάνει για τον εαυτό μου. μάθετε HTML και CSS από τις πρώτες αρχές.

Δίδαξα επίσης ένα δωρεάν μάθημα HTML / CSS στο Scrimba όπου διδάσκω πώς να φτιάχνω ένα όμορφο blog από το * μηδέν *. Κάντε κλικ εδώ για εγγραφή! ;

Το Scrimba.com είναι μια διαδραστική πλατφόρμα front-end όπου οι ιστότοποι καταγράφονται ως συμβάντα - όχι βίντεο - και μπορούν να επεξεργαστούν! ;

Από πού προέρχεται το HTML;

Το HTML είναι απόγονος της πρώτης γλώσσας μετα - σήμανσης : GML. Οι αναγνώστες της χιλιετίας εργάζονται τώρα ότι το GML σημαίνει Γενικευμένη γλώσσα σήμανσης, αλλά αυτό δεν ισχύει μόνο. Ήταν ο Charles G oldfarb, ο Edward M osher και ο Raymond L orie που δημιούργησαν αυτό που τώρα γνωρίζουμε ως μεταή γλώσσα σήμανσηςστην IBM. Και το 1996, ο Charles Goldfarb έγραψε:

«Έδωσα στην GML το σημερινό της όνομα, ώστε τα αρχικά μας να αποδεικνύουν πάντα από πού προήλθε. Μία από τις άσχημες αλήθειες της μεταφοράς τεχνολογίας είναι ότι οι προγραμματιστές τείνουν να είναι ευγνώμονες για το ερευνητικό έργο όταν έλαβαν για πρώτη φορά, και ουσιαστικά δεν το γνωρίζουν μέχρι το τέλος ενός μακρού κύκλου ανάπτυξης… »- Charles Goldfarb, το 1996

Το GML αργότερα έγινε S Tardardized, και έγινε SGML Στη συνέχεια, ο Tim Berners-Lee που εργάστηκε στο CERN δανείστηκε το ML από τη SGML (όχι, όχι μηχανική εκμάθηση ή οτιδήποτε το λένε οι Χίπστερς ) για να δημιουργήσει HTML, όπου το HT σημαίνει H yper T ext.

Ω, ωραία λέξη. Και όπως καταλαβαίνω, έχει ρίζες από ένα διαδραστικό περιβάλλον συγγραφής που ονομάζεται HyperCard, από τον Bill Atkinson που εργάστηκε στην Apple. Για μια βαθύτερη εξερεύνηση, υποβάλω τα ακόλουθα βίντεο:

Λοιπόν — ας ανακεφαλαιώσουμε. Η HTML δεν ανέλαβε απλώς τον κόσμο. Στην πραγματικότητα, υπήρχε ένας ολόκληρος κόσμος πριν από το HTML. ΑΛΛΑ; Ξέρω, τρέμει σοκ - αλλά δεν είχα γεννηθεί - έτσι, δεν υπήρχε κόσμος.

Και, η HTML οφείλει πολλά στους προκατόχους της. Όπως όλοι μας στους γονείς μας. Ωστόσο, είναι ο τρόπος δημιουργίας κώδικα από κείμενο. Τώρα, σε τέσσερα μαθήματα ενός λεπτού , θα διδάξω τα βασικά των HTML, CSS και Responsive Design.

HTML και CSS σε 4 λεπτά

Πρώτο λεπτό: Ένας ιστότοπος μπορεί να γίνει καλύτερα κατανοητός ως webtree

Όλες οι ιστοσελίδες ξεκινούν τη ζωή τους ως τέτοια. Ωστόσο - και αυτό είναι τρομερό - δεν υπάρχει περιεχόμενο. Ωστόσο, ξεκινάμε εδώ γιατί πρέπει πρώτα να καταλάβουμε τι είναι ένας ιστότοπος. Σκεφτείτε το σαν δέντρο - ένα ανάποδο δέντρο * - ένα δέντρο ιστού . Το htmlστοιχείο είναι η ρίζα, ενώ είναι headκαι bodyοι πρώτοι κλάδοι του δέντρου ιστού μας :

 html <- root / \head body <- branches

Το headστοιχείο (ή ετικέτα - ίδιο πράγμα) αφορά μεταδεδομένα ή πληροφορίες σχετικά με τον ιστότοπό μας. Το bodyστοιχείο, από την άλλη πλευρά, αφορά το περιεχόμενο της ιστοσελίδας μας. Και επειδή το CSS είναι το στυλ του ιστότοπού μας, μπαίνει στο headστοιχείο, ενώ περιεχόμενο, όπως παραγράφους, βίντεο με γάτες (≧ ∇ ≦) και ούτω καθεξής, μπαίνει στο bodyστοιχείο.

Δεύτερο λεπτό: τα στοιχεία ή οι ετικέτες έχουν πολλές εμφανίσεις

valuevalue
  1. Το πρώτο στοιχείο είναι ένα στοιχείο κλεισίματος , όπου κοινοποιούμε κάτι στο πρόγραμμα περιήγησης, αλλά δεν έχει επίσης αξία. Ένα παράδειγμα αυτού είναι το <στοιχείο br>, το οποίο εισάγει ένα διάλειμμα γραμμής.
  2. Το δεύτερο στοιχείο είναι ένα κοινό στοιχείο , όπου επικοινωνούμε ένατιμή που ανήκει σε κάποιο στοιχείο. Για παράδειγμα

    hello, worlρε!

    είναι η τιμή "γεια, κόσμος!" ως ανήκει στο στοιχείο παραγράφου.
  3. Τέλος, έχουμε ένα στοιχείο με ένα χαρακτηριστικό . Και ένα χαρακτηριστικό είναι αυτό που ακούγεται - μπράβο, είναι ένα χαρακτηριστικό ! Δίνει ένα στοιχείο περισσότερο πλαίσιο ή νόημα. Τα χαρακτηριστικά μπορούν να έχουν πολλές τιμές και τα στοιχεία μπορούν να έχουν πολλά χαρακτηριστικά. Ιδιότητα-ception.
value

Τώρα - πρέπει να αναφέρω - δεν δημιουργούμε τα ονόματα των στοιχείων HTML. Τα δανειζόμαστε από μια λίστα με 100+ στοιχεία που είναι προκαθορισμένα. Φυσικά, αυτό κάνει μερικά πράγματα ευκολότερα και μερικά πράγματα πολύ πιο δύσκολα, όπως η απομνημόνευση!

Τρίτο λεπτό: Πώς επικοινωνούν HTML και CSS

selector { property: value; }
    value 

Το !DOCTYPE htmlκαθορίζει ότι γράφουμε HTML5 - όπως υποτίθεται σε όλες τις άλλες εκδόσεις του HTML που θέλουμε να αποφύγουμε. Και δεδομένου του στοιχείου αυτο-κλεισίματοςmeta με το χαρακτηριστικόcharset και την τιμήUTF-8 , το κείμενό μας κωδικοποιείται στο Unicode. UTF-8 σημαίνει U Nicode T ransformation F ormat… 8 . Τώρα μπορούμε να γράψουμε ???? Κάποτε, ο μπαμπάς αποφάσισε να στείλει μήνυμα κειμένου σε emo ji.

¯ \ _ (ツ) _ / ¯

Προσθέσαμε επίσης ένα styleστοιχείο που είναι ένα από τα διαθέσιμα σημεία εισόδου για CSS. Όπου selectorεπιλέγει ένα στοιχείο και εφαρμόζει ένα propertyσε αυτό με ένα αντίστοιχο value. Θα το διερευνήσουμε αυτό και πολλά άλλα στο επόμενο λεπτό.

Again—I need to mention—we don’t create the names of our CSS properties. We borrow them from a list of some hundreds of properties that are predefined. Of course, this makes some things easier, and some things much, much harder, such as ____________!

Fourth minute: hello, world!

p { color: green; }
@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }

hello, world!

No longer is our website terrible! What we have is “hello, world!” in green text, and if our website’s width were resized to 8.5 inches or less, it would read in blue, and at 5 inches or less, red. Here, we used media queries to override CSS in some circumstance, like our website’s width.

What is a CSS Reset and Debugger?

We use a reset to ensure our design is consistent, and a debugger to expose inconsistencies.

We need our reset, because browsers are opinionated and set some CSS properties for us that we want to unset. Popular CSS Resets exist, but we’ll make our own. And we need our debugger for maintaining our website’s design with ease.

We can make a folder named styles to house our reset and debugger:

styles/ reset.css debug.css

And to link our new CSS files to our index.html, we add link elements:

 …     …

Our CSS Reset

Of the properties we want to unset, here’s a shortlist:

:root { font: 20px/1.2 sans-serif; }
body, body * { margin: unset; box-sizing: unset; padding: unset; font-size: unset; color: unset; text-decoration: unset;}

Ignore line 1. for now—let’s start with body, body * { … } where we select the body and all of the body’s elements with an *. The asterisk means select all children. Remember our webtree?

 html / \head body <- selected / \ \… … p <- selected

body, body * { … } is selecting the body anda , denotes and—p because it’s one of body’s children. This is known as the parent-child relationship, where body is the parent and p is the child. And we tell those elements to unset common properties. The properties I’ve chosen are just a shortlist. Here’s an example of one of the most famous CSS Resets:

/* //meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}

Yikes! Back to our reset. At the top we have :root { font: 20px/1.2 sans-serif; }. What’s :root? Remember our webtree? It’s the root, in other words, thehtml element. This pseudo-element belongs to a special class of elements known as psuedo-classes, which can be used to better organize and understand our CSS.

WAAAIT! Don’t we need an * to select all children elements, so their font properties are set? Well—great question—some properties, such as text properties inherit from their parents, and font does. So instead we can set font once in :root, which propagates to all its children. Property-ception.

Our CSS Debugger

A debugger emphasizes the content and border of elements:

body * { color: hsla(000, 100%, 100%, 0.88) !important; background: hsla(210, 100%, 50%, 0.33) !important; outline: 0.25rem solid hsla(000, 100%, 100%, 0.50) !important;}

Behold! In just three lines, our debugger. This clever technique overrides three common properties: color, background, and outline. Our colors are made up of hsla() values, which is short for hue, saturation, luminance, and alpha. To enable our debugger, we link the file.

Should we want to disable our debugger, we can mistype the filename so as to hide it from our computer’s filesystem, e.g.:

Or just delete the line. ٩(^ᴗ^)۶

Our debugger uses hilarious !important values so as to state that under no conditions can these properties be overridden. Remember media queries?

p { color: green !important; }
@media (max-width: 8.5in) { p { color: blue; } }@media (max-width: 5.0in) { p { color: red ; } }

Had we specified that our p color is !important, our media queries would be inert, due to their lesser importance.

Meet CSS Grid and Flexbox

I would argue that before CSS Grid and Flexbox, designing for the web was a hero’s journey.

The thing is, web design used to be a juggling-act of hacks where we trick the browser into rendering our designs. This is becoming less true with time. I’m not religious, but thank God!—or, thank browser engineers!—wherefore now we can lean on CSS Grid and Flexbox to kickstart our design.

If you’re not aware, CSS Grid and Flexbox are newer technologies baked into modern browsers that take the hero’s journey out of web design. And CSS Grid and Flexbox are friends — we’ll use them together to both create a grid and flex elements in our grid.

Our first grid: HTML

ARTICLE

ARTICLE

Remember our webtree?

 body / \article article / \ p p

We’re making a blog, so each post can be thought of as an article. And our articles contain a p of ARTICLE which is another clever trick we can use. Using the name of the element as the value of the element to help us understand where and what things are. Value-ception.

Our first grid: CSS

article { display: grid; grid-template-columns: 1fr minmax(0, 8.5in) 1fr;
 height: 11in; /* temp fix */}
article * { grid-column: 2 / 3; }

Εισαγάγετε το πλέγμα CSS. Κατ 'αρχάς, επιλέξαμε το άρθρο και εφαρμόσαμε τρεις ιδιότητες: displayορίζει το στοιχείο ως πλέγμα, grid-template-columnsστήλες προτύπων και heightπροσομοιώνει κάθε articleμία με το ύψος μιας σελίδας. Ωστόσο, heightείναι κόλλα-κώδικα και θα διαγραφεί.

Ας επικεντρωθούμε στις δύο πιο σημαντικές γραμμές:

article { grid-template-columns: 1fr minmax(0, 8.5in) 1fr; }article * { grid-column: 2 / 3; }

Ή, σε άλλες εποχές:

Θα έχετε τρεις στήλες, των οποίων η κεντρική στήλη θα στεγάσει τα παιδιά σας.

First, had we set grid-template-columns to 1fr 1fr 1fr, where fr is short for fraction-unit, our three columns would be divided in thirds. Yet our center column has a minmax width, meaning it’s responsive. At or less than 8.5in, our center column renders at 100% width, and our left and rightmost columns disappear, as there’s no remainder.

Sidebar: note that responsive design is not limited to media queries. This is an example of where our design is implicitly responsive, as opposed to explicitly responsive. This is the best kind of responsive design, because it’s not hard-coded. And this is one of the reasons CSS Grid and Flexbox are so powerful.

Δεύτερον, να επικοινωνεί ότι articleτα παιδιά «s ανήκουν στην κεντρική στήλη, ή ξεκινούν από την δεύτερη στήλη και τέλος στο τρίτο , θέτουμε grid-columnσε 2 / 3. Σημειώστε τη λεπτή διαφορά μεταξύ grid-template-columnκαι grid-columnσε στήλες προτύπου ή στήλες εύρους .

Το CSS Grid είναι υπέροχο - και είναι - αλλά τώρα θα στηριχτούμε στο Flexbox για να κεντράρουμε το ARTICLEκείμενό μας . Αυτό που πρόκειται να κάνουμε είναι να δημιουργήσουμε ένα Utility Class και είναι ένα άλλο παράδειγμα για τη σύνταξη CSS. Εδώ, χρησιμοποιούμε το γεγονός ότι τα στοιχεία μπορούν να έχουν χαρακτηριστικά στο ενσωματωμένο στυλ στο pστοιχείο:

ARTICLE

CSS σε HTML;! (╯ ° □ °) ╯︵ ┻━┻

Here’s what’s going on: elements have a class attribute. And we can use this attribute to not just write CSS to elements, but to a kind of element or class of element. This means we can reuse classes across multiple elements, regardless of their likeness. Alas—nothing’s changed—we need to also create a .debug-center class somewhere in our CSS. How about our debugger:

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

Note we use a . prefix to differentiate classes from elements.

Now, wherever an element is attributed with our debug-center class, its text will center. First, we set display to flex making whichever element a Flexbox-element as opposed to a CSS Grid-element. Then we set justify-content to center to center horizontally and align-items to center to center vertically. Aaagh!

Imagine this: we use Grid to layout our website’s design, and Flexbox to flex the elements in our grid to some desired position.

Iterating our grid

We have a problem: without .debug-centerARTICLE hugs the left and right walls. What we need are vertical and horizontal gutters so that our content can breathe. Aaah. Otherwise reading would become frustrating and would lead to a poor user experience. ヾ( •́д•̀ ;)ノ

For vertical padding:

article { padding: 0.5in 0; …}

And for horizontal padding, we could use padding, and either would work:

padding: 0.5in 0.5in;padding: 0.5in;

However, we want our gutters to be responsive, so we’ll use CSS Grid:

article { … grid-template-columns: 1fr 0.5in [start] 7.5in [end] 0.5in 1fr}

Here, we did three things: 1. we defined our horizontal gutters to be 0.5in (these will become responsive—I promise!). 2. our content-column went from 8.5in to 7.5in, the sum still being 8.5in , and 3. made up identifiers start and end to name the start and end of our content-column.

When we added new columns, we needed to also update article *:

article * { grid-column: 3 / 4; }

But counting columns isn’t ideal. Instead—let’s use our made-up identifiers:

article * { grid-column: start / end; }

Weupdated our grid without breaking the flow of content, so long as we continue to use the start and end identifiers we made up. ⊂◉‿◉つ

Last—as promised—we need our gutters to be responsive. minmax() for one reason or another doesn’t work here, so we’ll use media queries:

@media (max-width: 8.5in) { article { grid-template-columns: 1fr 5% [start] 90% [end] 5% 1fr; }}

Nowat or less than8.5in, article will use % instead of in to divide our columns, and the left and rightmost columns will disappear because—again—there’s no remainder. Despite all this, we could’ve set padding to 0.5in 5% to achieve the same effect, so what gives? Read on!

Iterating our grid, again

To understand our grid, let’s use images to span columns, from 100% to 8.5in to 7.5in on desktop, and from 100% to 90% on mobile. However, for the last image, the one on the left at the bottom, we need to add even few more columns to our grid. AF)UBQWF*VBQPWIFB, am I right?

Don’t be intimidated—CSS grid is awesome. Let’s add two more columns:

article { … grid-template-columns: 1fr 0.5in [start] 1.25in 5in 1.25in [end] 0.5in 1fr;}
@media (max-width: 8.5in) { article { grid-template-columns: 1fr 5% [start] 15% 60% 15%[end] 5% 1fr; }}

We broke up our content-column into three columns: 1.25in 5in 1.25in . We also added proportional percents for our media query: 15% 60% 15%. The plan is for text to span our original 7.5in content-column, and for small images to span our new 5in column.

To add images, we use the img element and its src—source—attribute:

 …    …

These are local, that is, they’re on our computer. And were they remote, that is, on a server:

Note that each img has one of four classes: size-*. And because we’ll want more than images, like videos, to span our website’s grid, it’s preferred we use classes so we can reuse the CSS. These size-* classes are also Utility Classes, so changing which size we want is simple.

Let’s make our size-* classes span different sets of columns:

.size-1 { grid-column: 4 / 5; }.size-2 { grid-column: 3 / 6; }.size-3 { grid-column: 2 / 7; }.size-4 { grid-column: 1 / 8; }

What’s missing is that our imgs aren’t responsive. We need:

img.size-1, img.size-2, img.size-3, img.size-4 { width: 100%; }

Because imgs render at their actual size, for example, a 400 × 400 image rendering at 400px, we needed to override that behavior with our own: width: 100%. Thus when an image is attributed with a size-* class, it can resize to whatever columns it’s spanning. Note we need not set height.

Adding text elements

Website and content links

Now that we’re getting serious with our article, let’s make things formal:

 …  …

Now each article is linkable. Linkable? Well—websites are links:

//website.com/index.html

And our website’s content, for example articles, can be linked to, too:

//website.com/index.html#article

Here article is the value of an id attribute, analogous to linking a timestamp in a YouTube video (for example, this one). Better than suggesting “start at 4 minutes and 7 seconds” or “read from the second article,” we can link content in our website, like a timestamp in a video.

To link a website or content, we use the a element and href attribute:

 …  The Cosmos  …

The text “The Cosmos” now links the start of the article: #the-cosmos.

This idea of linking (linking websites and content in websites) is one of the points of HTML. HyperCard mastered this, but instead of linking websites and content, was interested in ideas and associations. At the time, it was 1987 and HTML was first proposed in 1989. Watch a few seconds from the video I posted earlier—here I’ve linked a timestamp:

Text elements

Let’s add headings, a publication-date, strong and emphasized text, and links:

The Cosmos is all there is

Or ever was, or ever will be

 MAR. 9, 2014 

A generation ago, the astronomer Carl Sagan stood here and launched hundreds of millions of us on a great adventure the exploration of the universe revealed by science. It's time to get going again. We're about to begin a journey that will take us from the infinitesimal to the infinite, from the dawn of time to the distant future. We'll explore galaxies and suns and worlds, surf the gravity waves of space-time, encounter beings that live in fire and ice, explore the planets of stars that never die, discover atoms as massive as suns and universes smaller than atoms.

COSMOS IS ALSO A STORY ABOUT US

It's the saga of how wandering bands of hunters and gatherers found their way to the stars, one adventure with many heroes. To make this journey, we'll need imagination. But imagination alone is not enough because the reality of nature is far more wondrous than anything we can imagine. This adventure is made possible by generations of searchers strictly adhering to a simple set of rules test ideas by experiment and observation, build on those ideas that pass the test, reject the ones that fail, follow the evidence wherever it leads and question everything. Accept these terms, and the cosmos is yours.

These are the opening lines to our personal astrophysicist’s — Neil deGrasse Tyson’s — 2014 Cosmos: A Spacetime Odyssey, a reimagining of Carl Sagan’s original 1980 Cosmos: A Personal Voyage. It’s sci-fi without the -fi. And it’s getting renewed in 2019!

Above we introduced a few elements: h1, h2, h3, time, strong, and em.

  1. h1h6 elements are headlines.
  2. The time element timestamps our article. We can put whatever we want for the element value, because computers read the datetime attribute’s value, which should be machine-readable.
  3. The strong element is for strong text and the em element is for emphasized text. Also, h* elements are strong.

Note that h* and p elements break from one line to the next, or block, whereas time, strong, and em elements don’t. This is because browsers set the h* and p element’s display to block, and the time, strong, and em element’s display to inline.

Rems and ems

When it’s not enough to block elements from one line to the next, we use line-breaks so it’s easier to differentiate elements from one another, not unlike padding or gutters. We could use br elements here, but it’s preferred we use extraneous CSS over extraneous HTML.

Here’s how to push content two line-breaks, following h2 and p elements:

h2, p { margin-bottom: 2.4rem; }

2.4rem?

Remember our reset? We set font to 20px/1.2 sans-serif. I didn’t explain it at the time—and shame on me—but 2.4 is two-line breaks at 1.2 line-height, for example, single-spaced text. More readable text could be 1.5, and double-spaced text could be 2.

*Ahem* What are rems?

*Ahem ahem* And what are ems?

rem is rootem and both are multipliers. 1rem is 20px and 1em is the parent’s font-size. Had we defined our line-breaks in ems, not rems, and set h2 and p to different font-sizes, their line-breaks would differ! Therefore, consistent line-breaks use rems and inconsistent ones use ems.

Και αυτή είναι μια ισχυρή ιδέα - γράφοντας CSS έτσι ώστε ο σχεδιασμός να είναι συνδεδεμένος . Δεδομένης αυτής της διαφώτισης, πιστεύω ότι είναι πολύ πιο σοφόπρος τοσκεφτείτε το CSS όχι στους κανόνες αλλά στις σχέσεις. Έτσι, αν κάνουμε μια αλλαγή κάπου, μπορούμε να κάνουμε μια αλλαγή παντού.

... κάντε μια αλλαγή κάπου ...... κάντε μια αλλαγή παντού ...

Σχεδιασμός με ανταπόκριση

Τι θα συμβεί αν γράφουμε CSS σε rems και ems, και τα ερωτήματα των μέσων ενημέρωσης χρήση στην αλλαγή :root«s font-size; Τότε όλα - και εννοώ τα πάντα - θα αλλάξουν το μέγεθος ανάλογα. Μπορούμε να προχωρήσουμε ακόμη ένα βήμα παραπέρα και να έχουμε πολλά ερωτήματα πολυμέσων για πολλαπλά πλάτη:

@media (max-width: 8.5in) { :root { font-size: 18px; } }@media (max-width: 5.0in) { :root { font-size: 16px; } }

Αυτό που είναι καταπληκτικό είναι ότι δεν είμαστε απλώς υπερισχύονμια ιδιότητα , παρακάμπτουμε την ιδιότητα για rems και ems. Μπορούμε τώρα να γράψουμε CSS που δεν ανταποκρίνεται απλώς αλλά ανταποκρίνεται στον σχεδιασμό μας που ανταποκρίνεται. Αυτή είναι ίσως η πιο σημαντική πρόταση σε ολόκληρη την ανάρτηση:

Μπορούμε να γράψουμε CSS που δεν ανταποκρίνεται απλώς αλλά ανταποκρίνεται στον σχεδιασμό μας που ανταποκρίνεται.

Αυτό δεν είναι απλώς δροσερό, είναι το πώς πρέπει να γράφουμε CSS. Οι ιστότοποι τείνουν να είναι τρομεροί, και νομίζω ότι μπορεί να αναφερθεί σε αυτό: όταν γράφουμε CSS, πρέπει να γράφουμε σε συστήματα σχεδίασης και όχι σε σιλό κώδικα . Όταν χρησιμοποιούμε rems και ems σε συνδυασμό με ερωτήματα πολυμέσων, αυτό είναι ένα σύστημα σχεδίασης και ο κώδικας δεν είναι σιωπηλός.

Κείμενο στυλ

Για την αγάπη του στυλ, ας προσθέσουμε μερικά:

h1 { font: 700 2.0rem/1.2 …; color: hsl(000, 000%, 33%); }h2 { font: 400 1.5rem/1.2 …; color: hsl(000, 000%, 33%); }time { font: 700 1.0rem/1.2 …; color: hsl(250, 100%, 83%); }h3 { font: 700 1.0rem/1.2 …; color: hsl(250, 100%, 67%); }p { font: 400 1.0rem/1.5 …; color: hsl(000, 000%, 33%); }

Properties can have shorthands as we’ve seen before; padding: 0.5in, equivalent to padding: 0.5in 0.5in. And here, we use font to combine font-weight, font-size, and line-height. After font, we have color with hsl values, like hsla values in our debugger.

An unaddressed problem is our a element. In our reset, we unset color and text-decoration making links indiscriminate from text. We unset these properties because text-decoration: underline is too subtle. So here’s how we can give them a strong underline:

a { box-shadow: inset 0 -0.25em hsl(55, 100%, 75%); }

We invert box-shadow to create an underline that is inside the element. Had we set inset without a negative value, our underline would be an overline. We also use em so the underline scales with its font-size. This is an example of when we want inconsistent scaling, as supposed to our line-breaks.

There’s much more to box-shadow than this: click to learn more.

Last step: gradients

Wohoo! All we need is a cue for our readers as to where an article starts and ends. Without that, the ends of each article will feel like an endless continuation, which leads to a poor user-experience. So we need to give our readers a hint… (◔̯◔)

What I propose is simple: a gradient that extends from the top of each article to the bottom of its h2 element. And we can write our gradient in ems so that as our website resizes, so does our gradient:

article { … background: linear-gradient(hsl(55, 100%, 96%), white 6.83em);}

Here we’ve defined a color-to-white gradient, and used 6.83em so our gradient doesn’t extend the entire article but ends at the equivalent of the bottom of our h2 element. However, the exact value depends.

You can either do math to determine the size, for example 6.83em, but another technique is to set a size on the top-color, for example hsl(55, 100%, 96%) 6.83em. Once it’s equal to or greater than the bottom color’s size, it will appear as a line and not a gradient, making it intuitive what to change it to.

Congratulations ?

Συγχαρητήρια! ˘ (˘.˘) ۶ Έχετε μπει σε έναν κόσμο που χρειάζεστε απεγνωσμένα καλύτερους σχεδιαστές και μηχανικούς. Και με CSS Grid, Flexbox, Responsive Design και προγράμματα εντοπισμού σφαλμάτων σε επίπεδο προγράμματος περιήγησης, η ανάπτυξη για τον Ιστό δεν ήταν ποτέ πιο προσβάσιμη.

Μην ξεχνάτε ότι υπάρχει ένα δωρεάν μάθημα για το Scrimba όπου διδάσκω πώς να φτιάχνω τον ίδιο ιστότοπο από το * μηδέν *. Κάντε κλικ εδώ για εγγραφή!