WELCOME TO OUR BLOG
Study HTML & CSS. Do some form tutorials
Its time to revise ourselves :). Bought online 2 nice books The CSS anthology which has 9 chapters with nice CSS layouts examples for practise and the Mastering HTML 4.0 book. Although both quite out of date they are very good as they give the Fundamentals to get an 100% understanding of ho HTML and CSS can be written 100% CORRECTLY. Every front end developer MUST read those two books as they will be the basis for future study.It is a bit difficult to go from 1 to 5 isn’t it? Looking forward now reading and revising the HTML 4.0 book.
Surprisingly by reading the CSS Anthology book found out a trick of how to make a fully responsive liquid 2 columns layout having the left column always sticking at the left. Simply what we need to do is tos set our column in fixed position and give it a 100% height or position it absolute with left 0 and give it a width say 220px. Then for our right column simply float it left or right and give it a right margin equals to the width of our left column. Simple 🙂
Have a look at the layout here
Also found a nice tutorial from a colleague and thought to do some practise. I recreated it using his tutorial and I think it is a very nice starting point for creating some nice admin forms.
His code is really nice and simple and you can read the rest of his tutorials. Nice work Bibek. Search for “Code with Bibek” in YouTube to get an idea of his work.
Bibek can make his form to align nicely by simply adding the following html, css to his code:
.main {
height: 100%;
width: 100%;
display: table;
}
.wrapper {
display: table-cell;
height: 100%;
vertical-align: middle;
}
REMEMBER:NEVER COPY PASTE THE CODE FROM SOMEONE ELSE IS WORK EVEN IF HE HAS THE FILES AVAILABLE. Simply for the reason that you will have to WRITE THE CODE again by your self to UNDERSTAND what does it to. This is how we replicated this tutorial by writing the whole code again. Here is a rewritten version of the code:
Forms
Comments