Remember to Subscribe https://goo.gl/6vCw64
Today's episode marks the start of the coding portion of the series. We will be going piece by piece and working our way through the site and along the way learning valuable skills that will help us be better developers.
Topics covered in this video include, Sass, HTML, CSS, Responsive coding techniques, Gulp, Command line, Github basics, CSS Flexbox and more.
1. Intro - https://youtu.be/sr6jDeAoXCc
2. Discovery - https://youtu.be/g2aSWqU0gqA
3. Wireframe & Moodboard - https://youtu.be/boF058Bh5lo
4. Visual Design Part 1 - https://youtu.be/3xWViyhRGd4
5. Visual Design Part 2 - https://youtu.be/HqykJljlN2A
6. Setting up the Dev environment - https://youtu.be/cXbRAdPXpRA
7. Coding the Nav and Header - https://youtu.be/Boc_IZNzlh4
8. Coding the brand and feature section - https://youtu.be/O4gqpgRvYJg
9. Coding the Offer Section - https://youtu.be/JsLeiFbi8RM
10. Coding the Download Section - https://youtu.be/jMkAeo2uGHkA
This series is all about the web design and development process from start to finish. I am going to be taking you through the entire creative process from sketching and wireframing to high res mockups and full development phase.
I have never done a series this large, and my hope is that you will grow as a designer and developer not because I am perfect but because you have allowed yourself to stumble and fail with me on the road to making something you can be proud of.
I made this series because I believe that by teaching it I will learn and grow from not only the experience of creating the project but getting feedback from you all.
If you want to support the content I make and buy me a cup of coffee https://www.buymeacoffee.com/jesseshowalter
Vlogging Camera - Panasonic G85
Drone- DJI Spark
Hi Jesse, I have the other font style, and I don't know why - letters aren't capitalized in h1's and have some shadow under them. I was following every of your steps, have you got any guessings why did this might happen? Thanks in advance, enjoying your course)
Absolutely lovin' your style and approach to coding. Have a couple of questions if you don't mind me asking. When I was doing the nav and followed your "li*4" example, it only gave me one instance of the <a href..> on the same line not 4 below like you had. The other questions I have are to do with Atom. I tried but could not get the "mini map" you have on your video. How do I install that -and- how do I get my code to autocomplete like yours so quickly? It's hard to keep up at times. Is there a key you are pressing? "Tab"? Thanks so much brother!
@ 18:52 how come you arent embedding the .download functions into .main-nav? i was stuck here because in this video you arent embedding it and yet it somehow works.. in the index.html file, the logo and download classes are within the main-nav...
I indented the .download functions and it worked, but i dont understand how yours is working.
I purposefully did not include assets because the point of the series is for you to design and code your own landing page. I have other videos covering the export process if you need to know how. There are a lot of great teachers on YouTube and they each have their own style and purpose, thanks for watching, best of luck.
First of all thanks a lot for this kinds of videos, its extraordinary how you explain on the videos.
I really get stuck on the first part that you execute "gulp images"
Terminal says this
throw er; // Unhandled 'error' event
Error: spawn EACCES
at _errnoException (util.js:1022:11)
at ChildProcess.spawn (internal/child_process.js:323:11)
at Object.exports.spawn (child_process.js:502:9)
at module.exports (/Users/myuser/project/node_modules/execa/index.js:139:26)
at fsP.writeFile.then (/Users/myuser/project/node_modules/exec-buffer/index.js:35:15)
I don´t understand what happened. The assets/img folder continues empty.
Thanks a lot for your knowledge and good vibes!
Thank you so much for the great content! You explain what and why you write in details and depth, which makes your content really unique! Your tutorials and the way you explain things from scratch are really awesome and helpful and make things simple to understand. Great job man! Definitely one of the best channels out there.
Always looking for more content from you :)
Great series man! Just two things I noticed:
- the space between the nav and the main headline is a little bigger in the mockup of the site;
- for certain screen sizes, the logo and the nav links stick to the very side of the canva. Are you going to add a little bit of margin later on?
anyways, keep up the good work!
URBAN NATION MUSEUM FOR URBAN CONTEMPORARY ART is an international institution for art, creative projects and social exchange. Since September 2017 URBAN NATION shows under the leitmotif "Connect. Create. Care." that the house is far more than a museum.
Museum Opening hours Tuesday-Sunday: 10.00-18.00 Free admission.
Adress Bülowstraße 7, 10783 Berlin, Germany Contact [email protected] Follow Us.
IN THE STUDIO WITH … HAYLEY.
British born artist Hayley Welsh, has established herself as one of the newest creatives in the Western Australian art scene. There is something quite fantastical and a little bit dark lurking in Hayley’s work. Her latest work of art was created for the URBAN NATION and kicks off “The Monster Project”. We took the chance
Live @ the museum III – “Home” by Icy & Sot.
With her work made live in the URBAN NATION Museum, the artist duo once again draws attention to the fate of refugees and addresses the yearning for a home. Born in Iran, the artist duo Icy & Sot is known for addressing current political debates about war, peace, hope, despair and above all human rights […]
Three New Community Walls in June by Frz, Nafir & Xamoosh.
In addition to the two artists behind Icy & Sot, three other street artists from Iran will visit Berlin at the end of June and design one of our communiy walls on Bülowstraße. The three Iranians Frz, Nafir and Xamoosh are an integral part of the Iranian street art community. In their works, they address […]
Retrospective – SCOPE Art Show x URBAN NATION Museum.