DEV Community: Devshot Dotcom

Gorgeous Order Summary Component Using HTML and CSS

Devshot Dotcom — Wed, 22 Sep 2021 16:19:06 +0000

CSS can be overwhelming at times and 80% of the web developers out there find CSS to be very complicated at times.

Well, guess what? It ain’t that much of a complication once you get a hold of the basics and that’s exactly what we’re gonna do today.

Note: This project is a challenge from Frontend Mentor. The built project’s source code is stored in a github repository.

This is what the final build looks like.

Let’s get started

The first thing that we’re gonna roll at is to create an empty index.html file and set up its <head> tag with some metadata such as the

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This meta tag is as much necessary for a responsive web design as food for us. Next, we’re going to create two folders called images and css and fill up the former one with these images from the repository.

Normalize.css

Normalize.css is an NPM module that provides a CSS file that, quite literally,

"makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing".

Either you can download the CSS file from our repository or install the module yourself, however, the latter would require an LTS version of node.js installed on your device.

To get started, initialize an empty node.js project using

npm init -y

This will initialize a default node.js project and you can find a package.json file in the project’s root directory. Now run the command

npm install normalize.css

This will create a node_modules folder in the root folder of your project and you can find the normalize.css file somewhere in this folder.

Root Styles

Create a new root-style.css file in the CSS directory and paste these CSS rules into it

Firstly, we’re using Red Hat Display font from Google Fonts, then we’re creating a whole lot of colour shades and storing them in their respective CSS custom properties/variables.

This allows us to create a colour scheme and use the semantic CSS variables rather than using the raw colour names.

Naming Convention

Then we’re going for some text configuration which is just some font weights and sizes but, the fun part is where we declare the general sizing properties. After a ton of research and consistent scaling difficulty across many different applications, our team figured out the naming convention (smaller, small, normal, large, larger) to be the best working naming convention up-to-date.

It is as such because you can store whatever you want in the smaller variable and then keep on increasing it as much as you desire without the constant thought of what would happen if you have to increase all these sizes. The same won’t be the case with a variable named --sizing-1rem.

Styled Components

Before jumping into the world of HTML, we’re writing the CSS of some elements that we’re gonna use, this would give us the ability to have better-looking default HTML elements and we won’t waste our time styling these components later on.

One thing worth noticing here is the box-shadow, the reason why would be because we’re using CSS variables inside the box-shadow property. Let me break it down for you

box-shadow: 0 var(--size-smaller) var(--size-normal) var(--alt-shadow-color);

The syntax of the box-shadow property goes like

box-shadow: x y blur spread colour

Here,

x — The x-offset of the box-shadow, 0 means the shadow won’t get tilted on either of the x-axes.
y — The y-offset of the box-shadow, we’re using a variable to indicate this size.
blur — The blur radius of the shadow, we’re blurring the shadow so it gets a nice spread of the colour and notes that this blur is slightly more than the y-offset which means that the blurred shadow will cover up about the whole button.
spread — Think of it as a number of how thick the shadow should be (Which it actually is but, slightly different), we’re ignoring it cuz the default spread radius works best in most use cases.
** colour** — Very obvious, let’s just quit here.

Modular CSS

Most web applications use module bundlers and/or package managers to bundle up their static assets such as CSS and images. That’s a perfect way to choose for a large application but, for this challenge, we’re just gonna import other CSS files into a single file that’s embedded within the HTML.

/* style.css */
@import "normalize.css";                       
@import "root-style.css"

This will make the server return a single CSS file that already has 2 other CSS files within it, decreasing the HTTP requests from the browser by 2.

Semantic HTML Markup

We’re using HTML5’s semantic elements to ensure a better user experience and SEO management.

Note that we’re using our styled component classes as default HTML elements and using undefined (for now) CSS classes for layout management. Styled components without a layout design

If you’re following correctly, this is what your browser would display right now.

To fix this, let’s start adding some layout rules in our style.css file. The first element to style is the .viewport which is just a wrapper for the <body> element.

Following are the styles for the .viewport class

.viewport {                         
    width: 100vw;
    height: 100vh;                         
    display: grid;                         
    place-items: center;                         
    padding: var(--size-larger);                         
    background: var(--background-color) url("../images/pattern-background-mobile.svg") center top no-repeat;
    background-size: contain;
}                                               

@media (min-width: 768px) {
    .viewport {
        background: var(--background-color) url("../images/pattern-background-desktop.svg") center top no-    repeat;                           
        background-size: contain;                         
    }                       
}

This alone makes the build looks very much better than before

Now, let’s add the styles for the <article> element, the container for all this summary content.

article {                         
    max-width: 375px;                         
    border-radius: var(--size-normal);
    background: var(--tertiary-color);                         
    box-shadow: 0 var(--size-largest) var(--size-largest)
    var(--shadow-color);                       
}

.article__cover {
    height: 12rem;
    background: url("../images/illustration-hero.svg" center center no-repeat;                         
    background-size: cover;                         
    border-radius: var(--size-normal) var(--size-normal) 0 0;                       
}

.article__content {
    padding: var(--size-larger);                       
}   

.article__content > * {                         
    margin: 0;                         
    text-align: center;                         
    margin-top: var(--size-larger);                       
} 

.article__content > *:first-child {                         
    margin: 0;                       
}   

@media (min-width: 768px) {
    .article__content > *:first-child {
        margin-top: var(--size-larger);                         
    }                       
}

These styles fix the maximum width of the article, set its background, shadow, and also the cover image of the article. The result looks like this. Life is getting better and better.

Next up we just need to set up the card that displays the total cost and the buttons at the very bottom, this would do it

.card {                         
    background: var(--color-on-background);
    padding: var(--size-normal);                         
    border-radius: var(--size-small);                         
    display: flex;                         
    flex-wrap: nowrap;                         
    justify-content: center;                         
    align-items: center;                       
}                                               

.w-25 {                         
    width: 25%;                       
}                                               

.w-50 {                         
    width: 50%;                       
}                                               

.icon#music {                         
    background: url("../images/icon-music.svg") center center no-repeat;                         
    background-size: contain;                       
} 

