Web Developer Roadmap [Beginner]

  1. What is HTML? Write the basic structure of a HTML document.
Basic HTML structure
Basic HTML structure
Document Object Model Representation
iu (1128×522) (duckduckgo.com)
  • Content
  • Padding: amount of space between the content area and the border.
  • Border: thickness and style of the border surrounding the content area and padding.
  • Margin: amount of space between the border and the outside edge of the element.
  • Width: width of the content area.
  • Height: height of the content area.
iu (1626×700) (duckduckgo.com)
Element to change
Original photo
Removed “clearfix” class
Element to change
Changed element
  • Static: positioned according to the normal flow of the document. Static is the default position of elements. Static positioned elements are not affected by the top, bottom, left, and right properties.
  • Relative: positioned according to its normal position. Relative position has access to top, right, bottom and left properties. The element is position according to the normal flow of the document and then you can offset it relative to itself based on the properties it now has access to.
  • Fixed: positioned relative to the viewport, meaning it will always stay there. Hence its name. It has access to top, right, bottom and left properties. Note that this position removes the element from the normal document flow, therefore no space is allocated for this element in the page layout.
  • Absolute: positioned relative to the nearest positioned ancestor (any position except static), if there is no positioned ancestor, it will take the document body as such. It has access to top, right, bottom and left properties. Note that this position removes the element from the normal document flow, therefore no space is allocated for this element in the page layout.
  • Sticky: it is a mix between “relative” and “fixed” position. It has access to top, right, bottom and left properties. The element is positioned according to the normal flow of the document. Note that in order to work you have to specify at least one value for top, right, bottom or left and its ancestor has to have a “scrolling mechanism”.
  • None: element will not be displayed at all. It has no effect on the layout.
  • Inline: displays an element as an inline element. Meaning it takes the minimum space the content required and does not cause a line break. Keep in mind you can not change height and width of an inline element.
  • Block: displays an element as a block-level element. Meaning it starts in a new line and it will take up the total width available.
  • Inline-block: it will display the element as an inline element, with the difference that you have accessed to its height and width properties.
  • Flex: displays an element as a block-level flex container. This is a whole other topic. This is an excellent website to learn flexbox.
Data types in javasript
Data types in javasript
Basic javascript operators
Basic javascript operators
List of falsy values
List of falsy values
List of truthy values
List of truthy values
For loop example in javascript
For loop example in javascript
For of loop example in javascript
For of loop example in javascript
While loop example in javascript
While loop example in javascript
For in loop example in javascript
For in loop example in javascript
For in loop example in javascript
For in loop example in javascript
iu (428×230) (duckduckgo.com)
GET /home.html HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/testpage.html
Connection: keep-alive
Upgrade-Insecure-Requests: 1
If-Modified-Since: Mon, 18 Jul 2016 02:36:04 GMT
If-None-Match: "c561c68d0ba92bbeb8b0fff2a9199f722e3a621a"
Cache-Control: max-age=0
200 OK
Access-Control-Allow-Origin: *
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Mon, 18 Jul 2016 16:06:00 GMT
Etag: "c561c68d0ba92bbeb8b0f612a9199f722e3a621a"
Keep-Alive: timeout=5, max=997
Last-Modified: Mon, 18 Jul 2016 02:36:04 GMT
Server: Apache
Set-Cookie: mykey=myvalue; expires=Mon, 17-Jul-2017 16:06:00 GMT; Max-Age=31449600; Path=/; secure
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding
X-Backend-Server: developer2.webapp.scl3.mozilla.com
X-Cache-Info: not cacheable; meta data too large
X-kuma-revision: 1085259
x-frame-options: DENY
Map method example in javascript
Map method example in javascript
Reduce method example in javascript
Reduce method example in javascript
Filter method example in javascript
Filter method example in javascript
Find method example in javascript
Find method example in javascript
  • Platform-independent, language-independent.
  • Stateless operations.
  • Simpler to develop.
  • Separating concerns between the Client and Server helps improve portability.
iu (474×190) (duckduckgo.com)
Basic HTTP methods
Basic HTTP methods
Response Codes from server
Response Codes from server
  • em: relative to the parent element. Use em units for sizing that should scale depending on the font size of an element other than the root.
  • rem: relative to the root element (HTML tag). Use rem units for sizing that doesn’t need em units, and that should scale depending on browser font size settings. If in doubt, use rem. For media queries use rem.
  • px: a unit of length which roughly corresponds to the width or height of a single dot that the human eye can comfortably see without strain, but is otherwise as small as possible. It is an absolute measure, but not consistent. Use px units if you need to ensure that an element never resizes at any breakpoint and remains the same regardless of whether a user has chosen a different default size.
  • %: relative to the parent element. Use for multi-column layout widths. Use for margin and paddings.
  • vw: viewport units represent a percentage of the current browser viewport, in this case, the width viewport. Although, similar to % units, viewport units are calculated as a percentage of the browser’s current viewport size. Use for creating full width elements (100%) that fill up the entire viewport’s width.
  • vh: viewport units represent a percentage of the current browser viewport, in this case, the height viewport. Although, similar to % units, viewport units are calculated as a percentage of the browser’s current viewport size. Use for creating full height elements (100%) that fill up the entire viewport’s height.
let countDown = number => {
//base case
if (number === 0) {
return;
}
console.log(number);
return countDown(number - 1);
};
console.log(countDown(5)) // 5, 4, 3, 2, 1
Callback function example in javascript
Callback function example in javascript

Final Thoughts

I hope you got something out of this. I really encourage you to keep learning new things and to really understand the fundamentals of whatever you want to learn.

Resources

A Complete Guide to Flexbox | CSS-Tricks

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store