Lesson 10 of “Bootstrap” 6/11/18

Today I finished the tenth lesson of “Bootstrap”, titled: “Bootstrap Challenges”. The lesson consisted of 4 different challenges to complete with Bootstrap. The first one required me to create a “Sticky Navbar”, which is a navigation bar that has a fixed location on the page and stays there even as you scroll away. It’s useful because it allows you to always have access to the navbar wherever you are on the page. The second challenge was “Adding Interactions”, where I used Bootstrap and CSS to create buttons that would appear when you hovered over the panel it was attached to. This was tricky, because you had to set up the CSS selector like this: .parent:hover .child{}, in order to select the buttons using the panels. The 3rd challenge was easy, all I did was take a template from online and add HTML to create a team page.

JQuery Fun CodePen.io Assignment part2 6/7/18

Today is the second day that we worked on the JQuery Fun project on codepen.io. We set up rows and columns using divs with classes of row/col. Not only by working on this project did I learn about JQuery, I learned a lot about JavaScript, including the basic setup/skeleton of JavaScript. We also played around with different functions in JavaScript that affect the HTML. For example, we used JavaScript to make one of the columns disappear and then reappear using the fadeOut and fadeIn functions.

JQuery Fun Codepen.io Assignment part 1 6/5/18

Today we started the JQuery Fun prject on codepen. We only had enough time today to finish the basic html structure and add a few buttons. I also learned how to add components into the meta by clicking the gear next to “html”. Adding components such as Bootstrap 4 and JQuery allows us to do many more things with the code, part of which we will use for this assignment.

Flexbox Image Gallery Codepen.io part 2 5/11/18

Today, I continued to work on my Flexbox Image Gallery and added many CSS rules to make the Gallery look better. I changed many of the colors, added a border to the images and image captions, and I learned how to order my images using the order CSS rule. First, I made a border using border: black solid 2px; which sets the color, type, and width of the border. I also added the border-radius rule, which allowed me to round the edges of each border to make it look smoother. I also rounded the edges of my images using the border-radius rule. The last thing I did was create an order for my images by using the order rule. This allows me to organize the gallery by changing a few numbers in CSS rather than cutting and pasting entire figures inside the HTML.

Flexbox Image Gallery Codepen.io Assignment part 1 5/7/18

Today, I worked on my Flexbox Image Gallery.  It was made with an h1 tag, followed by a section tag to put the website’s content in. Within the section tag, there are 9 figure tags, each with an image and caption. Every image was taken from lorem flickr as a sample image. This is useful because you can set it to be a different image every time you refresh the page. In addition to the HTML, we added multiple CSS rules using flexbox to organize the content. For example, We used flex-direction:row; to organize the images horizontally, and we used flex-wrap:wrap; to make the pictures wrap around to the next row so we don’t have to scroll horizontally.

Animation through Interaction 4/19/18

Last week I returned to lessons 14 and 15 of Advanced HTML and CSS to fully complete them. I had left a few exercises unfinished or halfway completed. I had to relearn how to create an animation using CSS. You simply write @keyFrames <name of animation> { from{:<filter>(0%);} to{:<filter>(100%)}} and insert the filter you want. You can also create animations with things other than filters, like other properties of a tag. For example, you can change the width or height of an image smoothly with the animation. With lesson 15, I relearned how to allow your mouse to affect elements of your page with selectors like hover:<tag>. I think it’s smart to return to old lessons to refresh the content in your head every now and then.

Color your webpage using HTML!

Making sure your webpage really “pops” or catches the eye of your users is very important. Color is a really easy way to give your website personality and purpose. Coloring your webpage is really easy, all you have to do is give any HTML tag the style attribute, and specify which color you want.

<body style=”color:red;” > Hello </body>

This code will make the items inside the body tag red. But what if you want to make the background red, not the font? Simply change the “color” to “background-color”.

<body style=”background-color:red;”> Hello </body>

Lesson 8 and 9 of “Bootstrap”

Today I completed Lesson 8 and 9 of “Bootstrap”. Lesson 8 taught me about drop down menus, which are menus like navigation bars, except they can extend to reveal more links/information. Lesson 9 taught me how I can use other Bootstrap examples as a starting point for my own projects. I also went back and improved my “Project: Tell A Story” project. I had forgotten to add multiple pages and instead only had one animation.

Lesson 7 of “Bootstrap”

Today I completed lesson 7 of “Bootstrap”, which taught me about navigation bars. Navigation bars are a really easy way for users to navigate a website’s many different pages. You can easily create a navigation bar by putting everything in a div with the class .container, creating a header for the navigation bar with the tag <nav>, and creating a <ul> for the navigation bar’s components.