Ulog #3 : How To Use only <DIV> tag to structure your PSD into a web page

apiprincz (52)in #utopian-io • 6 years ago (edited)

Procedures

Step 1 : Before I wrote a single code, I began by making a rough sketch of the website design layout on paper

Step 2 : I transferred it into the digital environment using a simple image editing tool, paint, to neatly show the web layout structure as shown below

Step 3 : Now I created a new project folder for my web page. See steps below

Go to documents on your pc
Right click and choose NEW on your menu-list, then create a new folder, you can call it "Mydesign"
Open "Mydesign" folder and create a new folder inside. Call it "Assets"
Inside the "Assets" folder create 3 separate folders save it as "css" , "images" and "javascript"
open the "Mydesign folder from sublime text editor with this simple steps shown graphically

*** All your PSD files must be saved in the "images" folder and your external css written into your "css" folder ****

Note : We have not created the "Index" html file which is where your code will be written into. Make sure you create it after step 4!

Step 4 : Launched sublime text editor, I used version 3 but dont worry just hang on with any good editor you can lay hands on.

To create your "index" html file

Go to "File" and locate "Open Folder" from the menu list and choose "Mydesign" folder

Now from your sublime editor, right click on "mydesign" folder and choose "New File"
Save it (CTRL + S) as only "index.html" and make sure you choose the file type as an "HTML" extension

Step 5 : Write out the html codes following the design layout and added some styling to give it some face-value.

Note: Make sure you verify your webpage through a native browser preferably chrome because it has the added feature of source code inspection.

Challenges And Solution

By default; the inner < div > will appear to share it's border with the left side border of the parent < div > on your screen, Try placing the inner < div > in the appropriate position by introducing the margin = 0 auto; property.

So What Margin=0 auto; property does is to override the default position of the inner < div > by clearing the margin on the right and left side equally, thereby keeping the inner < div > in a central position

Useful tips!
Although < div > don't bear border line by default, you can introduce the border = 1px solid; property to monitor your < div > positioning. Very helpful.

Final Prototype Design