Komma igång med Codepen: HTML och CSS för nybörjare – Aroged – Aroged
I denna workshop kan du hitta en omfattande workshop som guidar dig genom dina första steg med HTML & CSS. Under mottot ‘övning ger färdighet’ rekommenderar vi därför att du vidareutvecklar dina nya färdigheter genom att experimentera själv. Codepen är den idealiska platsen för det.
Om du snabbt vill prova en bit HTML, CSS (och eventuellt Javascript) kan du skapa ett dokument på din dator och öppna det i din webbläsare. Enkelt, men nackdelen är att du inte kommer åt den överallt och du måste även uppdatera webbläsaren varje gång du uppdaterar filen. Via Codepen.io visas dina kodbitar i realtid, så att du direkt kan se vilken kod som gör vad. Ett oumbärligt verktyg när du studerar språk som HTML och CSS.
Skapa ett konto på Codepen.io
Codepen.io har ett betalmedlemskap. Du kan till exempel göra kodprover privata genom det medlemskapet. Som standard är alla kodexempel du skapar tillgängliga för alla. Det borde inte vara ett problem direkt, så länge du inte lägger in känsliga uppgifter (som inloggningsuppgifter) i din kod. Därför räcker det med ett gratiskonto i de flesta fall. På så sätt kan du spara dina kodexempel så att du kan konsultera dem igen senare. Navigera till . Du kan välja att registrera dig via Twitter, Github eller Facebook eller via e-post. Skapa ett konto på ett sätt som du väljer. Efter registrering kommer du att få ett e-postmeddelande som du måste bekräfta.
Starta ett nytt projekt
Vilken samling av HTML/CSS/Javascript som helst kan placeras i en ‘Pen’ i Codepen. Navigera till och klicka till vänster. Du kommer nu att se editorn med ett fält för HTML, CSS och JS. Så fort du börjar lägga till HTML-element och styla dem med CSS kommer du att se ändringarna längst ner. Ge ditt projekt ett namn genom att klicka på pennan bredvid “Untitled” högst upp. Glöm inte att klicka på “Spara” regelbundet. Om du vill konsultera alla dina “Pennor” behöver du bara klicka på din profilbild uppe till höger och sedan välja .
Inget resultat
Visa alla resultat
© Aroged 2021. Med ensamrätt.
Denna webbplats använder cookies. Genom att fortsätta använda denna webbplats ger du ditt samtycke till att cookies används. Besök vår sekretess- och cookiepolicy. Jag håller med
nnnt
I denna workshop kan du hitta en omfattande workshop som guidar dig genom dina första steg med HTML & CSS. Under mottot ‘övning ger färdighet’ rekommenderar vi därför att du vidareutvecklar dina nya färdigheter genom att experimentera själv. Codepen är den idealiska platsen för det.n nAnnonsn
Om du snabbt vill prova en bit HTML, CSS (och eventuellt Javascript) kan du skapa ett dokument på din dator och öppna det i din webbläsare. Enkelt, men nackdelen är att du inte kommer åt den överallt och du måste även uppdatera webbläsaren varje gång du uppdaterar filen. Via Codepen.io visas dina kodbitar i realtid, så att du direkt kan se vilken kod som gör vad. Ett oumbärligt verktyg när du studerar språk som HTML och CSS.nnnn
Skapa ett konto på Codepen.ionnnn
Codepen.io har ett betalmedlemskap. Du kan till exempel göra kodprover privata genom det medlemskapet. Som standard är alla kodexempel du skapar tillgängliga för alla. Det borde inte vara ett problem direkt, så länge du inte lägger in känsliga uppgifter (som inloggningsuppgifter) i din kod. Därför räcker det med ett gratiskonto i de flesta fall. På så sätt kan du spara dina kodexempel så att du kan konsultera dem igen senare. Navigera till https://codepen.io/accounts/signup/user/free. Du kan välja att registrera dig via Twitter, Github eller Facebook eller via e-post. Skapa ett konto på ett sätt som du väljer. Efter registrering kommer du att få ett e-postmeddelande som du måste bekräfta.nnnn
Ett gratis konto (där alla dina experiment är offentliga) räcker i de flesta fall.nnnn
Starta ett nytt projektnnnn
Alla samlingar av HTML/CSS/Javascript kan placeras i en ‘Pen’ i Codepen. Navigera till https://codepen.io och klicka till vänster Skapa penna. Du kommer nu att se editorn med ett fält för HTML, CSS och JS. Så fort du börjar lägga till HTML-element och styla dem med CSS kommer du att se ändringarna längst ner. Ge ditt projekt ett namn genom att klicka på pennan bredvid u201cUntitledu201d överst. Glöm inte att klicka på “Spara” regelbundet. Om du vill konsultera alla dina “Pennor” behöver du bara klicka på din profilbild uppe till höger och sedan välja Ditt arbete.nnnnn
Se omedelbart resultatet av din kod.nnnnnnAnnons “,”författare”:{“@type”:”Person”,”name”:”Aroged”,”url”:”https ://www.aroged.com/author/admin/”,”sameAs”:[“https://www.aroged.com”]},”articleSection”:[“Technology”]”image”:{“@type”:”ImageObject”,”url”:”https://www.aroged.com/wp-content/uploads/2021/09/Komma igång -with-Codepen-HTML-and-CSS-for-beginners.jpg”,”width”:2560,”height”:1706},”publisher”:{“@type”:”Organisation”,”name”:” “,”url”:”https://www.aroged.com”,”logo”:{“@type”:”ImageObject”,”url”:””},”sameAs”:[“https://www.facebook.com/Arogeed”,”https://twitter.com/Thearoged”,”https://t.me/Aroged”,”https://www.linkedin.com/company/aroged/”,”https://www.youtube.com/channel/UCiVipsa5WnWr7FLzgVf6cZw”]}}
