Convert an A4 document made in illustrator to html/CSS

Ok, so i have designed a report (A4, landscape) in adobe illustrator (some text and data in different columns and some images) and now it needs to be converted to html and css so it can be viewed and be editable online in a A4 landscape format. The user should also be able to download and print the report as a pdf.

I’m new to programming and feel way over my head accepting this job. BUT i thought this would be a good gateway into html and css. Now i really need to learn this! I have 5-7 days to finish this.

I would approciate all the help i can get! I really need it :slight_smile: I know the basics of html and css but thats it. Im also right now taking the Front end dev certification here at fcc.

So where do I start? And where do continue…

Thanks in advance/gaffo

Do you need to do anything other than print the filled in form, such as store the data somewhere, or perform some sort of calculation or logical processing of the form?

Making a form is simple enough that you can learn it very quickly, and still have time to learn some nice styling tricks you can use. Processing the form requires a fair bit more learning - which may still be possible for you in the time you have, but it really depends on prior knowledge and how quickly you can pick things up.

The freecodecamp curriculum can give you a solid crash course in the HTML and CSS you need for the front end, printable stuff.


nothing other then updating the form with different data every month and printing out the report as a pdf is needed.

so first of, I tried to style the page so that it would have an a4 format. What style method should I use for this. I tried both:

#a4 { height:595px; width:842px; } and #a4 { height: 210mm; width: 297mm; } they both yield different results. when I use the pixel format it looked way to small but the mm version also looked too small to be a a4 format. what to do? thanks/adam

You should consider that when designing for screens, size constrains like A4 or any other type of paper go straight out the window.
I’m not saying you should start immediately worrying about how it will look on a tiny phone screen, but just keep in mind that people might look this on their desktop 27" or their laptop 15 and so on".
Making a print version out of that is another matter, but there are tutorials and resources out there to make your site print friendly.