Ready to level up your skills?🚀

Hey, I'm Tim 👋

I launched EASEOUT in 2019 with a mission to share what I’ve learned over my years working in web development. Over time I've built up a solid resource for anyone interested in learning about building websites!

Fast forward to the present, and I am now focusing my energy into my other passion.. freelancing! I have run my own freelance business for years and I believe I have a lot of knowledge to benefit new and experienced freelancers alike.

I know the initial pain of finding it hard to get new clients and earn a consistent income. So thats why I’ve introduced my solution, the Complete Guide to Freelancing.

Freelancing has opened up a world of opportunities for me, and I’m certain it can do the same for you!

While you're here, check out my blog where I post freelancing tips, code tutorials, design inspiration, useful resources, and much more! You can also join the newsletter, or find me on Twitter/X.

Thanks for stopping by!

Latest from the blog:

The Complete Guide to Freelancing

Notion ad

Recruiting remote talent?

Botsonic ad

Educative Inc

Want your ad here? Contact us!

\n\n```\n\nThis can be explained as follows:\n\n![HTML element basics](/images/uploads/html-basic-format.png)\n\n**Note:** The content inside the section will be displayed in a browser. The content inside the `title` element will be shown in the browser’s title bar or in the page’s tab.\n\n### What is an HTML Element?\n\nHTML is comprised of **elements**, each element is defined by a start tag, some content, then an end tag, like so:\n\n** Your content… **\n\nThe HTML **element** is everything from the start tag to the end tag, for example: \n\n```\n

My First Heading

\n

My first paragraph.

\n```\n\n### Web browsers display HTML pages\n\nThe purpose of a web browser (Chrome, Firefox, etc) is to read HTML documents and display them on the page.\n\nOf course, a browser does not display the HTML tags, but uses them to render the document:\n\n![HTML rendered in the browser](/images/uploads/html-example.png)\n\n### How can you create an HTML page?\n\nTo get started with HTML, you will need a text editor and a web browser. There are many options for both, but some popular choices include Notepad (for Windows) or TextEdit (for Mac) as a text editor, and Google Chrome or Mozilla Firefox as a web browser.\n\nTo create an HTML document, you will need to save your text file with the `.html` file extension. Then, you can start writing HTML code by enclosing your content in HTML tags. Use this code to create your first webpage!\n\n```\n\n\n\n\n

My First Heading

\n

My first paragraph.

\n\n\n\n```\n\nTo view the HTML page in your web browser, simply open the HTML file from the file menu of your web browser.",thumbnail:"/images/uploads/html-thumb-min.png",_path:"/blog/2022-12-28-the-basics-of-html"},{date:"Sunday December 25th, 2022",dateshort:"December 25th",title:"CSS Border Radius",short:O,description:O,category:n,body:"The CSS `border-radius` property defines the radius of an element's corners. We can use this property to add rounded corners to our elements! It’s often used for buttons, images, and more advanced CSS shapes. Let’s dive a little further into this useful property…\n\nTypically, `border-radius` takes from one to four values, and the order in which the values are specified determines which corner each value applies to.\n\nHere is an example:\n\n```\n.my-element {\n border-radius: 15px 50px 30px 5px;\n}\n```\n\nNote that the values are applied to each order in the following order: top-left, top-right, bottom-right, and bottom-left.\n\nThis would give the top-left corner a radius of 15px, the top-right corner a radius of 50px, the bottom-right corner a radius of 30px, and the bottom-left corner a radius of 5px.\n\nYou can also specify the radius for each corner individually, using the following properties:\n\n* `border-top-left-radius`\n* `border-top-right-radius`\n* `border-bottom-right-radius`\n* `border-bottom-left-radius`\n\nFor example:\n\n```\n.my-element {\n border-top-left-radius: 15px;\n border-top-right-radius: 50px;\n border-bottom-right-radius: 30px;\n border-bottom-left-radius: 5px;\n}\n```\n\nThis would achieve the same result as the previous example.\n\nThe `border-radius` property is actually a shorthand property for the `border-top-left-radius`, `border-top-right-radius`, `border-bottom-right-radius` and `border-bottom-left-radius` properties.\n\n#### Creating shapes with border-radius\n\nYou can also use the `border-radius` property to create shapes such as circles or ellipses.\n\nTo create a circle, set the radius to a value that is equal to or larger than the width or height of the element. For example:\n\n```\n.my-circle {\n width: 100px;\n height: 100px;\n border-radius: 50%; /* radius equal to half the width and height of the element */\n}\n```\n\nThis would create a circle with a radius of 50px as the radius is set to half the width and height of the element.\n\nYou can also use the `border-radius` property to create elliptical shapes by setting differing values for the horizontal and vertical radius. For example:\n\n```\n.my-ellipse {\n width: 200px;\n height: 100px;\n border-radius: 50%/25%; /* horizontal radius of 50% and vertical radius of 25% */\n}\n```\n\nThis would create an ellipse with a horizontal radius of 100px (50% of the width) and a vertical radius of 25px (25% of the height).\n\nI hope this tutorial has helped you understand how to use the `border-radius` property in CSS.\n\n## Related Posts:\n\n* [Basic Selectors](https://www.easeout.co/blog/2020-03-10-css-basic-selectors)\n* [Pseudo-Classes](https://www.easeout.co/blog/2020-03-31-css-pseudo-classes)\n* [Pseudo-Elements](https://www.easeout.co/blog/2020-04-06-css-pseudo-elements)",thumbnail:"/images/uploads/css-border-radius.png",_path:"/blog/2022-12-26-css-border-radius"},{date:"Sunday October 16th, 2022",dateshort:"October 16th",body:'Whenever you load JavaScript from an HTML page, it’s important to be mindful of the loading performance of the page. The page-load time largely depends on **where** and **how** you add scripts to your HTML page.\n\nIn this article, we’re going to look at how we can use `async` and `defer` to control the execution order of our scripts & optimize our page load speed!\n\nToday, all modern browsers support the `async` and `defer` attributes on scripts. These attributes tell the browser it\'s safe to continue loading the page, while the scripts are being downloaded.\n\n### script\n\nLet’s start by defining how `