And then when we’re looking at it horizontally, we see we’ve got these rows that are going across. So, that’s when we’re looking at it vertically. We’ve got two columns, we’ve got one column for the icons, and we’ve got one column for the text. I’m going to just pop that open, so what we’re looking at here is the landing page that we’re going to create for a mobile phone, when you’re looking at this, I want you to think of the content and think of what it would look like in a grid format.
So, what does it look like? We’ve already got a couple of wireframes, we’ve got one for the landing page for a mobile phone, we’ve got one for a landing page that displays on a tablet or desktop device. So that’s the process for what we’re actually going to be creating. The storyboard says that when the login button is selected then that will navigate the user to the login page. So in order to actually use it, they need to be registered, and they can register or login by using the Login button. We’ve got a use-case here, for our fictitious company, and the idea is that the company is called App-Makers, and one of their employees, they need to be able to log into the app. To start off, we’re going to look at the home page. So that’s the structure of the app that we’re going to build, and depending on how much time we have in the next 30 days, we might add a few more things to that as well.
BOOTSTRAP GRIDS DONT GO NEXT TO EACH THER UPDATE
Modal windows that will pop up and we’re going to use that to create customers, and we’ll also have one to update customers. In the customers section, we’ll have a page to view and search for customers and we’re also going to have modals. I’ve got a home page, we’ve got a login page, and then we’ve got this customers section of the app. What I’ve got open here is an interaction flow of the app that we’re going to build. Hi guys, and welcome back to the Mean Stack 30 Day Challenge! I’ve set myself a challenge to post a video everyday on how you can build your first Mean Stack App, and we’re going to jump straight into it.
BOOTSTRAP GRIDS DONT GO NEXT TO EACH THER CODE
The code mentioned in this video is below: The functional design post mentioned in this video of the home page – use case, storyboard and wireframes can be found here: Home Page Design. – We start building a responsive web app using Bootstrap! – Locating the home page in the MEAN Stack app structure – We’ll then take the design and split it into a Bootstrap grid layout. – Our App Designs (use cases, storyboard, and wireframes) In this video we’ll go through an introduction to Bootstrap, and the Bootstrap grid in the first step to building a home page. This video is part of the 30 Day MEAN Stack Honolulu Challenge MEAN Stack – Deploy to Heroku – Day 30(i).MEAN Stack – Prepare the Build Package for Deployment – Day 30.MEAN Stack – Express.js & Client-side Assets – Day 29.MEAN Stack – Answering Q’s with CSS & AngularJS directives – Day 28.MEAN Stack – AngularJS Notification Service – Day 27.MEAN Stack – Style our AngularJS Create Modal & Delete Customers – Day 26.MEAN Stack – Create Customer AngularJS Modal – Day 25.MEAN Stack – Custom tags with AngularJS directives – Day 24.MEAN Stack – Modal Styling & AngularJS Form Validation – Day 23.MEAN Stack – Save data with an AngularJS Modal – Day 22.MEAN Stack – Styling our AngularJS UI Customer Update Modal – Day 21.MEAN Stack – Pass Customer Details to an AngularJS UI Modal – Day 20.MEAN Stack – Using an AngularJS UI Modal to Update Customers – Day 19.MEAN Stack – Customer Search using AngularJS Filters – Day 18.MEAN Stack – Listing Customers with AngularJS & Bootstrap – Day 17.MEAN Stack – AngularJS Scope & Controllers – Day 16.MEAN Stack – MongoDB Queries & AngularJS Scope – Day 15.MEAN Stack – Mongo Explorer & AngularJS Batarang – Day 14.MEAN Stack – Style the Create Customer Page – Day 13.MEAN Stack – AngularJS Models in Bootstrap Forms – Day 12.MEAN Stack – Client & Server Glue – Day 11.MEAN Stack – Modelling with Mongoose – Day 10.MEAN Stack – Customer CRUD Module with Yeoman – Day 9.MEAN Stack – Style the Sign-up Page – Day 8.MEAN Stack – AngularJS & PassportJS Login Credentials – Day 7.MEAN Stack – Responsive Bootstrap Login Forms – Day 6.MEAN Stack – Social Accounts to Sign-in with Facebook – Day 5.MEAN Stack – Intro to AngularJS ngRepeat & ngClass – Day 4.MEAN Stack – Intro to Bootstrap Buttons, Glyphicons, Navbar – Day 3.MEAN Stack Intro to Bootstrap Grids Day 2.Overview of the MEAN Stack App Structure Day 1.
0 kommentar(er)
