Layout with Flexbox Part 1 & The Ringer Project Card 1- Week 9

Unfortunately, I didn’t really understand the directions about the flexbox html/css on this problem set. I didn’t understand the transferring of CSS.

The main axis has 4 values : row, row reverse, column, and column reverse

The cross axis runs perpendicular.

Using a div.card as a flex container affects the other div’s by allowing them to be organized and follow any CSS that is under their label.

Blog Link

Blog post week[1-9]

Week 1:

Describe the importance of the HTML “Boilerplate.” What are it’s main parts? And what are they used for?

The HTML boilerplate basically structures the document.The main parts of it are the title, head and body.The Title is used to determine the heading of the page,the head is used to define the properties of the webpage and the body is the content. 

What’s the importance of naming an HTML file index.html?

This allows the computer to detect that the file is an HTML.

Week 2:

  • Create a screenshot of the form and a link to the form. Include both in your post.
<label for="username">Username:</label>
<input id="username" type="text">
<label for="password">Password: </label>
<input id="password" type="password">

Week 3:

Describe the difference between inline, internal, and external CSS. Give an example of how each works in a code snippet using the Enlighter tool. Describe the order of specificity for an element selector vs. a class selector vs. an id selector.

Inline CSS is used when you are styling specific elements, internal css can only be used if the html page only needs a specific css and external css you can change the entire site with a file that caters to the HTML code.

Week 4:

Describe your understanding of the box model. What’s the difference between margin and padding? How do borders work? How does the content box work? 

The box model is basically a margin that wraps around all HTML elements and it consists of margins, borders, padding, and the actual content.The Margin is a clear area on the border of the page while the padding is a clear area around the content.The content box is where the text and images appear and is usually the main focus of the page.The margins and padding are transparent.

Week 5: No post.

Week 6: No post.

Describe the CSS property transform and its relationship to the property transition. How are these used together to create a CSS animation? Give an example in a CSS code snippet to illustrate your description.

The CSS property transform is used to rotate, scale, move and skew elements.The transition property smoothly moves the elements along with the transform property.

input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
div.c {
  transform: scaleY(1.5);

Week 7: No post.

Week 8 : No Post.

Week 9:

Describe the two flex container properties for affecting the position of flex items along the main axis and the cross axis. What are these two properties and what are some of the values that can be used?
The two flex container properties that affect position of flex are grow and shrink which applies to the size of the flex element.The main axis has 4 values row, row reverse, column, and column reverse.

Link to directory

Template & Presentation

I have definitely figured out that I am a better a developer, on my own, compared to a designer. I didn’t realize how much Mike helps with design until now.
Here is a site that I was inspired by, but knowing my design skills I decided to keep it simple. I am obsessed with a hero image being the forefront of a website, it just immediately intrigues the viewer and makes them want to scroll down to see more.
Here is the link to my presentation to see more of where I wanted to go with my template.
The major components I would like to build are a hero image, buttons and maybe a gallery.
My generic and elements page.
*I may not have uploaded them properly, but I’m sure I did. The CSS files seems to not be linked to the HTML files, but you can check my files by opening them on a separate Code Live Server. I checked multiple times and it works on and off.

Enjoy y’all ! Stay safe!

Intermediate HTML – Week 2

During this week I used the form exercise he used in the video but I felt like it resembled the Facebook sign up page. The for uses check boxes, text boxes, date forms, and submit buttons.

Blog Links: