{"tag":{"id":"56744721958ef13879b94b21","name":"CSS3","logo":"https://cdn.hashnode.com/res/hashnode/image/upload/v1513316988840/r1Htz1Wzz.png","slug":"css3","tagline":"CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1.","__typename":"Tag"},"publication":{"__typename":"Publication","id":"62792a88076291997b7652fc","url":"https://rembertdesigns.hashnode.dev","canonicalURL":"https://rembertdesigns.hashnode.dev","urlPattern":"SIMPLE","title":"Richard Rembert","displayTitle":"Rembert Designs Blog | Helping Web Developers And Designers with Resources","hasBadges":true,"descriptionSEO":"Learn Web Design & Development with Rembert Designs blogs, tutorials, and examples - Full Stack Web Development and Responsive Web Design.","publicMembers":{"totalDocuments":1,"__typename":"PublicationMemberConnection"},"about":{"html":"

Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js.

\n","text":"Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js.\n","__typename":"Content"},"features":{"proTeam":{"isEnabled":false,"__typename":"ProTeamFeature"},"newsletter":{"isEnabled":true,"__typename":"NewsletterFeature"},"viewCount":{"isEnabled":false,"__typename":"ViewCountFeature"},"readTime":{"isEnabled":true,"__typename":"ReadTimeFeature"},"textSelectionSharer":{"isEnabled":true,"__typename":"TextSelectionSharerFeature"},"customCSS":{"isEnabled":true,"published":{"__typename":"CustomCSS","homeMinified":".blog-header{margin:0 10rem 0 10rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}.blog-theme-switcher{display:none}.blog-title{font-size:2.5rem;display:flex;flex-direction:column}.blog-title:after{content:'Software Engineer | UX/UI Designer | Technical Writer | Content Creator';font-size:1rem;font-style:italic;font-weight:normal}.blog-nav-active{background:#000;color:#fff}.blog-nav-active:hover{color:#000}.blog-author-card{display:none}.blog-content-area{margin-top:3rem;margin-bottom:3rem}.blog-post-card-wrapper{padding:1.5rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff}.blog-post-card-title{font-size:1.5rem}.blog-post-card-brief{font-size:.8rem;font-style:italic}@media only screen and (max-width:850px){.blog-header{margin:0 3rem 0 3rem}}@media only screen and (max-width:570px){.blog-title{font-size:1.5rem}.blog-title:after{font-size:.8rem}.blog-sub-header-nav{font-size:10px}}","postMinified":".blog-header{margin:0 10rem 0 10rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}.blog-theme-switcher{display:none}.blog-title{font-size:2.5rem;display:flex;flex-direction:column}.blog-title:after{content:'Software Engineer | UX/UI Designer | Technical Writer | Content Creator';font-size:1rem;font-style:italic;font-weight:normal}.blog-nav-active{background:#000;color:#fff}.blog-nav-active:hover{color:#000}.blog-post-area{margin:3rem 0 3rem 0}.post-cover{border-radius:15px}.blog-content-main{padding:2rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff;margin-right:3rem;margin-left:3rem}.blog-similar-author-wrapper{display:none}.blog-similar-article-wrapper{border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff;margin:0 1rem 0 1rem}.blog-comments-section-wrapper{padding:1.5rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff;margin:0 1rem 0 1rem}@media only screen and (max-width:850px){.blog-header{margin:0 3rem 0 3rem}.blog-content-sidebar{margin-top:2rem}}@media only screen and (max-width:800px){.blog-content-main{margin:0 3rem 0 3rem}}@media only screen and (max-width:570px){.blog-title{font-size:1.5rem}.blog-title:after{font-size:.8rem}.blog-sub-header-nav{font-size:10px}}","staticMinified":".blog-header{margin:0 10rem 0 10rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}.blog-theme-switcher{display:none}.blog-title{font-size:2.5rem;display:flex;flex-direction:column}.blog-title:after{content:'Software Engineer | UX/UI Designer | Technical Writer | Content Creator';font-size:1rem;font-style:italic;font-weight:normal}.blog-nav-active{background:#000;color:#fff}.blog-nav-active:hover{color:#000}.blog-page-content{padding:1.5rem;background:#fff;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}@media only screen and (max-width:850px){.blog-header{margin:0 3rem 0 3rem}}@media only screen and (max-width:570px){.blog-title{font-size:1.5rem}.blog-title:after{font-size:.8rem}.blog-sub-header-nav{font-size:10px}}"},"draft":{"__typename":"CustomCSS","homeMinified":".blog-header{margin:0 10rem 0 10rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}.blog-theme-switcher{display:none}.blog-title{font-size:2.5rem;display:flex;flex-direction:column}.blog-title:after{content:'Software Engineer | UX/UI Designer | Technical Writer | Content Creator';font-size:1rem;font-style:italic;font-weight:normal}.blog-nav-active{background:#000;color:#fff}.blog-nav-active:hover{color:#000}.blog-author-card{display:none}.blog-content-area{margin-top:3rem;margin-bottom:3rem}.blog-post-card-wrapper{padding:1.5rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff}.blog-post-card-title{font-size:1.5rem}.blog-post-card-brief{font-size:.8rem;font-style:italic}@media only screen and (max-width:850px){.blog-header{margin:0 3rem 0 3rem}}@media only screen and (max-width:570px){.blog-title{font-size:1.5rem}.blog-title:after{font-size:.8rem}.blog-sub-header-nav{font-size:10px}}","postMinified":".blog-header{margin:0 10rem 0 10rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}.blog-theme-switcher{display:none}.blog-title{font-size:2.5rem;display:flex;flex-direction:column}.blog-title:after{content:'Software Engineer | UX/UI Designer | Technical Writer | Content Creator';font-size:1rem;font-style:italic;font-weight:normal}.blog-nav-active{background:#000;color:#fff}.blog-nav-active:hover{color:#000}.blog-post-area{margin:3rem 0 3rem 0}.post-cover{border-radius:15px}.blog-content-main{padding:2rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff;margin-right:3rem;margin-left:3rem}.blog-similar-author-wrapper{display:none}.blog-similar-article-wrapper{border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff;margin:0 1rem 0 1rem}.blog-comments-section-wrapper{padding:1.5rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000;background:#fff;margin:0 1rem 0 1rem}@media only screen and (max-width:850px){.blog-header{margin:0 3rem 0 3rem}.blog-content-sidebar{margin-top:2rem}}@media only screen and (max-width:800px){.blog-content-main{margin:0 3rem 0 3rem}}@media only screen and (max-width:570px){.blog-title{font-size:1.5rem}.blog-title:after{font-size:.8rem}.blog-sub-header-nav{font-size:10px}}","staticMinified":".blog-header{margin:0 10rem 0 10rem;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}.blog-theme-switcher{display:none}.blog-title{font-size:2.5rem;display:flex;flex-direction:column}.blog-title:after{content:'Software Engineer | UX/UI Designer | Technical Writer | Content Creator';font-size:1rem;font-style:italic;font-weight:normal}.blog-nav-active{background:#000;color:#fff}.blog-nav-active:hover{color:#000}.blog-page-content{padding:1.5rem;background:#fff;border:1px solid #000;border-radius:5px;box-shadow:10px 7px 0 #000}@media only screen and (max-width:850px){.blog-header{margin:0 3rem 0 3rem}}@media only screen and (max-width:570px){.blog-title{font-size:1.5rem}.blog-title:after{font-size:.8rem}.blog-sub-header-nav{font-size:10px}}"},"__typename":"CustomCSSFeature"},"gptBotCrawling":{"__typename":"GPTBotCrawlingFeature","isEnabled":false},"__typename":"PublicationFeatures"},"metaTags":"","ogMetaData":{"image":null,"__typename":"OpenGraphMetaData"},"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","name":"Richard Rembert","username":"rembertdesigns","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg"},"preferences":{"__typename":"Preferences","logo":null,"darkMode":{"__typename":"DarkModePreferences","logo":null,"enabled":null},"navbarItems":[{"__typename":"PublicationNavbarItem","id":"634459656d64be07a724ae59","label":"Support","url":"https://rembertdesigns.hashnode.dev/sponsor","type":"link","series":null,"page":null},{"__typename":"PublicationNavbarItem","id":"6344596a6d64be07a724ae62","label":"CSS","url":"https://rembertdesigns.hashnode.dev/series/css-tutorials","type":"series","series":{"__typename":"Series","id":"62d5f15c3060d03288d9b824"},"page":null},{"__typename":"PublicationNavbarItem","id":"634459706d64be07a724ae6b","label":"SASS","url":"https://rembertdesigns.hashnode.dev/series/sass-basics","type":"series","series":{"__typename":"Series","id":"63137e7f041b51e1712e2205"},"page":null},{"__typename":"PublicationNavbarItem","id":"63445976f943840715bd232f","label":"JavaScript","url":"https://rembertdesigns.hashnode.dev/series/javascript-series","type":"series","series":{"__typename":"Series","id":"62d70f693060d03288d9f087"},"page":null},{"__typename":"PublicationNavbarItem","id":"6344597cf943840715bd2338","label":"React","url":"https://rembertdesigns.hashnode.dev/series/react-basics","type":"series","series":{"__typename":"Series","id":"631e60753e8d6f3497ad7c31"},"page":null},{"__typename":"PublicationNavbarItem","id":"6342fe000961ceed80d09ac3","label":"Design","url":"https://rembertdesigns.hashnode.dev/series/web-design-basics","type":"series","series":{"__typename":"Series","id":"633a1f2afa20fa4bc8e5929c"},"page":null},{"__typename":"PublicationNavbarItem","id":"6342fe0d0961ceed80d09acb","label":"SEO","url":"https://rembertdesigns.hashnode.dev/series/seo-basics","type":"series","series":{"__typename":"Series","id":"6342fdaa250857e669efe656"},"page":null},{"__typename":"PublicationNavbarItem","id":"633f63ac6971ffceb981eebb","label":"Marketing","url":"https://rembertdesigns.hashnode.dev/series/digital-marketing","type":"series","series":{"__typename":"Series","id":"633f63716971ffceb981ee9f"},"page":null}],"enabledPages":{"__typename":"PagesPreferences","badges":false,"newsletter":true,"members":true},"layout":"stacked","disableFooterBranding":false,"isSubscriptionModalDisabled":false},"favicon":null,"headerColor":"","integrations":{"fbPixelID":"","fathomSiteID":"","fathomCustomDomainEnabled":null,"fathomCustomDomain":"","hotjarSiteID":"","matomoSiteID":null,"matomoURL":"","gaTrackingID":"","gTagManagerID":null,"plausibleAnalyticsEnabled":null,"wmPaymentPointer":"","koalaPublicKey":null,"msClarityID":null,"__typename":"PublicationIntegrations"},"imprintV2":null,"postsCount":{"totalDocuments":109,"__typename":"PublicationPostConnection"},"isTeam":true,"links":{"twitter":"https://twitter.com/RichardDRembert","instagram":"https://www.instagram.com/rembertdesignsco/","github":"https://github.com/rembertdesigns","website":"https://www.rembertdesigns.co/","hashnode":"https://hashnode.com/@rembertdesigns","youtube":"","dailydev":"","linkedin":"https://www.linkedin.com/in/rrembert/","mastodon":"","facebook":null,"bluesky":null,"__typename":"PublicationLinks"},"domainInfo":{"__typename":"DomainInfo","hashnodeSubdomain":"rembertdesigns","domain":null,"wwwPrefixedDomain":null},"redirectionRules":[],"totalRecommendedPublications":0,"sponsorship":{"content":{"html":"

Hi there! 👋🏾 Thanks for checking out this page. If it's ok with you, take a minute to read a little more.

I am Richard, a former sommelier turned Software Engineer based in NYC. I am passionate about knowledge sharing, collaboration, and connecting with like minded individuals.

From learning how to code from content creators before me, I decided to document & share my own thoughts and expertise about frontend/backend engineering.

The idea behind creating this collection of blogs is to make learning easy for curious like minded people. I post articles with detailed examples, real life scenarios that I personally experienced during my journey as a Software Engineer. Being able to share free information about the tech space is one of the reasons why I enjoy doing this!

Giving back with free resources is the least I can do as well as pay it forward for upcoming software engineers entering the space.

That said:

If you've gotten value from my blog posts - and you have a few coins to spare - I would greatly appreciate your support in the form of a small ti here.

\n","markdown":"Hi there! 👋🏾 Thanks for checking out this page. If it's ok with you, take a minute to read a little more. \n\nI am Richard, a former sommelier turned Software Engineer based in NYC. I am passionate about knowledge sharing, collaboration, and connecting with like minded individuals. \n\nFrom learning how to code from content creators before me, I decided to document & share my own thoughts and expertise about frontend/backend engineering.\n\nThe idea behind creating this collection of blogs is to make learning easy for curious like minded people. I post articles with detailed examples, real life scenarios that I personally experienced during my journey as a Software Engineer. Being able to share free information about the tech space is one of the reasons why I enjoy doing this!\n\nGiving back with free resources is the least I can do as well as pay it forward for upcoming software engineers entering the space. \n\nThat said:\n\nIf you've gotten value from my blog posts - and you have a few coins to spare - I would greatly appreciate your support in the form of a small ti here.","__typename":"Content"},"stripe":{"connected":true,"accountId":"acct_1Li2RFRCE4TE7d9g","country":"US","__typename":"StripeConfiguration"},"__typename":"PublicationSponsorship"},"allowContributorEdits":true,"posts":{"edges":[{"node":{"__typename":"Post","id":"62ccf6ac0ba13ab923f69b67","title":"CSS Margins, Padding & Borders Tutorial","slug":"css-margins-padding-and-borders-tutorial","publishedAt":"2022-07-12T04:21:00.498Z","cuid":"cl5ho1frg02v2t4nv2p0yfwgv","url":"https://rembertdesigns.hashnode.dev/css-margins-padding-and-borders-tutorial","subtitle":"Understanding How Margins, Padding & Borders Fit Into the CSS Box Model","brief":"In this tutorial, we’ll be exploring three important CSS properties to understand when laying out pages: Margins, Padding & Borders.\nMargins, Padding & Borders\nIf you’ve read my previous post on the box model, you’ll know that the values held by the ...","readTimeInMinutes":5,"views":31,"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","username":"rembertdesigns","name":"Richard Rembert","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg","followersCount":42},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657598983914/mCjOc9cJe.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJjY2Y2YWMwYmExM2FiOTIzZjY5YjY3XzIwMjItMDctMTJUMDQ6MjE6MDAuNDk4Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62cc10fc222e2fa74e9bcc8c","title":"The CSS Box Model Tutorial","slug":"the-css-box-model-tutorial","publishedAt":"2022-07-11T12:01:00.353Z","cuid":"cl5gp15a805suabnvce2lgp3o","url":"https://rembertdesigns.hashnode.dev/the-css-box-model-tutorial","subtitle":"Learn How to Use the Box Model to Layout Elements","brief":"In this tutorial, we’ll be learning about the CSS Box Model!\nUnderstanding the box model is a key concept to grasp in CSS. And for many, learning the box model provides a real moment of clarity — where CSS layouts start to really make sense!\nThe thin...","readTimeInMinutes":4,"views":84,"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","username":"rembertdesigns","name":"Richard Rembert","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg","followersCount":42},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657512324972/TVrVICDYn.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJjYzEwZmMyMjJlMmZhNzRlOWJjYzhjXzIwMjItMDctMTFUMTI6MDE6MDAuMzUzWg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62cba1e5222e2fa74e9bb71a","title":"CSS Pseudo-Elements Tutorial","slug":"css-pseudo-elements-tutorial","publishedAt":"2022-07-11T04:07:01.278Z","cuid":"cl5g83ljc03a7abnv2r2q56cy","url":"https://rembertdesigns.hashnode.dev/css-pseudo-elements-tutorial","subtitle":"Learn All About Styling with CSS Pseudo-Elements","brief":"In this tutorial, we’ll be learning about CSS pseudo-elements!\nA pseudo-element is used to style specified parts of an element. For example, we could use it to style the first letter (::first-letter), or line (::first-line), of an element. Or we coul...","readTimeInMinutes":4,"views":44,"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","username":"rembertdesigns","name":"Richard Rembert","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg","followersCount":42},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657511743203/UYO8c8h6o.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJjYmExZTUyMjJlMmZhNzRlOWJiNzFhXzIwMjItMDctMTFUMDQ6MDc6MDEuMjc4Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62c63e2160d6757393f83494","title":"CSS Attribute Selectors Tutorial","slug":"css-attribute-selectors-tutorial","publishedAt":"2022-07-07T02:00:01.155Z","cuid":"cl5adsv5h02br2gnvb6ye175k","url":"https://rembertdesigns.hashnode.dev/css-attribute-selectors-tutorial","subtitle":"Learn All About Styling with CSS Attribute Selectors","brief":"In this article, we’ll be learning all about attribute selectors. If you remember from HTML, elements can have attributes that give extra details.\nAn a tag with an href attribute:\n\nWe use CSS attribute selectors to target these elements with their sp...","readTimeInMinutes":3,"views":52,"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","username":"rembertdesigns","name":"Richard Rembert","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg","followersCount":42},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657158448617/TOqqeyLGl.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJjNjNlMjE2MGQ2NzU3MzkzZjgzNDk0XzIwMjItMDctMDdUMDI6MDA6MDEuMTU1Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62c605e0c8efe473b8fe4e7e","title":"The Cascade, Inheritance & Specificity Walkthrough","slug":"the-cascade-inheritance-and-specificity-walkthrough","publishedAt":"2022-07-06T22:00:00.435Z","cuid":"cl5a587gz01rg3hnvfl019wlk","url":"https://rembertdesigns.hashnode.dev/the-cascade-inheritance-and-specificity-walkthrough","subtitle":"A Review of the Fundamental Concepts of CSS","brief":"In this article, we’re going to review some of the most fundamental concepts of CSS. The cascade, inheritance, and specificity.\nWhat is the Cascade?\nIt’s the ‘C’ in CSS (Cascading Style Sheets), so conceptually it lies at the very core of CSS. The ca...","readTimeInMinutes":5,"views":72,"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","username":"rembertdesigns","name":"Richard Rembert","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg","followersCount":42},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657139951853/o2xPqzQLM.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJjNjA1ZTBjOGVmZTQ3M2I4ZmU0ZTdlXzIwMjItMDctMDZUMjI6MDA6MDAuNDM1Wg==","__typename":"PostEdge"},{"node":{"__typename":"Post","id":"62c5cf0960d6757393f82884","title":"CSS Basic Selectors Tutorial","slug":"css-basic-selectors-tutorial","publishedAt":"2022-07-06T18:06:01.103Z","cuid":"cl59wvanr010z2gnv8gyu1bat","url":"https://rembertdesigns.hashnode.dev/css-basic-selectors-tutorial","subtitle":"Learn How to Use CSS Selectors to Style HTML Elements","brief":"Selectors target HTML elements that we want to style with CSS. By associating our declarations with one (or many!) elements in our HTML document.\nThe 4 basic selectors are element, .class, #id & * (universal).\nElement selectors\nAn element selector wi...","readTimeInMinutes":5,"views":82,"author":{"__typename":"User","id":"62792a4b7f98319956cd2bf7","username":"rembertdesigns","name":"Richard Rembert","profilePicture":"https://cdn.hashnode.com/res/hashnode/image/upload/v1655512547653/yqPzWE1O0.jpg","followersCount":42},"coverImage":{"__typename":"PostCoverImage","url":"https://cdn.hashnode.com/res/hashnode/image/upload/v1657129923398/bCUI5jGhR.png","isPortrait":false,"isAttributionHidden":false}},"cursor":"NjJjNWNmMDk2MGQ2NzU3MzkzZjgyODg0XzIwMjItMDctMDZUMTg6MDY6MDEuMTAzWg==","__typename":"PostEdge"}],"pageInfo":{"endCursor":"NjJjNWNmMDk2MGQ2NzU3MzkzZjgyODg0XzIwMjItMDctMDZUMTg6MDY6MDEuMTAzWg==","hasNextPage":false,"__typename":"PageInfo"},"__typename":"PublicationPostConnection"}}}