Sites leren maken - Softwareontwikkeling

zondag 22 oktober 2017 10:23

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik wil beginnen met notepad ++ en photoshop.

Hoe kan ik het beste beginnen ?
Ik loop vaak stuk met het CSS gedeelte daar snap ik niks van.

zondag 22 oktober 2017 10:27

Acties:

0 Henk 'm!

.Maarten

Veel tutorials volgen op bijvoorbeeld youtube, codecademy enz.

Maar sites maken is meer dan notepad++ en photoshop. Dat zijn programma's en geen programmeertalen. Begin eerst maar eens met tutorials over HTML en CSS.

zondag 22 oktober 2017 10:36

Acties:

0 Henk 'm!

wolly_a

Jup... Heel veel tutorials kijken/lezen is het juiste begin. Daarnaast is het, denk ik, fijn om echt een doel te hebben. Maak bijvoorbeeld een website voor een familielid dat een klein bedrijfje heeft of de plaatselijke club ofzo. Je hoeft de site dan nog niet meteen te gebruiken, maar je hebt wel een praktisch doel.

CSS is wel een belangrijk onderdeel van websites tegenwoordig, maar overal is wel informatie te vinden over CSS. Kijk ook eens naar hulpmiddelen als Bootstrap. Daarmee heb je al sneller een vliegende start...

zondag 22 oktober 2017 11:06

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik loop steeds fucking vast met die terring CSS file.

Elke keer dan heb de zelfde code als op Youtube doe ik precies het zelfde etc en iedere keer werkt de achtergrond niet etc en lijkt het alsof de CSS file niet reageert terwijl alles het zelfde is.
Ik heb bijvoorbeeld dit gemaakt net.

<html>
<head>
<title>Tutorial</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="header">
<div class="body">
Welkom
</div>
</div>

</body>
</html>

En hier is de CSS code.

body
{
background-color: #OC1D91;
margin: 0px;
padding: 0px;
}
.header .body
{
background-color: black;
color: white;
text-align: center;
font-size: 40px;
padding: 10px;
}

Ik heb een mapje aangemaakt op mijn bureaublad genaamd Tutorial.
De CSS file opgeslagen als style.css en de html als index.html opgeslagen

En nog werkt het niet?

zondag 22 oktober 2017 11:07

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

.Maarten schreef op zondag 22 oktober 2017 @ 10:27:
Veel tutorials volgen op bijvoorbeeld youtube, codecademy enz.

Maar sites maken is meer dan notepad++ en photoshop. Dat zijn programma's en geen programmeertalen. Begin eerst maar eens met tutorials over HTML en CSS.

ben ik mee bezig alleen ik wordt gek van die css file ...

zondag 22 oktober 2017 11:09

Acties:

+1 Henk 'm!

Verwijderd

Lees je eerst goed in zodat je begrijpt wat (de code in) een css doet.
Als start: https://www.w3schools.com/css/

En als je denkt dat je er iets van begrijpt, ga dan vooral een kijkje nemen op http://www.csszengarden.com/
Er zitten er echt een paar pareltjes tussen.

[ Voor 40% gewijzigd door Verwijderd op 22-10-2017 11:11 ]

zondag 22 oktober 2017 11:12

Acties:

+4 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

En trek ook even de typo eruit: #OC1D91 is geen kleurcode, #0C1D91 wel. Wat dat aangaat komt het allemaal erg nauw en vergt het een boel geduld, vallen en opstaan. Hoevaak ik wel niet uren zit te prutsen op iets, een dag laat liggen en vervolgens binnen 5 minuten opgelost heb...

zondag 22 oktober 2017 11:14

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bastiaan schreef op zondag 22 oktober 2017 @ 11:12:
En trek ook even de typo eruit: #OC1D91 is geen kleurcode, #0C1D91 wel. Wat dat aangaat komt het allemaal erg nauw en vergt het een boel geduld, vallen en opstaan. Hoevaak ik wel niet uren zit te prutsen op iets, een dag laat liggen en vervolgens binnen 5 minuten opgelost heb...

