Week 4: Bootstrap! — WebDev
Hey friends! After completing about the baseline works for my HTML CSS website, I am going to upskill myself and move on to Bootstrap! What is Bootstrap? According to Wikipedia,
Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development.
This will be my next step in my webdev journey! Scroll down to continue reading about what I have learnt so far and my progress in creating a new website in Bootstrap!
140622:
For my first day, I learnt how to create a navbar and use icons from Font Awesome to make a nice design. One big takeaway was how to tilt the image of the iPhone. This was done using the transform property to achieve such an effect. The title design actually looks quite nice and I am happy with the work for the first day only!
150622:
Today, I continued to edit my tindog page. Interestingly, I realised how easy it was to crop an image into a circle in CSS. Simply use this line of code on a square image, border-radius: 100%; and the image will become a full circle.
I came across the issue of my image not resizing together with a shrinking webpage. To solve this problem, I simply had to use the class, img-fluid, to make the image responsive to the webpage.
The instructor, Angela Yu, recommended us to download the sublime-editor package to make editing even easier. This simply allowed me to add same lines of code across multiple lines at one shot, by holding the option key and dragging the cursor across those lines that I would want to edit.
I also figured out how to change the size of font-awesome icons. Simply add the class, fa-Sx, where S refers to the multiple for the size of the icon to be increased.
160622:
Today, I learnt how to create a simple carousel and use cards from Bootstrap. As the templates can mainly be found online, my main learning points were learning how to use and change the parameters of the different tags to allow the webpage to show the carousel and cards according to how I want it to look like. For instance, for carousels, I must take note of data-bs-target and ensure that it targets the correct class or id for the carousel to work effectively.
170622:
I learnt two new things today: the Z-Index property as well as media queries.
Z-index
The Z-index specifies the stack order of an element. An element with greater stack order is always in front of an element with lower stack order. As the instructor shared, there are a few things to take note of:
- Position property must be explicitly stated.
- All elements have a default z-index of 0.
- Elements in earlier lines of code will be placed below elements in later lines of code.
Media Queries
For media queries, this is how the general structure of a media query looks like:
@media <type><feature>
There are a few types of media queries, namely print, screen and speech. Lines of code until @media <print> will be run when the reader wants to print the webpage.
@media <screen> is used for different screen sizes and is commonly used for webpage adaptability to different mobile/device sizes.
@media <speech> is used when the website is read to visually impaired people.
After understanding these concepts, I went on to work on adjusting my webpage for mobile devices and continued to design the footer portion.
All in all, this is what I have done so far for the Bootstrap website. There are still some things to learn and do and I would also need to touch up the website during my own free time. Other than that, it has been quite fun creating this webpage, and I look forward to seeing how the final design turns out!
Have a great weekend!
Jing Kai
