Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emilte/html-workshop
Introduksjonskurs i HTML og CSS for å få innsikt i hvordan utviklere jobber. Legges også opp til litt mer kompliserte oppgaver for dem som måtte ønske det. Hvordan kan du faktisk bygge det du tegner i Figma? Hvordan fungerer egentlig styling og spacing? Har du hørt om Tokens? Vel vi bruker det i utviklingsverden også. Fører all design til lik mengde arbeid i utvikling? Definitivt ikke. Her kan du få innsikt i hva som er vanskelig å jobbe med, slik at man kan velge lettere design å implementere. Du vil få muligheten til å jobbe med checkbox, dropdowns og tabeller.
https://github.com/emilte/html-workshop
css html markdown
Last synced: 13 days ago
JSON representation
Introduksjonskurs i HTML og CSS for å få innsikt i hvordan utviklere jobber. Legges også opp til litt mer kompliserte oppgaver for dem som måtte ønske det. Hvordan kan du faktisk bygge det du tegner i Figma? Hvordan fungerer egentlig styling og spacing? Har du hørt om Tokens? Vel vi bruker det i utviklingsverden også. Fører all design til lik mengde arbeid i utvikling? Definitivt ikke. Her kan du få innsikt i hva som er vanskelig å jobbe med, slik at man kan velge lettere design å implementere. Du vil få muligheten til å jobbe med checkbox, dropdowns og tabeller.
- Host: GitHub
- URL: https://github.com/emilte/html-workshop
- Owner: emilte
- Created: 2022-04-03T21:02:11.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-06-23T20:38:07.000Z (over 2 years ago)
- Last Synced: 2024-10-31T04:03:43.091Z (20 days ago)
- Topics: css, html, markdown
- Language: HTML
- Homepage: https://emilte.github.io/html-workshop/
- Size: 10.2 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.html
Awesome Lists containing this project
README
README.md
/* https://github.com/microsoft/vscode/blob/master/extensions/markdown-language-features/media/markdown.css */
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
body {
font-family: var(--vscode-markdown-font-family, -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif);
font-size: var(--vscode-markdown-font-size, 14px);
padding: 0 26px;
line-height: var(--vscode-markdown-line-height, 22px);
word-wrap: break-word;
}
#code-csp-warning {
position: fixed;
top: 0;
right: 0;
color: white;
margin: 16px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
background-color:#444444;
cursor: pointer;
padding: 6px;
box-shadow: 1px 1px 1px rgba(0,0,0,.25);
}
#code-csp-warning:hover {
text-decoration: none;
background-color:#007acc;
box-shadow: 2px 2px 2px rgba(0,0,0,.25);
}
body.scrollBeyondLastLine {
margin-bottom: calc(100vh - 22px);
}
body.showEditorSelection .code-line {
position: relative;
}
body.showEditorSelection .code-active-line:before,
body.showEditorSelection .code-line:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
left: -12px;
height: 100%;
}
body.showEditorSelection li.code-active-line:before,
body.showEditorSelection li.code-line:hover:before {
left: -30px;
}
.vscode-light.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(0, 0, 0, 0.15);
}
.vscode-light.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(0, 0, 0, 0.40);
}
.vscode-light.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-dark.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 255, 255, 0.4);
}
.vscode-dark.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 255, 255, 0.60);
}
.vscode-dark.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
.vscode-high-contrast.showEditorSelection .code-active-line:before {
border-left: 3px solid rgba(255, 160, 0, 0.7);
}
.vscode-high-contrast.showEditorSelection .code-line:hover:before {
border-left: 3px solid rgba(255, 160, 0, 1);
}
.vscode-high-contrast.showEditorSelection .code-line .code-line:hover:before {
border-left: none;
}
img {
max-width: 100%;
max-height: 100%;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:focus,
input:focus,
select:focus,
textarea:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
}
hr {
border: 0;
height: 2px;
border-bottom: 2px solid;
}
h1 {
padding-bottom: 0.3em;
line-height: 1.2;
border-bottom-width: 1px;
border-bottom-style: solid;
}
h1, h2, h3 {
font-weight: normal;
}
table {
border-collapse: collapse;
}
table > thead > tr > th {
text-align: left;
border-bottom: 1px solid;
}
table > thead > tr > th,
table > thead > tr > td,
table > tbody > tr > th,
table > tbody > tr > td {
padding: 5px 10px;
}
table > tbody > tr + tr > td {
border-top: 1px solid;
}
blockquote {
margin: 0 7px 0 5px;
padding: 0 16px 0 10px;
border-left-width: 5px;
border-left-style: solid;
}
code {
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
font-size: 1em;
line-height: 1.357em;
}
body.wordWrap pre {
white-space: pre-wrap;
}
pre:not(.hljs),
pre.hljs code > div {
padding: 16px;
border-radius: 3px;
overflow: auto;
}
pre code {
color: var(--vscode-editor-foreground);
tab-size: 4;
}
/** Theming */
.vscode-light pre {
background-color: rgba(220, 220, 220, 0.4);
}
.vscode-dark pre {
background-color: rgba(10, 10, 10, 0.4);
}
.vscode-high-contrast pre {
background-color: rgb(0, 0, 0);
}
.vscode-high-contrast h1 {
border-color: rgb(0, 0, 0);
}
.vscode-light table > thead > tr > th {
border-color: rgba(0, 0, 0, 0.69);
}
.vscode-dark table > thead > tr > th {
border-color: rgba(255, 255, 255, 0.69);
}
.vscode-light h1,
.vscode-light hr,
.vscode-light table > tbody > tr + tr > td {
border-color: rgba(0, 0, 0, 0.18);
}
.vscode-dark h1,
.vscode-dark hr,
.vscode-dark table > tbody > tr + tr > td {
border-color: rgba(255, 255, 255, 0.18);
}
/*
Atom One Dark by Daniel Gamage
Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
base: #282c34
mono-1: #abb2bf
mono-2: #818896
mono-3: #5c6370
hue-1: #56b6c2
hue-2: #61aeee
hue-3: #c678dd
hue-4: #98c379
hue-5: #e06c75
hue-5-2: #be5046
hue-6: #d19a66
hue-6-2: #e6c07b
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
color: #abb2bf;
background: #282c34;
}
.hljs-comment,
.hljs-quote {
color: #5c6370;
font-style: italic;
}
.hljs-doctag,
.hljs-keyword,
.hljs-formula {
color: #c678dd;
}
.hljs-section,
.hljs-name,
.hljs-selector-tag,
.hljs-deletion,
.hljs-subst {
color: #e06c75;
}
.hljs-literal {
color: #56b6c2;
}
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta-string {
color: #98c379;
}
.hljs-built_in,
.hljs-class .hljs-title {
color: #e6c07b;
}
.hljs-attr,
.hljs-variable,
.hljs-template-variable,
.hljs-type,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-number {
color: #d19a66;
}
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-meta,
.hljs-selector-id,
.hljs-title {
color: #61aeee;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
.hljs-link {
text-decoration: underline;
}
/*
* Markdown PDF CSS
*/
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe WPC", "Segoe UI", "Ubuntu", "Droid Sans", sans-serif, "Meiryo";
padding: 0 12px;
}
pre {
background-color: #f8f8f8;
border: 1px solid #cccccc;
border-radius: 3px;
overflow-x: auto;
white-space: pre-wrap;
overflow-wrap: break-word;
}
pre:not(.hljs) {
padding: 23px;
line-height: 19px;
}
blockquote {
background: rgba(127, 127, 127, 0.1);
border-color: rgba(0, 122, 204, 0.5);
}
.emoji {
height: 1.4em;
}
code {
font-size: 14px;
line-height: 19px;
}
/* for inline code */
:not(pre):not(.hljs) > code {
color: #C9AE75; /* Change the old color so it seems less like an error */
font-size: inherit;
}
/* Page Break : use <div class="page"/> to insert page break
-------------------------------------------------------- */
.page {
page-break-after: always;
}
mermaid.initialize({
startOnLoad: true,
theme: document.body.classList.contains('vscode-dark') || document.body.classList.contains('vscode-high-contrast')
? 'dark'
: 'default'
});
html-workshop
Introduksjonskurs i HTML og CSS for å få innsikt i hvordan utviklere jobber. Inneholder også litt mer kompliserte oppgaver for dem som måtte ønske det.
Hvordan kan du faktisk bygge det du tegner i Figma? Hvordan fungerer egentlig styling og spacing? Har du hørt om Tokens? Vel vi bruker det i utviklingsverden også. Fører all design til lik mengde arbeid i utvikling? Definitivt ikke. Her kan du få innsikt i hva som er vanskelig å jobbe med, slik at man kan velge lettere design å implementere. Du vil blant annet få muligheten til å jobbe med farger, borders, knapper, checkbox, dropdowns, bilder, tabeller og mye mer.
På grunn av noen sikkerhetsmekanismer i Github som blokkerer innhold, er det best å lese disse sidene i nettleseren med det lokale oppsettet du finner i menyen under.
Hvis oppsettet er ferdig, begynn alltid med å trykke Watch Sass og Go Live nederst til høyre i VSCode.
Dette er for å kunne bla gjennom dokumentene, samt skrive kode og se endringer umiddelbart.
Meny
Alle lenkene er beregnet på å klikkes på i nettleseren med Live Server (html). Hvis du leser dette fra VSCode eller Github, bruk lenkene bak annotert med (markdown) i stedet.
-
Oppsett (Nødvendig å gjennomføre før workshop.) (markdown) -
Introduksjon (Kjapp introduksjon til temaet HTML og CSS) (markdown) -
HTML oversikt (Byggeklosser og eksempler i HTML) (markdown) -
CSS oversikt (Selectorer, attributter og tokens) (markdown) -
VSCode oversikt (Frivillig -- hvordan bruke VSCode effektivt) (markdown) -
Inspect (Hvordan inspisere elementer i nettleseren) (markdown)
Oppgaver:
-
HTML tags (enkel, html) (markdown) -
Skjema (middels, html, css?) (markdown) -
CSS (enkel, css) (markdown) -
Tabell (vanskelig, html, css) (markdown)
Sandbox
Hvis du bare ønsker å teste litt tilfeldige ting, ta en titt i mappen sandbox.
Der er det satt opp to templates du kan gjøre hva du vil i.
Den første er tom, mens den andre inneholder et eksempel på bilde med styling.