Lessons 3 and 4 of “Bootstrap”

Today I completed Lesson 3 and 4 of “Bootstrap”. Lesson 3 was about jumbotron pages, which taught me about a certain element to bootstrap called jumbotron, that I can activate by putting code within a div with the class “jumbotron”. Jumbotron code is used to express importance. Lesson 4 taught me about the Bootstrap grid system, which I can use to organize my code into a grid by putting code within divs with the classes of “row” or “col-(size of device)-(amount of columns)”. This system helps organize a page, and can tell a page how to organize the code based off of how big the device is, or how wide the window is.

“Project – Tell A Story” and the first 2 lessons of “Bootstrap”

Today I completed the “Project – Tell A Story”, and the first 2 lessons of “Bootstrap”. For my project, I created a dark night sky that turns into a blue sky as the sun moves into the picture, and I used colored line breaks as the ground (green for grass). The first lesson of Bootstrap told me about it, what it does, and asked me questions about what it did. Bootstrap is a way to allow websites to function and look clean on all devices and with any page size ( allows re-sizing windows). Almost no websites use only HTML and CSS, without any frameworks. Lesson 2 actually taught me how to code bootstrap into my  website and showed me where to copy & paste the “skeleton”. You can code bootstrap by pasting the skeleton, then adding the class “container” to div elements that you want to affect.

Lessons 8, 9, 10, 11, 12, 13, 14, 15, and Unit Test of “Advanced HTML and CSS”

Today I finished lessons 8, 9, 10, 11, 12, 13, 14, 15, and the Unit Test. Lesson 8 taught me how to use special selectors like :first-child, that select only the first tag of that kind within another tag. Lesson 9 taught me about visibility CSS atrributes and how to hide certain HTML elements. Lesson 10 taught me how to read documentation of HTML and CSS, which is like the guide book to the coding language. It contains all of the tags, attributes, etc. of the specific languages. Lesson 11 taught me how to use the inspector, which is a tool used by right-clicking anywhere on a page to open up the HTML and CSS coding of that page. You can use it to test what small changes would do without altering the actual code, and you can use it to see how other coders formatted their code to work the same way. Lesson 12 taught me about the box model, which is a model that includes the padding, border, and margin of table data, an image, etc. and taught me how to format it using CSS. Lesson 13 taught me how to use tha CSS filter attribute for images. It taught me how to use multiple filters like grayscale, saturation, hue-rotation, invert, etc. Lesson 14 taught me briefly about animations and how to apply them to images and other HTML tags/attributes using CSS. Lesson 15 taught me even more about the interaction I can add to my website using CSS psuedo-elements like :hover. It also showed me how to play animations using the interactive elements. On the Unit Test, I scored a 14/15. I missed a question asking how to code a CSS rule that selects all elements within divs that have the class “footer”.

Lessons 3, 4, 5, 6, and 7 of “Advanced HTML and CSS”

Today I finished lessons 3, 4, 5, 6, and 7 of Advanced HTML and CSS. Lesson 3 taught me how to embed websites, which means to create a smaller window on my page that shows a preview of another website. Lesson 4 taught me how to use the tag <div> to style my websites. Lesson 5 taught me how to use the tag <span> which is the exact same as the <div> tag, except it doesn’t create any extra line breaks. Lesson 6 taught me how to combine CSS selectors. For example: I could put h1.header instead of .header to only affect <h1> tags with the class header instead of all h1 tags or all tags with the class header.  Lesson 7 taught me about the DRY method, which helps keep your code (especially your CSS code) compact by aloowing you to merge multiple rules together with commas.

Lessons 4, 5, and Unit Test of “CSS – Styling Websites”, “Project:Create Your Own Homepage”, and the first 2 lessons of “Advanced HTML and CSS”

Today, I finished lessons 4 and 5 of CSS -Styling Websites and completed its Unit Test.  I also completed Project: Create Your Own Homepage  and completed the first two lessons of Advanced HTML and CSS. Lesson #4 taught me how to use id’s to style a website, and lesson #5 taught me how CSS decides which style to use when multiple styles are overlapping. On the Create Your Own Homepage project, codeHS gave me my own domain to put a homepage on.  The first two lessons of Advanced HTML and CSS taught me how to set up multi-filed websites, and how to link the pages together using the <a> tag.

First 3 Lessons of “CSS – Styling Websites”

Today I completed the first three lessons of  the “CSS – Styling Websites” course. I completed “Introduction to CSS”,  “CSS Select by Tag”, and “CSS Select by Class”, where I learned the basic structure of CSS, how to add styles to tags by selecting tags, and I learned how to add classes then style them by classes with CSS. CSS works within a tag called <style> that goes inside the <head> tag. CSS has a different format than HTML. It starts with the selector (a tag or .class) then, within curly brackets { }, it has the different styles, divided by colons and semi-colons. Example:



Lessons 9 and 10, + Unit Test of “HTML – Structuring Websites”

Today I completed lessons 9 and 10, and took the Unit test. Lesson 9 taught me about html styling and taught me how to add color to my backgrounds and text, and also format the text size in measurements of pixels. Lesson 10 taught me about colors specifically, and taught me how to add colors using hex decimals (#00FFFF) and how to add colors using rgb(255,128,20);. After taking both those lessons, I took the Unit test which quizzed me on all the lessons I have completed so far. I scored a 9/9, 100%!

Lessons 7 and 8 of “HTML – Structuring Websites”

Today, I finished both lessons 7 and 8 on CodeHS, and learned how to code lists and tables. A list must start with a <ul> tag or a <ol> tag for “unordered list” and “ordered list”. Each list item must be within a <li> tag. A table must start with a <table> tag and have a <tr> tag within for every row of the table. Within each <tr> tag, you can put a <th> tag for “table headers”. You can also put in a border attribute inside the table tag to specify how thick the border is.