What I learned while preparing for the Microsoft 70-480 exam

November 29, 2018 2 Comments

I did my first Microsoft certification exam ever and I passed 70-480 last Sunday! Yeah I know, I should have done this long time ago. Although I have prepared myself for Microsoft certification exams before this, I never attend for any as I hate sitting for an exam.

Microsoft 70-480 Programming in HTML5 with JavaScript & CSS3

Why 70-480

I am using C# for most of my working life. As time passes, I moved to full stack developer. I am using Javascript, HTML, and CSS in my daily work. I thought instead of preparing for Exam 70-483: Programming in C#, preparing for 70-480 would help to learn more. And it turns out there are many things I was missing.

Overview

This is not an exam guide. If you are looking for a brief guide you can check the post A Brief Guide On How to Pass the 70-480 Certification Exam from Jaime González García. To know the syllabus you can check here. Over here, I will just add some interesting stuff that I learned. You may consider this as an overview of the exam.

I will divide my learning into three areas,

  1. CSS3
  2. HTML5 (you can find it here)
  3. Javascipt (you can find it here)

Today I am posting only CSS3

CSS3

  1. External CSS is added by link.
    • Link has a property media -> that can specify the target device.
    • Property media setting overrides the @charset setting in the CSS file
    • @import rules must be at the top of your style sheet, before any other content except the @charset rule. If you even have a comment above the @import rules, they will not work properly.
  2. The first argument to the transition property is the name of the property to be changed (PDTD – Property Duration Timing-fashion Delay)
  3. The flex container properties are:
  1. The flex item properties are:
  1. CSS box model – margin area is always transparent
  2. Container display : grid/inline-grid
    • grid-gap, grid-column-gap, grid-row-gap:
    • grid-template-columns:
    • grid-template-rows
    • grid-template-areas
    • justify-content:
    • align-content
  3. Grid Item
    • order
    • grid-column
    • grid-row
    • grid-area

CSS Position

– Static relative absolute fixed sticky
Default Y – – – –
TRLB N Y Y Y Y
z-index N Y Y Y Y
Page Flow Y Y N N Y
Relative To doc N Y
Scrolling – – – – Y

TRLB – Top Right Left Bottom positions

  1. Using the fixed position The element position is calculated much like it is with absolute positioning, but this is always in relation to the browser window.
  2. Using the absolute position The element is removed from the HTML flow and positioned within the first non-static element. If all parent elements are static (the default), then the element is positioned within the browser window.
  3. Regardless of where on the page, Next Button exists finish button is placed 50 pixel right of the Next button {position: relative; left: 50}

CSS Selectors

  1. avoid using the universal selector * because of the performance cost
  2. using descendant selectors can cause performance problems due to the amount of searching required.
  3. child selectors li > a
  4. To access information that is either outside the DOM tree or difficult to access in the DOM tree, you can use pseudo classes and pseudo elements.
  5. Pseudo-classes classify elements based on something other than name, attributes, or content and, usually, something that cannot be deduced from the DOM tree. Exceptions to the rule are :first-child and :lang(), which can be deduced from the DOM tree.
  6. Order of link’s pseudo-classes: Louis Vuitton For Hells Angels – :link :visited :focus :hover :active
    • a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!
    • a:active MUST come after a:hover in the CSS definition in order to be effective!
  7. You can provide alternate style rules to validation elements by implementing style rules on the :valid, :invalid, :required, and :optional pseudo classes.
  8. :nth-child
    • Is one-based, not zero-based
    • You can provide a formula based on an + b when a is cycle count and n is a counter variable, and b represents the element within the cycle that you want to select. For example, li:nthchild(10n + 3) selects the third element of every 10 elements, so if a <ul> element contains 45 <li> elements, elements 3, 13, 23, 33, and 43 will be selected.
    • You can also use the keywords odd and even
  9. nth-of-type is also one based
  10. pseudo elements
    • :first-line
    • ::before
    • ::after
  11. Sibling Selectors div + h1 selects the <h1> element that immediately follows a <div> element.
  12. The tilde (~) character denotes the sibling selector. For example, div ~ h1 selects all <h1> elements that follow a <div> element
    • This excludes the first child
  13. An attribute selector selects elements based on the existence of the specified attribute. For example, a[title] selects all hyperlinks whose title attribute is defined.
  14. The attribute contains value selector selects all elements that contain the specified attribute value within the specified attribute.
    • To specify the attribute contains value selector, add an asterisk (*) suffix to the attribute name.
