Make 10 Icons using HTML and CSS | Paudel Bijay | Skillshare

Make 10 Icons using HTML and CSS

Paudel Bijay, Full Stack Developer

Make 10 Icons using HTML and CSS

Paudel Bijay, Full Stack Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
3 Lessons (32m)
    • 1. Project-1: Google Logo

    • 2. Project-2: Adidas Logo

    • 3. Project-3: Instagram Logo

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Welcome to my coding course to build an eCommerce website like amazon. In this course, you will learn the essential tools and skills to design, develop, and deploy a fully-function website like amazon using Vanilla JavaScript, HTML5, and CSS3 in frontend and Node and MongoDB in the backend.

I designed this course for anyone seeking to develop a fully-functional eCommerce website like amazon. By the end of this course, you’ll be able to design a responsive web template, implement a user-friendly frontend, and build a scalable backend. Also, you can deploy your website on cloud servers like Heroku and connect it to payment gateways like PayPal.

You need to open a code editor along with me and start coding throughout this course. I teach you:

  • Web Design using HTML5, CSS3 including Semantic Elements, Flexbox, Grid System, and Response Design.

  • Frontend Development by Pure JavaScript including ES6 Syntax, Rendering System, Single Page App, Libraries for Date-Time, drawing chart and etc.

  • Backend Development using Node and MongoDB consists of ExpressJS, JWT Authentication, Mongoose object data modeling, and more.

This course is for non-coders or juniors who want to be a professional web developer to get a job in 22 million job opportunities around the world. No requirement is necessary for this course and having a passion for coding is enough.

Feel free to take a look at the course preview and enroll if it is along with your ambitions.

Meet Your Teacher

Teacher Profile Image

Paudel Bijay

Full Stack Developer



I'm Bijay Bahadur Paudel, a full-stack Web Developer / Designer, Founder of '' and an author of several classes on Skillshare.

I'm excited that I'm here and have a chance to help people to learn one of the most interesting and powerful fields today.

I decided to share my knowledge and experience with the world and that's the main reason why I'm here at Skillshare.

I'm specialized in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, jQuery, React, React Native, NodeJS, Git, and more...

Looking forward to seeing you inside my classes and help you to become a professional web developer.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Project-1: Google Logo: I everybody honestly, that is in the tower powering your nurses. Coming in. What are lost in the square? Acting on body. Inside the body. San Francisco. Santa. Right? We are partially yeah. Yeah. Yeah. Px. Px. I'm Josh to be linked to it. So we've got the yen and we want to use that in the RAM. Now the otoconia, we'll A2 will be similar. I think getting, saving these nine. Then we will be getting. Here's our nice noticing. If we gave some green here just yet, even in this green border, px. Hello, hello, color. Here, just save it. Now we have what we call partly. Color will be one over the other. They need. And we really get our bottom line. I didn't color. In far on this. We are giving border-radius 50 portion in our elite rule in how are you looking at? When we are done with our dark dot, that is Tom. Yes. Let our team when we mean is 50 px py and batting good, aiming for them? In this way. Yes. Border 14 ps. Parents, but not in senior design to make it transparent with visiting here, just to the outer surface. Making it. And we act on wind power law, Right? Right. Or d, p x has a naming your snoop javelin browser. Again, we have Caracalla blue line. It is not encoding to other Prozent. Him. Make it rotate. We are rotating in a 45 degree and we can see that it is a times v Italian peering. Now, what we can do that we will slip border there. Yes. We can give you is we had in G1 here, border-radius, 50 percent. So then it will look like circular or the social. We will be giving border-radius puberty portion. Here. We hadn't gone, we burned down the green color is over here by the blue color, but we do not need it. So we will be ending bank green column. Here we can give is j index. What I'm hearing. Yeah. We have our green color over 2, then it will just blue color. We are done with the line, the line. To defend the head. Here, we are just giving an answer. Then it will look like. Here we have a line. We are not selecting wilt and giving you a tough one. Just because it can be a PDS. What is promising np? Then I will be giving you a high torque. T is logged in PBS as well. And I will be given your background color. And saving the day it is. Giving yet a line. I'll do blue. Column 1. This is before Napoleon, who seem absolutely right. To save it. The right side will be. Here we are looking because our box is just this nb when slang is denote, the initial position will be less prominent. Donkey syndrome do decrypted partial. Here's where we go. Here. We'll call this line. Then. Minus PMT. Parsing is even minus QQ plot. The y-axis. In this brain, we will be hearing a lot on right here it is to be tin PSI. Here we have this, this corner in a circular pattern. Saving it is. We've got our logo. 2. Project-2: Adidas Logo: You start making little more time. Yet. We will talk about in a deep way. Firstly, we can work out what universe you would anything bagging? Well, thank you. Well, we would sit down with a line. When done. Right. The most important thing, it worked. Right. All right. Excellent. Thank you. Yes. Button yesterday and follow him. One. Like me, I really common in butter on bare skin. Color black. So again, we can see that we have When he can't see the end one lung. Because now. But again by these lines so we can see that when we make some of them yesterday. So I really was slipping. And I will keep him from in D6. Thanks for giving. Giving, giving you. Or in one Excel. When we meet, we wouldn't get to be ln. One thing we do is we learn David in one, we save it. And we got slider lung field name. And we just, we can see that the boss, the boss will learn a lot from the box. Because really happened. We bought the Washington. He's well, then we have to again. Go. Hi, I'm done. Your lower abs. 3. Project-3: Instagram Logo: Yeah. We wouldn't be giving a big gaming be weeks later be called leak. In this way, we are done with universal. Done reasonably would be leaving box. I. Have a body, a town. We'd be viewport, height, example, our class name. Hi. And also some years back down. Yeah, I would, I add in. Here, I will be giving a gradient color data, starting with just you can't copy it in. Yeah. Here we go. Each time now. Again, we want we will border of pizza, then will also display. And I asked him also coordinating into each time district on the square. And we will be giving your logo. Deck, will be 11. Thinks it's on background color. A little one. Square. Rooted. In Boulder. Bookkeeping, excel. Because again we have to eating just being slow content. And then the height. We also HTP. And then return. And border. Border between clock tower is we have to make water. When I hide. It can also be white in color. And we're going to be the most important because these look over damped aids in the batting. B squared. When we defined from me, yes. Here's David. When people can pick some pivoting pixel, then bam. From that I'm saying this, right? It is the right one. We've got that nice encrypting peaks that we had done with Tyler each time.