Ja dat is vaak het geval, nu werkt het inderdaad wel. Maar ik heb ook vaak dat de CSS file gewoon niet werkt. Dan blijft de site wit terwijl ik wel een css code heb bijvoorbeeld. Waar kan dat aan liggen dan?

Ook als ik bijvoorbeeld dan F12 doe en vervolgens F5 Dan staat er ook dat de CSS file niet reageert.

zondag 22 oktober 2017 11:16

Acties:

0 Henk 'm!

Verwijderd

Gokje: er zit een fout in je code.
Welkom in de wereld van coding. Testen en bugs eruit halen hoort er bij...

zondag 22 oktober 2017 11:17

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik kijk vaak tutorials via youtube alleen daar zijn de letters zeer klein dat is best irritant om daar een uur naar te kijken

zondag 22 oktober 2017 11:17

Acties:

+2 Henk 'm!

Arunia

@Bastiaan je was me net voor.
Kleurcodes is hexadecimaal. Ofwel, 0 tm 9 dan A tm F.
Volgens mij is dat ook echt de enige fout in die css.

Ikzelf heb echt een hekel aan al die YouTube tutorials. Mede vanwege het moeten pauzeren als je zelf wat wilt doen. Ik zoek vaak de tekst versies op.
Ga kijken naar wat je wilt en zoek daarop qua tutorials. Je kunt dingen samenvoegen etc. En pas niet teveel aan. Controleer na wijzigingen of het werkt.
Daarnaast kun je in bijvoorbeeld edge en IE gebruik maken van F11 om de broncode te bekijken van je site en daar ook dingen aanpassen om te zien hoe het oogt. Dit kan met andere browser's ook volgens mij.

Je kunt ook kijken naar een wysiwyg (what you see is what you get) editor. Daar kun je zowel in code werken als gewoon onderdelen plaatsen en in code zien wat er gebeurd.
Ikzelf ben opgegroeid met Dreamweaver, maar ook met kladblok om code aan te passen. Maar dat is ook als je weet wat je doet.
Probeer te begrijpen wat er gebeurd.
Een css gebruik je zodat je niet in je code opmaak hoeft te veranderen of bovenaan je html de css hoeft in te voegen. Je kunt middels css je gehele site veranderen zonder de html ed in te hoeven. Mits je je pagina's maar goed op orde hebt.
Goed voorbeeld is:
http://www.csszengarden.com

[ Voor 32% gewijzigd door Arunia op 22-10-2017 11:23 ]

zondag 22 oktober 2017 11:19

Acties:

0 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Verwijderd schreef op zondag 22 oktober 2017 @ 11:14:
[...]
Ook als ik bijvoorbeeld dan F12 doe en vervolgens F5 Dan staat er ook dat de CSS file niet reageert.

Eerste waar ik aan denk is je cache. Probeer je pagina's dan eens te verversen met CTRL-F5.

Als je met Chrome werkt (of browsers van vergelijkbare aard) heb je na je F12 (de console) ook de mogelijkheid om onderaan je errors te zien. Die zijn vaak ook al nuttig.

Edit: oh wacht, dat het na die F5 ook niet reageert. Blijft dan alleen mijn tweede alinea (en bericht van @Arunia staan).

[ Voor 11% gewijzigd door Bastiaan op 22-10-2017 11:21 ]

zondag 22 oktober 2017 11:20

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Arunia schreef op zondag 22 oktober 2017 @ 11:17:
@Bastiaan je was me net voor.
Kleurcodes is hexadecimaal. Ofwel, 0 tm 9 dan A tm F.
Volgens mij is dat ook echt de enige fout in die css.

Ikzelf heb echt een hekel aan al die YouTube tutorials. Mede vanwege het moeten pauzeren als je zelf wat wilt doen. Ik zoek vaak de tekst versies op.
Ga kijken naar wat je wilt en zoek daarop qua tutorials. Je kunt dingen samenvoegen etc. En pas niet teveel aan. Controleer na wijzigingen of het werkt.
Daarnaast kun je in bijvoorbeeld edge en IE gebruik maken van F11 om de broncode te bekijken van je site en daar ook dingen aanpassen om te zien hoe het oogt. Dit kan met andere browser's ook volgens mij.

