My HTML and CSS journey and live project links
Table of contents
HTML journey
My html journey started with installing vs code as it is my first language. Then I learned about how to write boilerplate code and giving name to the document.
The most important thing I learned in html is the inline tags and block level tags. Also I learned about the difference between tag and element.
Then I explored some common tags in html like division, heading, paragraph, anchor, header, section, unordered list, ordered list, button, footer, etc. Each of these tags have an opening tag and closing tag. I also learned about how to give attributes inside the opening tag of these tags.
Then I Learned about emmet shortcuts like how to put list items inside an unordered list, shorcut to write sibling elements, etc.
Then I learned about form tag in which I explored many input elements and how to link an input element with its label tag. Last I learned about how to link css file with html file.
CSS journey
My css journey was painful but after putting efforts and following guidance I achieved the benchmark. First I learned about css selectors i.e. how to target an element.
Then, after learning initial properties like margin, padding, border, border-radius, background color, etc I learned about some important properties of css like positions, flexbox, grid, z-index, background-image, linear gradient and media query.
In positions I put more focus on relative, absolute, fixed and sticky positions. In grid I learned about grid template rows and columns.
I also learned about how to bring google fonts to css file.
After this I learned about few other css properties like transition ,animations, border-box, calc function, etc.
In media query I used rem units to make webpage responsive.
Live project links
First I saved my html and css projects to my github account using git. Then I made my account on vercel to push my code on production. Then I linked my github account to my vercel account so that vercel can use my html and css code for production.
After facing difficuIties while production, I learned to put dot (.) in the output directory section on vercel, then my problem was solved. Then I learned that we can change the url of our project after pushing our code to production using vercel. I also learned that we can update our project after pushing our code to production.
Following are my live project links: