Partage

HTML5 CSS3 Course - Your questions

1 2 3 >>

Anonyme

15 décembre 2014 à 13:47:06

Hello and welcome to all of you who are taking the course "Build your website with HTML5 and CSS3"!

You will have access to the exercises of the first part from Tuesday, December 16th. Throughout the four parts of this course, you will learn the basic skills that you need to build a website with the latest versions of HTML and CSS.

If you have questions about the course contents, this is the place to ask! Mathieu, the author of the course, will be here to answer them as best he can, but feel free to talk amongst yourselves and help each other. :-)

If you have questions about the logistics of the course (how to access exercises, how to correct assessments…), you can ask them via email to: hello@openclassrooms.com

Happy learning to you all!

-
Edité par Anonyme 16 décembre 2014 à 11:53:24

MikeMars

16 décembre 2014 à 13:19:03

Hello, I like to ask a question about the traductions of the course, so where can I learn in french?

Thanks for the attention.

M.N.

romain51

16 décembre 2014 à 13:22:40

Hello Mike if you go on the upper right side of the website where there is English written on you can change the language to French

Un jour les Valaisans domineront le monde. Mais pas demain, ya apéro

MikeMars

16 décembre 2014 à 15:24:23

Thanks for the help

M.N.

hgouello

7 janvier 2015 à 18:46:45

Hi Mathieu,

Thank you very much for the course it is really awesome! I enjoy so much learning and be able to use that knowledge to create html pages!

So, I learn with macOS, google chrome and sublimetext2. Through my learning path I noticed fews tags and attributes who doesn't seem to work:

in the HTML file: attribute class="": Floating subtitle under the link doesn't show.

in the CSS file: font-size: 0.8em; : the size application in em doesn't apply. But it doesn't really matter as the other one work well.

in the CSS file: float: left; : Floating image ,I used the format .jpeg and .gif, and on both the text start to show at the bottom corner and don't wrap it at all.

If you have any suggestions to help me find out how I can deal with it it would be great! Thank you!

Hélène

Mateo21

12 janvier 2015 à 10:51:04

Hi!

Thanks for your kind message.

Regarding your questions, I think it will be hard to answer without seeing the source code. If you could provide it that would be great.

I can confirm that all these CSS properties do work well but under some circumstances they might not be applied. Again, the source code would be really helpful.

If you'd like to join us, read "How do we work at OpenClassrooms"! :)

hgouello

13 janvier 2015 à 19:43:01

Hi,

By mistake I erased my files for the lessons. So I build an other file to test the bugs, and I actually find out what might have been wrong on the first one. I resolved all problems I have enunciated in my last message, which is cool! I just took my time I guess.

Anyway thank you for the answer. I am still enjoying the course a lot!

Hélène

Clavendys

9 février 2015 à 20:22:04

Hello,

Courses are great and I am enjoying them a lot but lately, my browsers take ages to load my work when I want to check what I've done. Is this normal? Is it going to resolve itself or are going to treat that subject later on? I looked on google but I only find answer regarding a more advanced level like how to boost your website to load using this or this software. Or some say that the source code is too heavy... however I tried to follow Mathieu's advices on presentation.

For instance in the html file:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</header>

<nav>

<ul>

<li><a href="forum.html">Forum</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</nav>

<h1><span class="wda"> Wilfrid Fabarez </span></h1><br />

<h3>Travailleur social en reconversion d&eacuteveloppement web</h3>

<h2><strong>Mon experience</strong></h2>

<ul>

<li><strong>Fév. 2014 - Présent :<br />

Moniteur éducateur en foyer d'hébergement</strong><br />

Protection Social de Vaugirard - 92240 Malakoff

</li><br /> etc...etc...

and for the css file :

style.css

---------

By Clavendys

@font-face{

font-family: 'FFF_Tusj-webfont';

src: url('FFF_Tusj-webfont.eot');

src: url('FFF_Tusj-webfont.eot?iefix') format('eot'),

url('FFF_Tusj-webfont.woff') format('woff'),

url('FFF_Tusj-webfont.ttf') format('truetype'),

url('FFF_Tusj-webfont.svg#webfont') format('svg');

}

font-family: 'FFF_Tusj-webfont', 'Comic sans MS', Georgia, sans-serif;

}

h2{

text-shadow: 2px 2px 4px black;

background-image: url("Pics/bokeh-banner.jpg");

background-size: 200px 80px;

width: 50%;

color: white;

opacity: 0.5;

}

h2 strong{

font-weight: bold;

}

font-size: 130%;

}

