20 Developer Portfolios for Inspiration 🤩

Jatin Rao — Sat, 01 Aug 2020 19:20:10 +0000

Hey Awesome!

If you're looking for some inspiration for your next website and level up your creativity. Don't Worry, I have got you covered with my favorite 20 developer portfolios which will blow your mind 😉.

1 - Brittany Chiang

It's my favorite website as It's color scheme and the flow on mobile is so pleasant to use. It's also open-sourced on GitHub & no wonder also got 1700 stars ⭐

Closing Thoughts

If you're looking how to build great developer portfolios, I highly recommend checking out this awesome article by @emmabostian

How To Build A Great Technical Portfolio

Emma Bostian ✨ ・ Jan 9 '19

#career

I hope you've been able to find a bit of inspiration from the handpicked portfolios above.

If you got any other portfolios or websites by individual developers?

Beginners Guide to HTML

Jatin Rao — Wed, 22 Jul 2020 11:01:03 +0000

What is HTML?

HTML is one of the most widely used languages on the web to develop web pages.

HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages.

HTML is a markup language i.e., it is a way for the computers to communicate with each other, to control how text is processed and presented. A website will be opened on various systems with different browsers and the markup language ensures that the website looks the same in all the systems with the help of its various tags.

History of HTML

HTML is a markup language that is used by the browser to manipulate text, images, and other content to display it in the required format. HTML was created by Tim Berners-Lee in 1991.

HTML VERSIONS	YEAR
HTML 1	1993
HTML 2	1995
HTML 3	January 1997
HTML 4	December 1997
HTML 5	2014

HTML Structure

HTML tags have two main types: block-level and inline tags.

Block-level elements take up the full available space and always start a new line in the document. Headings and paragraphs are an example of block-level elements.

Inline elements only take up as much space as they need and don’t start a new line on the page. They usually serve to format the inner contents of block-level elements. Images and links are an example of inline elements.

The three block-level tags that you need for your HTML document are <html>, <head>, and <body>.

The <html></html> tag is the highest level element that encloses all the code.
The <head></head> tag holds meta information such as the page’s title, charset, metadata, etc. All the HTML elements that can be used inside the
element are: <style>, <title>, <base>, <noscript>, <script> and <meta>.
The <body></body> tag encloses all the content that appears on the page. It is used to enclose all the data which a web page has from texts to links. All of the content that you see rendered in the browser is contained within this element.

How does HTML work?

HTML documents end with the .html or .htm extension. You can view it using any web browser. The browser reads the HTML file and renders the content for users to view it.

Each HTML page consists of a set of tags or elements which are known as the building blocks of web pages. They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.

Fundamentals of HTML

To build a webpage with HTML, you need to know about some of the basics of HTML such as:

Elements vs Tags

HTML uses predefined tags and elements which tell the browser about content display property. If a tag is not closed then the browser applies that effect till the end of page.

Elements have a starting tag, some content, and a closing tag.

In this case, we use the p starting and closing tags to create a paragraph element.

<p>A paragraph of text</p>

Attributes

The starting tag of an element can have special snippets of information we can attach, called attributes.

Attributes have the key="value" syntax:

<p class="a-class">Some Text</p>

We can have multiple of them:

<p class="a-class" id="an-id">Some More Text</p>

The class and id attributes are two of the most common you will find used.

Headings

HTML headings are defined with <h1> to <h6> tags.

<h1> defines the most important heading whereas <h6> defines the least important heading:

<h1>First Heading</h1>
<h2>Second Headng</h2>
<h3>Third Heading</h3>
<h4>Fourth Heading</h4>
<h5>Fifth Heading</h5>
<h6>Sixth Heading</h6>

Paragraphs

HTML paragraphs are defined with <p> tags. You can add as many paragraphs as you want with this tag.

<p>First Paragraph</p>

Links

HTML links are hyperlinks. You can click on a link and redirect to another document or webpage. Links are defined with <a> tags:

<a href="https://jatinrao.dev/">Jatin's Blog</a>

Images

Images are required to beautify or depict complex concepts in simple ways on your web page. HTML images are defined with <img> tags.

The source file (src), alternative text (alt), width, and height are provided as attributes:

<img src="girl_image.jpg" alt="Girl in a Jacket">

Lists

HTML provides three ways to specify lists of information. All lists must contain one or more list elements.

<ul>: Unordered list sorts items using plain bullets.
<ol>: Ordered list uses different schemes of numbers to list your items.
<dl>: A definition list arranges your items in the same way as they are arranged in a dictionary.

Unordered List

This list is created by using HTML <ul> tag:

<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>

Ordered List

This list is created by using <ol> tag:

<ol>
<li>Coffee</li>
<li>Juice</li>
<li>Tea</li>
</ol>

Definition List

The definition list is the ideal way to present a glossary, list of terms, or other name/value list. It is created by using <dl> , <dt> and <dd> tags:

<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>

Tables

An HTML table is defined with a <table> tag.

Rows are defined with <tr> tags.
Headers are defined with <th> tags
Table Cells are defined with <td> tags.

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Jatin</td>
        <td>15</td>
    </tr>
    <tr>
        <td>James</td>
        <td>25</td>
    </tr>
</table>

White space

In HTML, even if you add multiple white spaces into a line, it’s collapsed by the browser’s CSS engine.

<p>Some Text</p>

is the same as this:

<p>        Some Text</p>

DEV Community: Jatin Rao

20 Developer Portfolios for Inspiration 🤩

1 - Brittany Chiang

2 - Lynn Fisher

3 - Jacek Jeznach

4 - Swyx's Site

5 - Robby Leonardi

6 - Joshua Comeau

7- Max Böck 🦞

8 - Jason Lengstorf

9 - Bruno Simon

10 - Jack McDade

11 - Barbarian Meets Coding

12 - Robb Owen

13 - Cassie Evans

14 - Steve Gardner

15 - Wes Bos

16 - Fajar Siddiq

17 - Monica Powell

18 - Ryan Warner

19 - Lee Robinson

20 - Nadia Sotnikova