Klopt dat pauzeren is ook zeer irritant en bedankt voor je antwoord.

Ik loop ook vaak mis bij de structuur van CSS. Bijvoorbeeld als ik een header heb gemaakt of een nav menu, Hoe ik die dan precies op de plaats wil hebben zoals ik het wil. Bij mij komt alles door elkaar heen dan.

zondag 22 oktober 2017 11:27

Acties:

+1 Henk 'm!

Arunia

@Verwijderd ik gebruik ook vaak div tags. Deze kun je relatief, etc positioneren. Dus op basis van andere onderdelen van je site.
Ik raadt je aan om te zoeken naar tutorials om divs te plaatsen op je pagina. Dan krijg je daar heel wat uitleg over.
Begin daar mee.
https://www.w3schools.com/css/css_positioning.asp

Daarnaast iets wat ik doe is ruitjes papier hebben of gewoon tekenen op een wit vel. Teken je site op papier hoe je het wilt.dat geeft je iets visueel. Dit kan overigens als je goed werkt met photoshop ook daarin. Ikzelf vind het prettiger om het lekker old school op papier te doen. Een soort houvast.

[ Voor 4% gewijzigd door Arunia op 22-10-2017 11:28 ]

zondag 22 oktober 2017 11:28

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Kan er ook ooit een fout zitten de stylesheet? Of bijvoorbeeld waar het bestand staat? Zo ja, hoe kan ik die error oplossen?

zondag 22 oktober 2017 11:30

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Arunia schreef op zondag 22 oktober 2017 @ 11:27:
@Verwijderd ik gebruik ook vaak div tags. Deze kun je relatief, etc positioneren. Dus op basis van andere onderdelen van je site.
Ik raadt je aan om te zoeken naar tutorials om divs te plaatsen op je pagina. Dan krijg je daar heel wat uitleg over.
Begin daar mee.
https://www.w3schools.com/css/css_positioning.asp

Daarnaast iets wat ik doe is ruitjes papier hebben of gewoon tekenen op een wit vel. Teken je site op papier hoe je het wilt.dat geeft je iets visueel. Dit kan overigens als je goed werkt met photoshop ook daarin. Ikzelf vind het prettiger om het lekker old school op papier te doen. Een soort houvast.

oke ik zal aan de slag gaan

zondag 22 oktober 2017 11:32

Acties:

0 Henk 'm!

Bastiaan

Bas·ti·aan (de, m)

Verwijderd schreef op zondag 22 oktober 2017 @ 11:28:
Kan er ook ooit een fout zitten de stylesheet? Of bijvoorbeeld waar het bestand staat? Zo ja, hoe kan ik die error oplossen?

Ja, dat kan inderdaad. Hoe je het oplost hangt af van de fout die je krijgt. Zo zijn er nog legio 'wat als'-vragen waar je ongewijfeld tegenaan zult lopen.

Ga nu gewoon aan die gang met (geschreven!) tutorials en knutsel daarmee door, eventueel met die browserconsole ernaast. Een betere manier om dat onder de knie te krijgen en fouten op te lossen waar je (op dat moment!) mee te maken krijgt is er gewoon niet

[ Voor 3% gewijzigd door Bastiaan op 22-10-2017 11:33 ]

zondag 22 oktober 2017 11:36

Acties:

0 Henk 'm!

Arunia

En als je idd je browser open hebt, kun je gewoon voor die pagina na opslaan F5 drukken om te herladen met de nieuwe code.
Je verwijzing naar de css is relatief aan waar je html staat.
Dus html en css in dezelfde map. Gewoon de naam van de css gebruiken. Map hoger? Dan map/css naam gebruiken.

zondag 22 oktober 2017 11:37

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

body
{
background-color: #0C1D91;
margin: 0px;
padding: 0px;
}
.header .body
{
background-color: black;
color: white;
text-align: center;
font-size: 40px;
padding: 10px;
}
.menu{
margin-top: 10px;
margin-left: 10px;
color: white;
width: 270px;
}
.menu h3
{
margin-top: 10px;
background-color: #031A57;
color: white;
width: 270px;
margin-bottom: 0px;
text-align: center;

}
.menu a
{
color: white;

}
.menu a:hover
{
background-color: gray;
}

