You Lied On Your Resume

Admit it…you lied. I bet you thought you’d get away with it too. You don’t really know HTML or CSS, do you?

So why’d you do it? You probably thought, “HTML and CSS are child’s play. Everybody knows them. Besides, no one will ask me about them in an interview. Isn’t it just a foregone conclusion that if you know how to program that you also know HTML and CSS?”

Nope!

Just because you know how to program does not mean you can claim proficiency in HTML and CSS. In fact, just drop it from your resume.

We believe that there are only two reasons to add them to your resume:

  1. You actually know HTML and CSS and you are applying for a position that specifically requires them or…
  2. You actually know HTML and CSS and you feel like your resume will be tossed if they are not included.

Remember, whatever skills you claim on your resume are fair game in phone screens and interviews. The following is what we at {Senior Skills} consider a basic working knowledge of HTML and CSS.

HTML

Document structure

Know the purpose and how to use each of the following:

The <!DOCTYPE> declaration is not an HTML tag. It tells the browser what version of HTML is used by the document. The browser uses this information to know how to render the page. It must be the first thing in the file.

The <html> tag encloses the entire document.

The <head> tag can contain, among other things, metadata about your document, styles, scripts, and links.

The <body> tag contains the content of the document. It can also contain scripts.

You should know how adding <script> tags to the <head> or <body> tags affects the way the document is loaded.

inline- and block-level elements

Inline- and block-level elements are fundamental knowledge in HTML. This is one of the most overlooked concepts by casual HTML users and is likely to cause most of your frustration.

HTML renders elements in what is called normal flow.

In normal flow, block-level elements, take up the entire width of the document. Block-level elements don’t allow other elements to be next to them. This is true even if you constrain the width of the element using CSS.

Inline-level elements only take up as much width as their content and other inline elements may sit next to them in a line. It is not possible to give dimensionality (height and width) to an inline element, even with CSS. Inline-level elements only respect the size of their content.

Most HTML elements are either block- (ex: <div> and <p>) or inline-level (ex: <span> and <a>) elements by default. It’s helpful to learn the default behavior for each HTML tag.

inline-block elements

When you want to display elements next to each other, but also give them dimensionality, you can use inline-block. But be careful - inline-block elements a common source of frustration. You need to know how whitespace in your document affects the layout of inline-block elements and how to use vertical-align.

<div> vs <span>

This one isn’t too complicated, but you need to know how to choose between the two. Hint: it has to do with their default layouts.

Semantic markup

Elements like <div> and <span> are called presentational elements. They differ from semantic elements. Semantic elements define meaning for their contents. <nav> elements define navigational content. <ul> elements define unordered lists. <p> elements define paragraphs of text. Presentational elements don’t tell us anything about the content. They simply tell the browser how to layout the content.

Semantic markup isn’t a requirement of HTML, but using it can offer major benefits for users with disabilities and web crawlers. Remember that web crawlers like Google help users find your content.

forms

Forms are a complicated sub-system of HTML. There is too much information about forms to cover in a single post. Modern web development tools circumvent many aspects of HTML forms with XHR requests. Regardless, forms can be used together with XHR requests and are still important to know.

CSS

display

The display rule controls the display property of the element. Use this to override the default display property. There are a lot of display types but the ones you’ll use the most are block, inline, inline-block, flex, and grid.

Box model

The box model represents the dimensions, padding, border, and margin of an element. You should know when to use padding vs margin and how to define borders. You should know when to use outline and negative margins.

Modern browsers support the box-sizing rule. It can be used to alter how dimensions are calculated by the browser.

Positioning

Default positioning of elements in flow can be overridden using the position rule. Every elements’ default position is static. Understand, the difference between absolute and fixed positioning as well as how relative positioning affects absolute positioning.

When position is set to something other than static, you have access to the top, left, right, and bottom rules which allow for precise control of the position.

Units

CSS units come in many varieties, but the most commonly used are px, %, em, vh, vw, and rem. The value of em and rem may not be immediately obvious, but once they’re understood they are very powerful.

Colors

Colors can be defined in many ways. Browsers define color constants like red, blue, gray, and transparent. You can also use RGB hex codes, rgb(), hsl(), and gradients. For added control over color and transparency, don’t forget about the opacity rule.

Selectors

There are a lot of selectors to learn and they’ll likely all take some practice to master. Know when to use inline styles (styles declared in the style attribute of HTML elements). Know what each of the following selectors does:

* {}
p {}
#element-id {}
.class-name {}
p.class-name {}
p.other-class {}
.class-name, .other-class {}
p .other-class {}
p > .other-class {}
.class-name + .class-name {}
.class-name ~ .class-name {}
[type="password"] {}
:hover {}
::before {}
Selector Precedence

One of the most frustrating experiences for new users of CSS is trying to figure out why your selector is not being applied. Understanding style precedence can alleviate most of these frustrations. Remember, where and when you apply styles affects precedence as well as which selectors are used.

Flexbox

For years web developers have wrestled with combinations of inline-block, float, absolute positioning, and prayer to build layouts. The modern Web doesn’t ask so much of its developers. In fact, CSS Flexbox adds simplicity and pleasure to building page layouts.

Media Queries and Responsiveness

Web browsers come in infinite shapes and sizes. CSS allows us to apply style selectively based on properties of the browser, like width or height. You should know the meaning of the word “responsive” and you should know how to use CSS to achieve responsiveness.

Responsiveness is generally achieved through media queries. CSS media queries are powerful but most of that power is as simple as

.class-name { width: 100%; }

@media screen and (min-width: 768px) {
    .class-name { width: 50%; }
}
Debugging

All major browsers provide rich toolsets for debugging your web applications. You need to be able to use them to identify and fix issues with CSS. These tools can help you identify bugs with your selectors, toggle element states, and write rules.

User-agent Stylesheets

There’s not much about user-agent stylesheets that you actually need to know, just that they exist. These stylesheets define the default styles for elements in specific browsers. Tools like CSS reset and normalizr exist to give your application a single set of default element styles.

Preprocessors (Sass, LESS)

While not a hard requirement, CSS preprocessors are important to learn when you want to take your CSS to the next level. CSS preprocessors give developers tools that have been omitted from CSS such as variables, class inheritance, functions and more. Preprocessors do a lot to simplify writing CSS and maintain large projects.

Conclusion

Not as simple as you thought? Don’t worry, now that you know what you didn’t know, you can take steps toward learning these skills.