Recent Comments
No comments to show.
Tag Archives: section 3
Developer Skill #2: Debugging and Asking Questions
One of the most common mistakes made by programmers is forgetting to close a HTML element. SO, what do you do? Well, you look to see when the problem first starts. If your whole document is bold, then you can … Continue reading
Posted in Web Developer Course
Tagged css, debugging, difference, html, mistake, section 3, tool, validator
Leave a comment
Developer Skill #1: Googling and Reading Documentation
Developers never know everything, they just know when something exists, and also know how to look it up. For example, say you wanted to find out how to search for the cursor that changes to a hand when you hover … Continue reading
Posted in Web Developer Course
Tagged button, center, css, google, reading documentation, section 3
Leave a comment
Pseudo-elements
Tip: Pseudo-classes are with one colon. Pseudo-elements are written with two colons. By default, any pseudo-element is an inline element. Example to un-italicize and give some space to a book emoji in a h1 element: h1::first-letter { font-style: normal; margin-right: … Continue reading
Posted in Web Developer Course
Tagged absolute, after, before, content, css, pseudo-element, relative, section 3, selector
Leave a comment
CSS Theory #5: Absolute Positioning
To get a button to be always at the bottom right side of your page you need to: (example of a button) button { font-size: 22px; padding: 20px; cursor: pointer; position: absolute; bottom: 50px; right: 50px; } (And also change … Continue reading
Posted in Web Developer Course
Tagged absolute, button, css, position, section 3, theory
Leave a comment
CSS Theory #4: Types of Boxes
Inline Elements: only occupy the amount of space they need for its content and nothing more. They can be side by side with one another. Occupies only the space necessary for its content. Causes no line-breaks after or before the … Continue reading
Posted in Web Developer Course
Tagged block, box model, css, inline, section 3, theory
Leave a comment
Section 3, Challenge #2
Using our Converse Shoes code, time to practice the things that we have learned. Resetting the universal selector to zero. Use width to give a desired product width. Use margin: 50px auto; to center your page and give some space … Continue reading
Centering our Page
Steps to center a page: have or make a container and give it a width. HTML CSS <div class=”container”> .container { width: 800px;} </div> set margin-left and right to auto, so that the width is automatically placed and there will … Continue reading
Adding Dimensions
To make a sidebar you can add a width: width: 500px; If you have an image, for example, you can use a percentage. 100%, would be 100 percent of the parent container (i.e. computer screen, tablet screen, or phone screen). … Continue reading
Margins and Paddings
Padding shorthand in CSS: Four values: starts at the top, then right side, bottom, then left side. Three values: first number is top, second number is right and left, third number is bottom. Two values: first number is the value … Continue reading
CSS Theory #3: The CSS Box Model
Default behavior calculation: Final element width = left border + left padding + width + right padding + right border Final element height = top border + top padding + height + bottom padding + bottom border Margin = empty … Continue reading