Nu zit er waarschijnlijk weer een fout ergens?

zondag 22 oktober 2017 11:39

Acties:

0 Henk 'm!

armageddon_2k1

Volgens http://jigsaw.w3.org/css-validator/validator niet.

Begin hier eens zou ik zeggen

YouTube: Web Development Tutorial for Beginners (#1) - How to build webpages ...

[ Voor 73% gewijzigd door armageddon_2k1 op 22-10-2017 11:45 ]

Engineering is like Tetris. Succes disappears and errors accumulate.

zondag 22 oktober 2017 11:44

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

armageddon_2k1 schreef op zondag 22 oktober 2017 @ 11:39:
Volgens http://jigsaw.w3.org/css-validator/validator niet.

En toch werkt het niet ... lol

zondag 22 oktober 2017 11:49

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Nu wel schijnbaar .

zondag 22 oktober 2017 11:56

Acties:

0 Henk 'm!

Ramon

Als je Chrome gebruikt kan het zijn dat je slachtoffer bent van wat ik "extreme caching" heb genoemd. Chrome onthoudt zo lang oude bestanden dat je je een ons kan (ctrl)+F5'en maar je ziet nog steeds de oude versie. In de developer tools van Chrome kan je dit gelukkig wel uitschakelen.

Verder zorgen dat je een editor kiest met syntax highlighting. Bijvoorbeeld met VS Code had je die O/0 gespot omdat de kleur dan niet wordt opgepakt.

[ Voor 21% gewijzigd door Ramon op 22-10-2017 11:58 ]

Check mijn V&A ads: https://tweakers.net/aanbod/user/9258/

zondag 22 oktober 2017 12:29

Acties:

0 Henk 'm!

Verwijderd

En op het gevaar af om te vloeken in de kerk: waarom probeer je zo moeilijk te doen? Neem een CMS en plak er een theme op en je bent klaar. Dan heb je met een minimum aan inspanning maximaal resultaat. Je leert er ook niet veel van, maar een CMS is juist bedoeld voor diegenen die niet kunnen coden maar wel een redelijk gelikte website willen.
Met Wordpress of Drupal kan je in 10 minuten al een redelijk resultaat hebben.

zondag 22 oktober 2017 12:38

Acties:

0 Henk 'm!

MonkeySee89

Gebruik een code editor als brackets, deze heeft een krachtige preview modus en laat je direct zien als je wat mist of een typo hebt gemaakt. Als je eenmaal een beetje ervaren bent kan je er altijd voor kiezen om een editor als notepad++ te gebruiken.

zondag 22 oktober 2017 12:46

Acties:

0 Henk 'm!

grote_oever

Verwijderd schreef op zondag 22 oktober 2017 @ 11:16:
Gokje: er zit een fout in je code.
Welkom in de wereld van coding. Testen en bugs eruit halen hoort er bij...

De wereld waar het oplossen van het laatste foutje kan resulteren in het vinden van 20 foutjes

zondag 22 oktober 2017 13:00

Acties:

0 Henk 'm!

Verwijderd

grote_oever schreef op zondag 22 oktober 2017 @ 12:46:
[...]

De wereld waar het oplossen van het laatste foutje kan resulteren in het vinden van 20 foutjes

Maar ook de wereld waarin het oplossen van 1 syntax error honderden fouten in 1 keer wegwerkt ( /me denkt met frustratie terug aan de lessen pascal op de HTS begin jaren 80)

zondag 22 oktober 2017 13:18

Acties:

0 Henk 'm!

NMe

Quia Ego Sic Dico.

Sorry, maar dit forum is er niet om je aan het handje te houden terwijl je kennis opdoet. Als je concrete vragen of problemen hebt open dan gerust een topic (maar dan lees eerst De Quickstart door!)

Met een topic als dit ben jij niet geholpen en leer je niks en gezien het aantal keer dat dit topic gerapporteerd is worden de vaste gebruikers er ook niet vrolijk van.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

Pagina: 1

Dit topic is gesloten.