Lære at kode er altid spændende og sjovt for alle, og når det kommer til at træde ind i programmeringsverdenen, starter de fleste med de nemmeste ting HTML og CSS. Enhver nybegynders kodningsrejse i frontend starter med disse to grundlæggende byggeklodser, og du skal være kreativ, når det kommer til at designe en smuk applikation.
I første omgang nyder begyndere at lave knapper, tilføje links, tilføje billeder, arbejde med layout og en masse fede ting inden for webdesign, men når det kommer til at lave et projekt kun ved hjælp af HTML og CSS, går de i stå og bliver forvirrede over, hvad de skal lave for at øve alle disse ting. Deres viden er trods alt begrænset til HTML og CSS. Uanset hvad, når du har lært alting, vil du på et tidspunkt indse, at det er vigtigt at lave et projekt for at øve HTML- og CSS-færdigheder. Du skal kontrollere, hvordan HTML og CSS arbejder sammen for at designe en smuk frontend-applikation. Så spørgsmålet er, hvad der er nogle begyndervenlige projekter, du kan lave for at øve alt det, du har lært … Lad os diskutere det.
En hyldestside
Det enkleste websted, du kan lave som nybegynder, er en hyldestside for en person, du beundrer i dit liv. Det kræver kun grundlæggende kendskab til HTML og CSS. Lav en webside, hvor du skriver om den pågældende person og tilføjer hans/hendes billede. Øverst på websiden skal du tilføje billedet og navnet på personen, og under det giver du layout til resten af detaljerne. Du kan bruge afsnit, lister, links, links, billeder med CSS for at give det et ordentligt udseende. Tilføj en passende baggrundsfarve og skrifttype på din webside. De fleste af delene kan du lave ved hjælp af HTML, men for at give det et bedre udseende ved hjælp af en smule CSS. Tag hjælp fra nedenstående link.
- Min hyldestside
- Hyldestside til Steve Jobs
- Hyldestside til Albert Einstein
Webside med formular
Formularer er altid en vigtig del af ethvert projekt, og du vil komme til at arbejde med mange formularer i de fleste programmer, så hvorfor ikke øve dig tidligere og teste din viden. Når du er blevet fortrolig med inputfeltet eller de grundlæggende tags i HTML for at oprette en formular, skal du lave et projekt med alle disse tags. Hvordan man bruger et tekstfelt, afkrydsningsfelt, radioknap, dato og andre vigtige elementer i en enkelt formular. Du vil lære, hvordan du giver en ordentlig struktur til en webside, mens du opretter en formular. Kendskab til HTML/HTML5 er godt nok, men du kan bruge en smule CSS for at få projektet til at se bedre ud. Tag hjælp fra nedenstående links.
- Survey Form
- Good Vibes Form
- Survey Form
Parallax Website
Et parallax-websted indeholder faste billeder i baggrunden, som du kan holde på plads, og du kan scrolle ned ad siden for at se forskellige dele af billedet. Med et grundlæggende kendskab til HTML og CSS kan du give et websted en parallax-effekt. Det er meget populært at bruge parallax-effekten i webdesign, og det giver et smukt udseende og en smuk følelse til websiden. Giv det et forsøg og opdel hele siden i tre til fire forskellige sektioner. Indstil 3-4 baggrundsbilleder, juster teksten for de forskellige sektioner, indstil margin og padding, tilføj background-position og andre CSS-elementer og egenskaber for at skabe en parallakseffekt. Du kan tage hjælp fra Parallax Website.
Landing Page
En landingsside er et andet godt projekt, du kan lave ved hjælp af HTML og CSS, men det kræver et solidt kendskab til disse to byggesten. Du vil bruge masser af kreativitet, mens du laver en landingsside. Du vil øve dig i at tilføje sidefod og overskrift, oprette kolonner, justere elementer, opdele sektionerne og en masse andre ting. Du bliver nødt til at bruge CSS omhyggeligt og huske på, at forskellige elementer ikke overlapper hinanden. Du skal også tage dig af farvekombinationer, padding, margin, afstand mellem sektioner, afsnit og bokse. Farvekombinationer skal passe godt sammen med hinanden for forskellige sektioner eller baggrunde. Du kan tage hjælp fra nedenstående link.
- Full Screen Landing
- Landing Page
Restaurant Website
Vis din solide viden om HTML og CSS ved at skabe en smuk webside for en restaurant. At lave et layout til en restaurant vil være en smule mere kompliceret end tidligere projekteksempler. Du skal justere de forskellige madvarer og drikkevarer ved hjælp af et CSS-layoutgitter. Du skal tilføje priser og billeder, og du skal også give det et smukt udseende ved hjælp af den rette kombination af farver, skrifttyper og billeder. Du kan tilføje billedgalleri for forskellige madvarer, du kan også tilføje glidende billeder for et bedre udseende. Tilføj links til omdirigering til interne sider. Gør den responsiv ved at indstille en viewport, ved hjælp af media queries og grid. Du kan tage hjælp fra Restaurant Website.
En event- eller konferencewebside
Du kan lave en statisk side, der holder en event eller konference. Folk, der er interesseret i at deltage i konferencen, opretter en tilmeldingsknap for dem. Nævn forskellige links til højttaler, mødested og tidsplan øverst i overskriftsdelen. Beskriv formålet med konferencen eller den kategori af personer, der kan få gavn af denne konference. Tilføj en introduktion og billeder af taleren, oplysninger om mødestedet og hovedformålet med konferencen på din webside. Opdel siden i sektioner, tilføj header og footer, der viser menuen. Brug en passende baggrundsfarve, der kan passe godt sammen med hinanden for de forskellige sektioner. Vælg en ordentlig skrifttypestil og skriftfarve, der passer til temaet for din webside. Det kræver HTML/HTML5- og CSS-kendskab i dybden. Du kan tage hjælp fra stilkonferencen.
Musikbutiksside
Hvis du er en musikelsker kan du lave en webside til det. Det kræver HTML5/CSS3-kendskab. Tilføj et passende baggrundsbillede, der beskriver formålet eller hvad siden handler om. I header-sektionen tilføj forskellige menuer. Tilføj knapper, links, billeder og en vis beskrivelse om den tilgængelige samling af sange. Nederst skal du nævne links til shopping, butik, karriere eller kontaktoplysninger. Du kan også tilføje andre funktioner på dine websider som f.eks. en prøvemulighed, gavekort eller abonnement. Gør den responsiv ved at indstille viewport eller ved hjælp af media queries og grid. Du kan tage hjælp fra myTunes.
Fotografiside
Hvis du har indgående kendskab til HTML5 og CSS3, kan du lave en responsiv fotografiside på én side. Brug flexbox og media queries for at opnå lydhørhed. Tilføj virksomhedens navn med et billede (relateret til fotografering) på toppen (landingsside). Herunder skal du fremvise dit arbejde ved at tilføje flere billeder. Nævn fotografens kontaktoplysninger nederst (sidefod). Tilføj en knap for at se dit arbejde. Denne knap vil føre dig direkte ned til billedsektionen. Du skal tage dig af margin, padding, farvekombination, font-size, font-style, billedstørrelse og styling af en knap. Du kan tage hjælp fra Acme Photography.
Personlig portefølje
Med kendskab til HTML5 og CSS3 kan du også oprette din portefølje. Vis dine arbejdsprøver og færdigheder i din portefølje med dit navn og billeder. Du kan også tilføje dit CV der, og hoste din komplette portefølje på GitHub-konto. I din header-sektion kan du nævne nogle menuer som om, kontakt, arbejde eller tjenester. I toppen kan du tilføje et af dine billeder og præsentere dig selv der. Herunder skal du tilføje nogle arbejdseksempler, og til sidst (sidefod) skal du tilføje kontaktoplysninger eller en konto på sociale medier. Du kan tage hjælp fra Personal Portfolio.
Teknisk dokumentation
Hvis du har en lille smule kendskab til Javascript, kan du oprette en webside med teknisk dokumentation. Det kræver kendskab til HTML, CSS og grundlæggende javascript. Opdel hele websiden i to sektioner. I venstre side opretter du en menu med alle emnerne listet fra top til bund. I højre side skal du nævne dokumentationen eller beskrivelsen for emnerne. Ideen er, at når du klikker på et af emnerne i den venstre sektion, skal indholdet på højre side indlæses. For klik, kan du bruge enten javascript eller CSS bogmærke mulighed. Du behøver ikke at gøre det for fancy, bare giv det et simpelt og anstændigt udseende, der ser godt ud til teknisk dokumentation. Du kan tage hjælp fra Teknisk dokumentation.
Hjælpende link: 10 tips til effektiv webdesign i 2019
