DEV Community: Higor Neves Marques

Frontend Mentor, a perfect platform to improve your front-end skills

Higor Neves Marques — Wed, 24 Jun 2020 15:27:47 +0000

One of the most difficult front-end students has is to find a good, beautiful, and responsive page design to start a new project and improve their frontend skill.

To deal with it, today I will introduce Frontend Mentor.

Frontend Mentor is a platform that provides us amazing projects to all skill levels using HTML, CSS, and Javascript.

Every challenge came with brief, instructions, and some suggestions to build then. It is perfect to deep understand what you have to do.

Since you have finished and deployed your project, all the community will be able to comment and give you some feedback.

I also recommend you to get a look at solutions given by other developers to see how then figured out a way to solve the same challenge.

I really hope you enjoy this amazing platform and find out good challenges for you.

How really works the CSS position property

Higor Neves Marques — Thu, 09 Jan 2020 16:08:11 +0000

I have seen a lot of developers using the CSS position property in a wrong way or by try and test "technic", some times, not only the beginners but some mid-level developer also.

So, I decided to write this article to explain how the position rule works.

`position: static;`

Is the default value for any HTML element. It makes the element follow the standard HTML flow, putting each element after the previous element and before the next element on the DOM.

`position: relative;`

The relative value works like the static one, but now you can set top, right, bottom and left values for this element.

Also, relative elements are used as a reference for absolute children elements.

`position: absolute;`

Elements with absolute position are removed from the flow of the document. Other elements will follow the flow normally.

Important to know, top, right, bottom and left of absolute elements will refer to the first relative parent.

`position: fixed;`

Is very similar to position: absolute;, but the fixed elements will refer to the document instead a parent.

`position: sticky;` (experimental)

the element is treated as a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position where it is told to stick.

Conclusion

I hope this article can help you to understand and use position CSS property with more efficiency.

Thanks for reading ;)

How to deploy a website in few minutes with Surge.sh for free

Higor Neves Marques — Thu, 09 Jan 2020 02:43:36 +0000

How many times do you feel discouraged to build some simple apps or code for fun because the deploy is harder to config than build the app?

So, some years ago I found a great solution for that: Surge.sh.

Surge is a very, very simple way to deploy your website/web app in a few minutes with node.js. Let see how:

To install Surge, just run:
npm install --global surge

After, go to your project root, run surge and fill the project (project path) and domain fields:

$surge

   project: ~/Jane/Desktop/my-project/
   domain: my-project.surge.sh
   upload: [============]

Success! Published and running at my-project.surge.sh

Deploying to a custom domain

Surge offer options to deploy your project to a custom domain passing it as the second parameter:

$surge ./ *mycustondomain.com*

The first parameter is the project path, in this case, since I'm at the project root folder I passed the ./. As second parameter my custom domain.

IMPORTANT: You may need to configure your DNS with a CNAME or A registry pointing to DOMAIN ou IP provided by Surge. For more details, you can read the complete guide made by the Surge team here.

Conclusion

I bet you this is one of the easiest ways to deploy websites o have seen, right? hehe

Surge also has paid plans for professional projects with some perks like force HTTP to HTTPS, custom SSL, unlimited domains, custom redirects... just for $30/mo.

Thanks for reading ;)

DEV Community: Higor Neves Marques

Frontend Mentor, a perfect platform to improve your front-end skills

How really works the CSS position property

position: static;

position: relative;

position: absolute;

position: fixed;

position: sticky; (experimental)

Conclusion

How to deploy a website in few minutes with Surge.sh for free

Deploying to a custom domain

Conclusion

`position: static;`

`position: relative;`

`position: absolute;`

`position: fixed;`

`position: sticky;` (experimental)