.MyFace{

right: 0px;

width: 10%;

position: center;

border: 3px groove maroon;

border-radius: 10px;

box-shadow: 6px 6px 6px black;

}

body{

background: url("Pics/Renovatai.jpg") fixed;

background-repeat: no-repeat;

background-size: 1350px 720px;

}

h1{

font-size: 2.6em;

text-align: center;

}

.morley{

text-decoration: none;

color: red;

font-style: italic;

}

.morley:hover{

text-decoration: underline;

color: green;

}

I'm I doing something wrong here that slow down that much the loading of my page?

Sorry to bother you guys and thanks for any insight you can give me.

Take care.

Will

Clavendys

9 février 2015 à 20:27:14

Well I notice that my display doesn't show when sent. So I hope you'll be able to help me anyway. Does the display as an impact on the loading of the pages or is it just for an easy read? I thought it was the latter but I'm starting to doubt...

Will

romain51

10 février 2015 à 0:20:39

WilfridFabarez a écrit:

Well I notice that my display doesn't show when sent. So I hope you'll be able to help me anyway. Does the display as an impact on the loading of the pages or is it just for an easy read? I thought it was the latter but I'm starting to doubt...

Will

there is a button in the editor menu </> which makes your source code more readable

Un jour les Valaisans domineront le monde. Mais pas demain, ya apéro

Clavendys

10 février 2015 à 19:04:38

Hi there,

Thanks for your quick answer, mate!

I have tried to insert the html code with this button but I can't find html language in the preselection available. I found css tho but in the end I'm not sure what I should post here. I really am a noob! sorry! I don't want to flood this section with my stuff. Should I post both codes? (I must warn you that the html one is 97lines long and the css one 47.)

romain51

10 février 2015 à 19:10:06

Clavendys a écrit:

Hi there,

Thanks for your quick answer, mate!

I have tried to insert the html code with this button but I can't find html language in the preselection available. I found css tho but in the end I'm not sure what I should post here. I really am a noob! sorry! I don't want to flood this section with my stuff. Should I post both codes? (I must warn you that the html one is 97lines long and the css one 47.)

it's xhtml

Un jour les Valaisans domineront le monde. Mais pas demain, ya apéro

Clavendys

10 février 2015 à 20:32:40

Ok, so here the html code:

