A Beginner’s Web Design Tutorial for 2018 – Part 1 of 2

Share it with your friends Like

Thanks! Share it with your friends!

Close

Part 2: https://youtu.be/HKuDR0fYtCY
Today’s Question: Do you use a CSS Framework or none at all?
— I have received a lot of requests to show the *full* process of both UI design, and then taking that UI design (produced in XD, Sketch, etc..) and making it a near pixel-perfect representation in the browser with HTML and CSS. Well, today I’m delivering! This will be a 2 part series where today, we’ll design the UI in Adobe Experience Design, and tomorrow (promptly at 10:30 AM ET), we’ll tackle HTML and CSS (without the use of any CSS frameworks).

Enjoy!

Comments

DesignCourse says:

Be sure to Subscribe! My answer for today's question: When I began building sites 20+ years ago, CSS frameworks didn't exist. Though, I still didn't code much by hand. Back then, we had stuff like FrontPage 98, Dreamweaver (Macromedia) and Fireworks, which was used to automatically slice/dice and create CSS for you. I did that for awhile, and then after awhile, I started to use CSS frameworks that came out (mainly Bootstrap). I used Foundation and Bulma as well.

These days, especially with the CSS grid, I do everything custom. The CSS grid negates the necessity of using a grid system, and once you're familiar enough with CSS properties and can design well, you will find that you really don't need a CSS framework. That's my take, at least!

ramon borreguero says:

I am not so familiar with the questions you ask us. Could you please explain the differences between those ways to reach the procedure of designing and making the site after with HTML and CSS. Which kind of advantages has Adobe Software? Are there another software to be able to do that?
Could you please give me one advice on how to build my photographer page. I have very few experience and want to learn building my own page and being able to sell my photos.
I apretiate the videos and wait please for response.
Ramon Borreguero

pekipeki abu says:

I prefer to use frameworks bootstrap

Mey SR says:

My bro please, make tutorial cms, html, css for a website coffee

Danny Lee says:

Why all the dislikes? Some people… I just don't understand… 🙁

Jonayed Islam says:

I use bootstrap

김진홍 says:

Your courses are awesome and professional.

Bhandari Manish says:

Excellent sir

John Wolf says:

Bootstrap4 is so effective with built-in Flexbox that I just cave in and set up the framework from the get-go, especially a single page landing site. Since I'm using animation libraries, etc., that all use class attributes like Bootstrap…might as well. Saying that… I also code CSS directly (CSS grid and Flexbox) for pages where I keep the CSS separate for each page. I've also created sites where the CSS is cascaded on the HTML page in the head by order placement of the links like CSS that applies to all on top, then additional CSS files under that for specific page sizes and let cascading do the work. This was all before these frameworks were available. Then the philosophy of small screens first came into being. My styling was big screens first down to small screens. I've also used Materialize because it is simpler and has a very cool carousel feature that's different from all the rest. It's very cool to show three people and there stats that can be switched with a click. A much better look than sliders.

John Nyabingi says:

as always you are the best bro. thanks for the tutorial

Dragan Novakovic says:

CSS in JS , nice fit with React

Sobhan Complex says:

Probably the worst tutorial existing on the web. You didn’t describe what you were doing and I even didn’t get the name of the programme you use

sharik shaikh says:

I used to use bootstrap but since bulma release. I'm using bulma in most of all projects.

Krupesh Anadkat says:

i accidentally discovered a shortcut to hide right sidebar (where u select font, center things, etc..).. BUT then i forgot what was that.. Can someOne Help..

Mr Lalit Aryan says:

use the framwork

Tom Kaas says:

No frameworks! Perfect tutorial, can't wait for part 2!

Damir Kozic says:

Can you make a video of how you are doing this project with the Vue.js? By the way, I use pure css. 🙂 I like to keep things cleaner.

Vaibhavkumar Patel says:

Hey sir below many people talks about the CSS grid. So why not you make one awesome design that touch the heart using css grid. These inspired many new designer student to choose the correct path in the designing way. I hope you can make one design using css grid. I wait for your reply. . .

wade dy says:

I use custom css cause I don't know how to use css framewok

Doctor Aisha says:

frameworks not good at all, they are enough to make you dull, your basics must be strong enough, then to save your time its not so bad to use it sometime, but personally i don't like framework that much..

vaibhav kubre says:

I prefer boilerplate like skeleton, helps to get started. Bootstrap only if time is less.

Evan Parcon says:

Can't wait!.. Thank u for this

Noormohammed Shikalgar says:

Hey Garry look what i have done please have a look….. and tell me how's it ?
https://github.com/noorshikalgar/design-css

PANDAHaze says:

I prefer custom css 🙂

Write a comment

*