DEV Community: Shilpa

CSS Selectors for web developer and beginners

Shilpa — Mon, 25 Jan 2021 23:10:15 +0000

We know styling is influential for developers to represent their work. Styling is as we add spices to vegetables to bring out the flavour of the vegetables. For styling "CSS selectors" are essential. So, what is CSS selectors? CSS selectors define the elements to which a set of CSS rules apply.

There are a few CSS selectors in CSS:-
1.Basic Selectors
2.Grouping Selectors
3.Combinators
4.Pseudo

Basic Selectors:-

Basic selectors are consist of universal, id, class, attribute and type selector.

Universal Selector:-

Universal selector is used to Selects all the elements on the pages.

Syntax

*

Html

Output

Id Selector:-

Id selector is used to selecting the id attribute of an HTML element. That is written with "#" symbol followed by the id of the element. There should be only one element with a given ID in a document.
Syntax

#idname

Html

Output

Class Selector:-

The class selector is used to selecting the class attribute of an HTML element. That is written with " ." symbol followed by the class of the element.

Syntax

.classname

Html

Output

Attribute Selector:-

Attribute selector is used to selects the HTML elements that have a specific attribute or attribute with a specified value.

Syntax

[attribute]/ [attribute=value]

Html

Output

Type Selector:-

Type selector is used to selecting the particular element type.

Syntax

elementname

Html

Output

Grouping Selector:-

Selector List:-

Selector list is used to apply the same styles on different elements by using a comma. It is used to minimize the code.

Syntax

A, B

Html

Output

Combinators:-

Combinators are consist of Descendant, Child, General sibling, Adjacent sibling and Column combinator.

Descendant Combinator:-

A descendant combinator(space) is used to select the child element of a particular tag at any level.

Syntax

A B
Html

Output

Child combinator:-

Child combinator(>) is used to select the first element of a particular tag. But if you wrap with different tag then it is not applied the style on it.
Syntax

A > B

Html

Output

Adjacent Sibling Combinator:-

Adjacent sibling combinator(+) is used to select the adjacent sibling of an element. It is used to select only those elements which immediately follow the same parent.

Syntax

A + B

Html

Output

General Sibling Combinator:-

General sibling combinator(~) allows elements to be selected based on their sibling elements, those which share the same common parent. In this not necessary element immediately follow.

Syntax

A ~ B

Html

Output

Pseudo:-

Pseudo is consist of pseudo classes and pseudo elements.

Pseudo-Classes:-

Pseudo-classes is used to define a special state of an element.

Syntax

elementname:specialstatename

Html

Output

Pseudo-Elements:-

Pseudo-elements are used to style specified parts of an element.

Syntax

elementname::specifiedpart

Html

Output

Conclusion

In this article, I cover CSS Selectors. I also define the syntax, purpose and usage at one place.
I hope this article help to learn CSS Selectors.

Mostly used git commands for beginners

Shilpa — Wed, 13 Jan 2021 18:25:07 +0000

Git is a magic bullet for developers to track your work. Git also differentiates the other teammate work by using git commands. Here are the 10 most used git commands.

git init
git clone
git add
git status
git diff
git commit
git push
git pull
git revert
git checkout

git init

Git init is used to initialise the git to a local repository. But when are you clone from remotely then you don't need the git init.
Practice:-

git clone [remote_url]

Git clone is used to creating an identical copy of a Git Remote Repository to the local machine.
Practice:-

git add [file name/.]

Git add is used to add the modified files in the staged area. There are following ways to use git add, by adding the entire folder and specific files. Dot means the entire folder.
Practice:-

git commit -m "Your message about the commit"
Git commit is used to add the changes with a unique message in an individual file or set of files. Git commits also creates a unique id. A "unique message" shortly describes what changes you have done. It also helps you track your commits.
Practice:-

git status

Git status is used to check the status of the modified files. It also shows which files are staged, unstaged, and untracked.
Practice:-

git diff

Git diff is used to track the difference between the changes made on a file.
Practice:-

git revert [commit id]

Git revert is used to undo the changes of the given commit which we have pushed in a "remote" repository and changes add in the current branch. Without losing your previous commit.
Practice:-

git push

Git push is used to push all the changes locally to the remote repository.
Practice:-

git pull

Git pull is used to pull all the changes from remote to the local repository.
Practice:-

git checkout [file/branchname/commit id]

