--> Skip to main content

Featured

Steps to Create a Project on GitHub

Steps to create a project on GitHub:  1.   Start a repo on GitHub 2.   Make a README.md file 3.   Open vs code – new folder – new terminal – git clone http:…. (from the repo). 4.   In terminal – cd theprojectname   à move into the project file 5.   Ls -la is for showing hidden file à not working for me ???? 6.   Make some changes to README file, in terminal git status à shows all the changes on the file 7.   To add all changes update to the folder à git add . (the dot . means all changes to be added) 8.   Add a new file index.html, in terminal à git commit -m “title of commit” -m “description of commit” 9.   Then git push origin master 10.                 ****Initial a repo in local text editor à git init 11.                 After use git add . etc, when pus...

What CSS Reset rules should be added to most of websites?

For the majority of webpages, CSS Reset rules should be set at the beginning for the whole website(page), including margin, padding, box-sizing and list-style. Check out the code below. 

We give 0 to both margin and padding, it is supposed to keep designs consistent across browsers.  However, I see some articles arguing that this universal styling may put big load on rendering agent because every element needs to apply to the new rules, so with large web pages, the loading speed could be hindered. Meantime, some browsers already have very good default stylings for some components such as 'submit buttons' from Firefox or Opera, these good features will be deprived of by this CSS reset.  So it is not a MUST for web page design but a personal choice. 

For 'body' tag, a few common styles should be determined, such as background color or image, font-family, font-size, color for text and if there are animation effects, transition style in general.  


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

body {
    background-color: var(--color-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    color: var(--color-white);
    transition: all 0.4s ease-out;
}

:root{
    --color-primary: #191d2b;
}

Popular Posts