.col-text {                         
    display: flex;                         
    align-items: start;                         
    flex-direction: column;                         
    gap: var(--size-smallest);                       
}   

.col-buttons {                         
    display: flex;                         
    flex-direction: column;                         
    gap: var(--size-smaller);                       
}

After this, the build is finished and the final product looks pretty aesthetic (in my opinion). But what actually matters is the fact that I found my build to be one of (if not) the most accurate to the actual challenge at Frontend Mentor.

If you have any questions, please ask in the comment section down below and don’t forget to like it if you read it through. Peace out 👌. Stay tuned for more cuz we, at Devshot, are gonna
take you to the moon 🌕

An Article I Just Stole But Actually Not

Devshot Dotcom — Fri, 30 Jul 2021 15:50:46 +0000

Article rewriting, paraphrasing, spinning, synonymizing, I'm not sure if that last one's even a word but, it all refers to the same thing and that's to make someone else's article your own by replacing keywords with their synonyms which gives you the ability to have unlimited, plagiarism-free, instant articles of your own.

Why Would Anyone Need a Rewriter/Paraphraser?

We're not talking about the traditional paraphrasing where content from other author's books is used. At the time of writing this script there are 160 billion websites and at least 600 million of these are blogs and I don't even wanna count how many articles these blogs would contribute, since I suck at maths, and making unique, Search-Engine-Friendly articles at this rate is quite impossible for an average human being. That's where article rewriting, paraphrasing, and blah blah blah comes into play and there are a ton of different tools that automate this process that's not so easy otherwise and all it takes is a few clicks.

I personally use the tool of this website called SEO Helpify, yeah, what the hell is that name, cuz of a couple of reasons.

Its straight forward.
It's not pumped with ads.
It has a dark mode.

All you gotta do is copy that article your mouth watered about and paste it in the text box and then click the big red submit button and it'll generate a plagiarism-free, unique, SEO-friendly article with a shit ton of grammar mistakes. Arguably that's how Artificial Intelligence works these days, hope that changes soon and we get rid of our ugly jobs, if you know what I mean.

Utilizing Grammarly For Maximized Efficiency.

Now to fix this you'll need an extension called grammarly, visit your browser's add-ons store and add the grammarly extension to your browser, also visit their website and activate the extension and let the games begin.

Now if it all worked nice and clean you can click on the rewritten article in SEO Helpify and grammarly will start doing its thing and mark all the problems whether they're grammatical errors or spelling mistakes. Copy this article once you're finished and use it anywhere you want, easy as that. If you liked this article and want to see more relevant content then please like and follow and don't forget to subscribe to our youtube channel cuz we, at Devshot, are gonna take you to the moon!

Android app design, logo & colour palette

Devshot Dotcom — Tue, 04 May 2021 10:32:53 +0000

As we moved on from the web and found peace with android, came forward the need to share our experience so that you can learn from our mistakes.

I hate long intros, lets get to work!

What’s the first thing you’d do when you’re thinking of developing an app? Eat some burgers, maybe? Ofc, that’s exactly what me and my team does when we’re stuck so get yourself a burger, then think about the name of your app…

Well in our case, we literally when to google and translated prayer times to Arabic and found out Salah Tawqit, well, sounds great.

How about the colour scheme, or theme, or shades, bruh?

That’s kinda easy, just google “Cool Colour Theme Generator” or just go to coolors and generate one, its that simple.

But how am I gonna design it? On a paper? 🤮 Use Figma

Now what the coffee is figma, well its a freemium design tool, yeah, freemium. What that means is that Figma is free for nobody but the lone wolves and it has a desktop app and it’s a vector graphics editor. Oof, that means you can design logos, edit vectors, and make youtube thumbnails for free! poor wallet noises

Enough with the lame jokes, Figma actually lets you design pretty cool user interfaces with interaction use-cases, aka use-case prototyping. Lets learn by doing and not by talking.

We’re not pros at figma nor do we wanna be, we just chill, eat the burger, have a shot of espresso, and code. But this guy, he’s awesome!

Once you get the hang of figma, it’s kind of easy to make designs and interfaces, but, how about Logo Making?

Make yourself a logo, don’t you dare pay a freelancer or any “generator”

It’s really easy, trust me on this one, there are so many sites that provide free vector icons, repeat after me, free vector icons. Now bear in mind you need a vector, that’s a file that ends in .svg, although there are other vector file formats, SVG stands for Scalable Vector Graphics, that’s what we need.

Now this site, flaticon is my choice when it comes to downloading free vectors, just get yourself an SVG that suits your suit (I couldn’t find a better one), we’ll edit its colours and size quite easily in figma.

Now just copy this vector to figma, and we can humiliate it all we want. On the left hand side in figma, you’ll see the layers of your vector, select the layer you want to edit, hold down CTRL/CMD and click on a layer, now you can change its colour, adjust its size, or even reduce it to atoms using the deleting snap.

Finale

Well, we designed our app using these techniques and ended up with the following two pages, the user can horizontally scroll between these two, isn’t that great?

This is what the initial design looks like: