Tried a CSS Frame Generator
Being a Web Developer, particularly a Front End Engineer, we try planning the layout first, using the HTML Tags and stuff, and then think of building the CSS. The first thing we do is, take a paper and draw the layout. And this is how it looks:
![[IMG]](proxy.php?image=http%3A%2F%2Fi.imgur.com%2FXs0YO.png&hash=1aaee80852fd26e6f60a893ab554366a)
After thinking about how the layout is, we need to write the HTML Code, which is also kind of easy task, but needs some good thinking and stuff. That would give an output in the form of HTML, yeah, includes the paper-work too! Ha ha! The output would be something similar to what is below:
So, I thought of building a same one using PHP. Now guys here, try to think of what I could have done, or at least what techniques I would have used. 😀
More to come!!! 😀
After thinking about how the layout is, we need to write the HTML Code, which is also kind of easy task, but needs some good thinking and stuff. That would give an output in the form of HTML, yeah, includes the paper-work too! Ha ha! The output would be something similar to what is below:
My New App
[url=#]My New App[/url]
After this part is done, the main task of building CSS comes in! We need to find the CSS and for each element in the DOM, the output we need would be:body {}
body div.wrap {}
body div.wrap div#header {}
body div.wrap div#header h1#logo {}
body div.wrap div#header h1#logo a {}
body div.wrap div#sidebar {}
body div.wrap div#sidebar ul {}
body div.wrap div#sidebar ul li {}
body div.wrap div#sidebar ul li a {}
body div.wrap div#content {}But this process is really tedious when the page is too big. So we thought of using an app, which does this same work. I personally preferred #-Link-Snipped-#. Another problem comes in. It is a hosted app and when we are offline or we need to use it for private purposes, we couldn't rely on it.So, I thought of building a same one using PHP. Now guys here, try to think of what I could have done, or at least what techniques I would have used. 😀
More to come!!! 😀
Replies
-
Sahithi PallaviFine. Keep helping us with more good tutorials 👍 -
anjkalaihi mr.praveen! its nice read ur explaination and i got it too! but what is this: " "#-Link-Snipped-#">
"😕
can u plz explain? -
PraveenKumar Purushothaman#-Link-Snipped-#, It is called DTD or Document Type Definition! It is used for identifying which HTML version you are using. The next line is the starting HTML tag. It has a XML NameSpace attribute for which type of XHTML it uses, and the language!
The META tag is a metadata of the HTML file, which says about the Content-Type, which is a HTML Page with a MIME Type of text/html, and the character set used in it is UTF-8.
Hope this is clear! 😀 Let me know if you want further clarifications! 😀 -
anjkalaithanks a lot! mr.praveen, i got it!
-
deepu11111111It's Nice Thank you....
You are reading an archived discussion.
Related Posts
i want to do project on distance relay .
can i get the design of relay.
I do not vouch for the accuracy. Those who feel like may take the test.
https://www.bbc.co.uk/news/health-18770328
My results:
BMI 18. Below 92% world male population between 70 and 79 years....
Name: Priyanka Tiwari
Engineering Trade: Instrumentation & control
Location: Gandhinagar, Gujarat
Occupation: Student
Work Experience: No experience(i am pursuing my b.tech)
Hobbies and Interests: I am freaky about music n...
https://news.discovery.com/human/friday-13-events-120713.html#mkcpgn=rssnws1
Sree Chitra Tirunal Institute for Medical Sciences and Technology, Trivandrum, an Institute of National Importance under DST, GOI, has started a novel scheme of high value fellowships for scientists in...