a[href*='contoso.com']:hover { background-color: yellow; }
  • To specify the attribute value starts with a selector, add a caret (^) suffix to the attribute name.
  • To specify the attribute value ends with a selector, add a dollar sign ($) suffix to the attribute name.
  • An attribute contains a value in list selector selects all elements whose specified attribute contains the specified value when the attribute has a space-delimited list of values and there is a match to one of the values.
a[data-linktype ~='externalLink'] { background-color: yellow; }

CSS Colors

  1. The color value of an anchor (a) link is usually not inherited from the parent element
  2. Rgba: the alpha component can be a number between 0 and 1
  3. Colour rgb() – If the integer value is above or below the valid 0–255 range, the value is automatically interpreted as the minimum or maximum value.
  4. hue-saturation-lightness (HSL) colors
    • The hue is calculated as an angle of the color circle where red is 0 or 360 (degrees), and other colors are spread around the circle
      1. Red 0 or 360
      2. Yellow 60
      3. Lime green 120
      4. Blue 240
  • The saturation and lightness values are represented in percentages.
  • Saturation is the amount of color to provide, and lightness is the amount of lightning to provide.

CSS Font

  1. Serif and sans serif font families have characters of proportional width, meaning that characters have different widths, unlike the monospaced font families.
  2. @font-face Firefox, Chrome, Safari, and Opera support True Type Files (.ttf) files, IE supports .eot
  3. Font Families
    1. Font families that have curls at the top and bottom of characters belong to the serif font family group.
    2. Font families that don’t have curls belong to the sans serif font family group.
    3. Font families whose characters are all the same width belong to the mono-spaced font family group.
    4. Font families that imitate handwriting belong to the cursive font family group.
    5. Font families that are decorative belong to the fantasy font family group.

CSS Unit

  1. The following is a list of the available measurement units.
    • remis only relative to the HTML (root) font-size
    • em A relative measurement multiplier of the parent element’s computed font size
    • pc An absolute measurement pica unit, 12 points per pica – 6 pica per inch
    • pt An absolute measurement point unit – 72 points per inch
    • px An absolute measurement pixel unit – 96 pixels per inch
    • in An absolute measurement inch unit – 2.54cm
    • cm An absolute measurement centimeter unit – 10mm
    • mm An absolute measurement millimeter unit
    • There is also a set of absolute sizes whose size is controlled by the browser, but the recommended size is 1.2 em from the previous size. These sizes are xx-small, x-small, small, medium, large, x-large, and xx-large.
  2. The following example sets the top and bottom to 5 pixels and the left and right to 15 pixels.
padding: 5px 15px;

If the padding property has two values:

padding: 25px 0 25px;

top and bottom paddings are 25px, right and left paddings are 0px

 CSS Properties

  1. The clear property instructs the browser to place the clear element after the floating elements
  2. change the way the browser calculates the width by setting the box-sizing property
    • content-box The default setting; calculates the width based on the content width only.
    • padding-box Calculates the width based on the padding and content width.
    • border-box Calculates the width based on the border, padding, and content width.
  3. you can add the following style rule to center the container’s contents. The width must be set, or the centering will not work.
#container { width: 600px; margin-left: auto; margin-right: auto; }

Helpful links

Follow up

I’ll post about HTML5 and Javascript on the following two posts. Please subscribe to the newsletter. And also don’t forget to add your valuable feedback. I am looking forward to your comments. Next up HTML5

2 thoughts on “What I learned while preparing for the Microsoft 70-480 exam”

  2. Hello, Jack speaking. I’ve bookmarked your site and make it a habit to check in daily. The information is top-notch, and I appreciate your efforts.

    Reply

I would like to hear your thoughts