Host your static site in AWS

Paschal Maximillian — Mon, 26 Jul 2021 01:56:32 +0000

REQUIREMENTS

An AWS account
Your smile face :)

So you are going to host your site to a service know as AWS S3

What is AWS S3?
S3 stand for {Simple storage solution}

So S3 is

A place that you can store objects
The service simply store stuffs,more specifically objects
Object can be things like images files,Html documents files,Css files and javascript files

How to work with S3 management console

1.In search bar type the word (S3)

Select the first S3 shown and click to it hopefully you should see now the S3 management console..as a below picture

2.Now you already navigate to a S3 management console you can see a button says create bucket
S3 is composed of buckets

S3 bucket is basically a container where we put in files.
Think a bucket as a drive in a computer

Click on create bucket
Then enter a unique name for your bucket (nospaceallowed)

After inputting a unique name for a bucket now scroll down to the section named as PUBLIC ACCESS SETTING then UNCHECK the checkbox named block all public access and then further down CHECK to the acknowledge the warning box that will appear..

Click a create button at a bottom,if your name was unique then boom you just made a AWS S3 bucket

3.Back to S3 console management and navigate to your created bucket then click to it
Now you are going to upload actual files in your S3 buckets

Click to an upload button
Select the needed files/Folder

Scroll down to the section called Permissions as shown in a picture below and click to it you need to custom some permissions.
Again to a section Everyone (public access) check to read checkboxs

Also check to the acknowledge the warning box that will appear..

Scroll down the rest of way and click the apload button

After successfully upload some files back to S3 console management and select a your bucket then you will see as a picture show below..

Click on Properties tab
Scroll down untill you find a section 'Static web hosting'
Enable static web hosting and enter required input that will show up

After successfully enable hosting scroll again to 'Static web hosting'

Then you will find out a link as a picture below

Hopefully your site now is deployed to AWS Learn more here

Thanks if you reach out to the end

Lets connect here is my linkedin profile

Tips to organize well your Css

Paschal Maximillian — Mon, 19 Jul 2021 23:01:00 +0000

HOW TO ORGANIZE YOUR CSS

Organizing your Cascading Style Sheet(s) it is a pretty cool way to start developing on writing clean code if you are beginner and if you are pro means you must deal with huge of Css file then it’s important to organize well your Css to reduce errors and to make code human readable.

WHY! ORGANIZING WELL YOUR CSS
To increase your productivity
Make easier to maintain when it comes in solving some errors
To produce clean code.

Some steps to ensure that your css is well organized

Use external CSS.
This is the most helpful way to to organize your css rather than use internal css or inline css so use external way to organize your css
Define variables.
Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document. Complex websites have very large amounts of CSS, often with a lot of repeated values.Declare a variable in global zone,global variables are generic variables that will be used to keep the consistency between all our
Components.
Comment your css.
Adding comments to your CSS will help any future developer work with your CSS file, but will also help you when you come back to the project after a break.
Prefer to use class instead of id’s
When your are creating a selector that can be reusable most of times it is better to use a class selector and in styling it is highly recommended to use class.

Thanks if you reach out to the end

It is my first post please
show love
follow me in IG @paschal_maxillian

DEV Community: Paschal Maximillian

Host your static site in AWS

So you are going to host your site to a service know as AWS S3

How to work with S3 management console

Thanks if you reach out to the end

Tips to organize well your Css

HOW TO ORGANIZE YOUR CSS

Thanks if you reach out to the end