<!DOCTYPE html>
<html>
	<head>
		<meta=charset="utf-8" />
		<script src="MyCV.js"></script>
		<link rel="stylesheet" href="MyCV.css" type="text/css" charset="utf-8" />
		<title>MyCV</title>
	</head>
	
	<body>
		<header>
	
		</header>
		<nav>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="forum.html">Forum</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</nav>
			<h1><span class="wda">&nbsp;Wilfrid Fabarez&nbsp;</span></h1><br />
			<h3>Travailleur social en reconversion d&eacuteveloppement web</h3>
			<p> <a href="Pics/MyFace.jpg"><img src="Pics/MyMiniFace.jpg" class="MyFace" alt="Wilfrid Fabarez" Title="This is how I look ^^"/></a></p>
		<section>
			<h2><strong>Mon experience</strong></h2>
				<ul>
					<li><strong>F&eacute;v. 2014 - Pr&eacute;sent :<br />
							Moniteur &eacute;ducateur en foyer d&apos;h&eacute;bergement</strong><br />
							Protection Social de Vaugirard - 92240 Malakoff
					</li><br />
					<li><strong>Juin 2011 - Nov 2013 :<br />
							Moniteur &eacute;ducateur en foyer de vie et d&apos;h&eacute;bergement accueillant des personnes handicap&eacute;es mentales (d&eacute;ficience, trisomie, psychose infantile)</strong><br />
							Les Jours Heureux - 75016 Paris
					</li><br />
					<li><strong>F&eacute;v. 2009 - Mars 2011 :<br />
							Moniteur &eacute;ducateur aupr&egrave;s de malades psychiatriques, personnes handicap&eacute;es ou souffrant d&apos;autisme</strong><br />
							Elfrida Rathbone Society - West Norwood, Londres
					</li></br>
					<li><strong>Oct. 2008 - F&eacute;v. 2009 :<br />
							Moniteur &eacute;ducateur dans un centre d&apos;accueil pour sans-abris</strong><br />
							The Connection at Saint Martin-in-the-field - Westminster, Londres
					</li><br />
					<li><strong>Oct. 2006 - Sept. 2007 :<br />
							Moniteur &eacute;ducateur dans un centre d&apos;accueil pour personnes d&eacute;pendantes et handicap&eacute;s</strong> - en alternance</br>
							Carr-Gomm - New Cross, Londres
					</li><br />
					<li><strong>Juillet 2005 - Juillet 2006 :<br />
							Barman</strong> (pub anglais)<br />
							The Wickham Arms - New Cross, Londres
					</li><br />
					<li><strong>Nov. 2003 - Juin 2005 :<br />
							Employ&eacute; polyvalent de restauration</strong> (env. 40 couverts)<br />
							Le Bistro Rigoletto - 33000 Bordeaux
					</li><br />
				</ul>
		</section>
		<section>
			<h2><strong>Ma formation</strong></h2>
				<ul>
					<li><strong>Avr. 2009 : Certificat de Premiers Secours</strong> - TRC Ltd, West Norwood, Londres<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<em>Renouvel&eacute; en juin 2013 jusqu&apos;en 2018</em> - La Croix Rouge, Paris 15&egrave;me
					</li><br />
					<li><strong>Juil. 2008 : Access to Social Work</strong> (<em>Traduction asserment&eacute;e</em> : <strong>Dipl&ocirc;me d'Etat Britannique de Moniteur Educateur) -</strong>
							<a class="morley" href="http://www.morleycollege.ac.uk/" target="_blank">Morley College</a>, Waterloo, Londres
					</li><br />
					<li><strong>Nov. 2008 : Certificat d'hygi&egrave;ne et s&eacute;curit&eacute; alimentaire niveau 1 & 2</strong> - CIEH, New Cross, Londres
					</li><br />
					<li><strong>Juil. 2001 : BEP Comptabilit&eacute;</strong> - LPP Saint-Augustin, Bordeaux
					</li><br />
				</ul>
		</section>
		<section>
			<h2><strong>Mes comp&eacute;tences</strong></h2>
				<ul>
					<li><strong>Langues :</strong> Fran&ccedil;ais (langue maternelle), Anglais (courant), Espagnol (Notions)
					</li>
					<li><strong>Informatique :</strong> Office -Word, Excel, PowerPoint-, Navigation internet (Interm&eacute;diaire), HTML5 & CSS3, C (D&eacute;butant)
					</li>
					<li><strong>Musique :</strong> Chant, Beatboxing, Piano
					</li>
					<li><strong>Cuisine :</strong> Sp&eacute;cialit&eacute;s orientales, asiatiques, cr&eacute;oles & africaines
					</li>
				</ul>
		</section>
		
		<footer>
			<p>Clavendys Copyright<br />
				<a href="contact.html">Contact me!</a>
			</p>
	
		</footer>	
	</body>

</html>

and here the CSS one:

/*
style.css
---------
 
By Clavendys
*/
@font-face{ 
	font-family: 'FFF_Tusj-webfont';
	src: url('FFF_Tusj-webfont.eot');
	src: url('FFF_Tusj-webfont.eot?iefix') format('eot'),
	     url('FFF_Tusj-webfont.woff') format('woff'),
	     url('FFF_Tusj-webfont.ttf') format('truetype'),
	     url('FFF_Tusj-webfont.svg#webfont') format('svg');
}
*{
	font-family: 'FFF_Tusj-webfont', 'Comic sans MS', Georgia, sans-serif;
}
h2{	
	text-shadow: 2px 2px 4px black;
	background-image: url("Pics/bokeh-banner.jpg");
	background-size: 200px 80px;
	width: 50%;
	color: white;
	opacity: 0.5;
}
h2 strong{
	font-weight: bold;
}
p{
    font-size: 130%;
}
.MyFace{
	right: 0px;
    width: 10%;
	position: center;
	border: 3px groove maroon;
	border-radius: 10px;
	box-shadow: 6px 6px 6px black;
}
body{
    background: url("Pics/Renovatai.jpg") fixed;
	background-repeat: no-repeat;
	background-size: 1350px 720px;
}
h1{
    font-size: 2.6em;
	text-align: center;
}
.morley{
   text-decoration: none;
   color: red;
   font-style: italic;
}
.morley:hover{
   text-decoration: underline;
   color: green;
}

Here you go! Am I doing something wrong resulting in slowing down the loading of the page? Maybe it's normal I don't know but it suddenly went from one seconde to 8 seconds for the page to appear (Note that I've tried to load it on Chrome, Firefox and IE : same result).

Clavendys

12 février 2015 à 11:36:12

Ok. Never mind! The problem apparently fixed itself! At least I learned how to edit codes in forum. Cheers!

Clavendys

12 février 2015 à 14:24:57

Oh no, the problem is back! Can someone tell me if this is normal? Please! Maybe it is and I am being annoying for nothing. But I need a gentle soul to say either: "Yes it's normal carry on studying without worrying about the loading time" or "No it's not normal, you should find out what's wrong before going further." or even "Stop bugging us, you're on the wrong forum!"

Thanks in advance for your kindness.

Mateo21

17 février 2015 à 14:35:20

Hello,

Your problem is that your page takes ages to load, right? I see no good reason for this. Here are a few things you might want to try out:

Use a different browser
Use a different computer
Remove your special fonts from CSS
If nothing works, try removing the whole CSS and see if it's any better. Or even remove half of the HTML code. And then put it back to locate what is the source of your problem. This is called the "Divide and rule" technique. It's kind of annoying, but it works when you have no other clue.

If you'd like to join us, read "How do we work at OpenClassrooms"! :)

Clavendys

19 février 2015 à 19:53:49

Hello Mateo,

Thank you for your answer. I've changed the special font on the CSS file and problem solved so thank you, mate!

Take care

VincentTheProgrammer

17 mai 2015 à 22:52:46

Hi Mathieu,

I have a question regarding the "Practical exercise: step by step creation of a website":

Why is it preferred to use a "Main wrapper" inside the body, rather than setting "width" and "margin: auto" at body level directly? (In my tests, the result is the same)

Thanks in advance for your answer.

Vincent.

VincentTheProgrammer

17 mai 2015 à 23:31:21

Hi Mathieu,

For the exercise in assessment 3, I am unable to access your sample illustration in the exercise instructions (there is an icon, but no link).

Cheers,

Vincent.

VincentTheProgrammer

18 mai 2015 à 3:28:39

Hello,

After working on assessment 3, I find myself unable to make the web page elements take all the width of the page using relative widths and inline-block display.

Having read various entries on the web regarding this issue, I see that people advice using float rather than inline-block.

Could you give me a hint and let me know if the solution is supposed to work with just relative widths and inline-block (though this has not worked for me so far)?

Cheers,

Vincent.

VincentTheProgrammer

MarieEpanou

30 mai 2015 à 10:42:08

Hi, Thanks for the course.

Like VincentTheProgrammer, for assessment 1, I couldn't access neither to your illustration nor to the illustrations of all people I corrected. But they added their picture to their file, I don't understand... Actually, I could click on the icon, and then there was a link, but I could never see any real illustration, any picture. Is that normal or not?

Thanks for your answer.

MarieEpanou

30 mai 2015 à 21:26:08

Youhouhou!!!

1 : I found the answer to my question: you have to open the html and css files with Notepad ++ and THEN you click on the file so that your browser display it.

2: Two weeks of your course and I am able to change the style of my blog !!! THANKS !!! I finally achieved to change the background of this text : "Previous posts". I am so proud of me !

I JUST want to know all about your course, it is very interesting and VERY efficient!

Thank you a lot !

MalgorzataMazur

3 juin 2015 à 9:24:55

Hello,

I have a general question, hope it's ok to post it here.

I was too late for the first assessment, and i'm not a premium member, the rest of the course I did on time, I'm just waiting for yours scores. Will I be able to finish the course with the positive resultat anyway? Or if not, can I do something to pass?

Thank You for any advices, and thank you for this great course!

Anonyme

4 juin 2015 à 10:26:25

Hi there,

Thank you for your message, we are glad you're enjoying the course!

Here are the two conditions you need to meet to pass the course :

have completed all the exercises, and
have 70% of correct answers.

So if you want to pass this course, you will need to enroll again and do all the exercises again (or become a Premium member and finish the first exercise to get your final score!).

Hope this helps,

fifigueri

12 juin 2015 à 17:32:09

hi i really neeeeeeeeeeeeeeeeddd to work with you

fatima

kevinbonnefoy

5 décembre 2015 à 16:33:33

Hi everybody !

I would like to ask a thing about classes and Id, the purposal of theses aren't clear for me, I mean does Ids are only used with JavaScript?

Even if it's helpful to know that an element is unique I can only use classes no?

Thanks for your time, and for your courses they are really great

Kevin

WëlMâhjôùb

21 décembre 2015 à 21:34:11

cv vous pouver m'aider a bien metrise css

KethiaJustin

1 mars 2016 à 22:35:03

Je veux maitriser le css3

DancanBest

13 juin 2016 à 16:37:18

what do i do if iwant the certificate to have my full names

Thomas D

13 juin 2016 à 17:52:43

You can edit the name after obtaining the certificate

lesjoiesducode / Les points-virgules en JavaScript

1 2 3 >>