Git Checkout is used to switch between files, branches and commits.
Practice:-

Conclusion

In this article, I cover mostly used git commands for beginners. I also define the syntax, purpose and usage of command at one place.
I hope this article help to learn git commands.

Nevertheless, Shilpa Coded

Shilpa — Fri, 06 Mar 2020 08:58:56 +0000

My journey as a woman in tech so far...

Two years ago, I started my coding journey as an HTML developer. It was quite an exhilarating start for me. Later, I learned HTML, CSS and Javascript as well.
After months of converting PSDs to HTML designs, I realised I wanted to do more, to learn more. I wanted to pick up new skills that I could apply to my work. While I was looking for more to learn, UI/UX attracted my interest the most, so that's what I decided to delve deeper into.

I've learned a lot since then, and now, I'm one of the go-to UX people in my firm. For the interfaces I design, my approach is simple: I want the user to achieve what they're trying to through the medium while having a joyful experience. That's an important belief of mine. Good design not only works, it also makes the user happy. My current work gives me a chance to experiment with a lot of different UIX designs and see what ultimately works best for the users. It's exciting and it gives me a sense of purpose.

I think I can summarize my feelings for my work with a great quote I read in a Medium article a while back:

"A very unique nature salt has is, its presence is never felt but its absence makes all things tasteless."

I feel the same about design. Bad design also gives a dull experience to users just like food without salt.

I am very happy to have progressed so much as a UIX designer in a short amount of time. For this year, my main goal is to delve deeper into the same discipline and gain even more expertise in it.

My advice for allies to support self-identifying women and non-binary folks who code is...

Act as an advocate and for them and their work. Include them in important meetings and plans. Helping them develop a healthy network is also a good idea.
Help them develop a strong sense of purpose by supporting them in what they do and trusting them to do it well. Provide them with constructive criticism so they can improve their skills, and vocally appreciate them in front of their peers when they do a good job.

I am grateful to my team for being super supportive of me in my journey and helping me grow into my role as a UIX expert. I'm excited for what the future holds for me!

👩‍💻 Offline Codepen and JSFiddle

Shilpa — Sat, 23 Feb 2019 11:00:34 +0000

Check this out. Web-Maker is an offline playground for testing and seeing the output of HTML, CSS and JavaScript code snippets. This is much faster compared to Codepen because it runs completely offline on your system.

chinchang / web-maker

A blazing fast & offline frontend playground

Web-Maker 🕸🛠

Web-Maker is an offline playground for your web experiments. Something like CodePen or JSFiddle, but much more faster and works offline because it runs completely on your system.

Open Web App (Recommended: More features. More fun!)

Install Chrome extension

Features

Supports Preprocessors: HTML (Pug & Markdown), CSS (SCSS, LESS & Stylus, Atomic CSS) & JavaScript (ES6, TypeScript & CoffeeScript)
Works offline
Quick creation & good-old files mode
Inbuilt Console
Save and load your creations
Auto-save feature
Code auto-completion
Easy addition of popular JS & CSS libraries
Import & Export all creations anytime, anywhere
Multiple editor themes & other configurable settings
Font options + use any system font!
Very easily accessible. Simply open a new tab in Chrome! (in chrome extension only)
Multiple layouts to choose from
Capture preview screenshot (in Chrome extension only)
Save as HTML file
Edit in CodePen

Follow @webmakerApp for updates or tweet out…

View on GitHub

Super Cool 😎 Tool to Style Your 💙 Tweets

Shilpa — Mon, 11 Feb 2019 18:33:31 +0000

Hey, I recently found a cool website tweetfancy.io. It lets you add styles to your tweets, and it's pretty straightforward as it uses simple Markdown. If you wanna make your tweets stand out, it's worth checking out!

flexdinesh / tweet-fancy

🚀 Tweet with bold, italics and strikethough text

`tweetfancy.io`

Ever fancied tweeting with bold, italics or ~~strikethrough~~ text?

Twitter may not support it but you can.

Write in markdown and grab your fancy text.

🚀 https://tweetfancy.io

Note: The generated bold, italics and strikethrough texts are UTF Mathematical Alphanumeric Symbols. So if you run them by a screen reader, you'll find that the reader reads them out by their symbol name. But then, all screen readers struggle reading smileys too (🎉🔥🚀🦄😎) and that doesn't stop us from using smileys.

License

View on GitHub